diff --git a/crates/rome_js_analyze/src/react.rs b/crates/rome_js_analyze/src/react.rs index 2d53124d318..cf4a27b6f39 100644 --- a/crates/rome_js_analyze/src/react.rs +++ b/crates/rome_js_analyze/src/react.rs @@ -142,7 +142,7 @@ impl ReactLibrary { /// List of valid [`React` API] /// /// [`React` API]: https://reactjs.org/docs/react-api.html -const VALID_REACT_API: [&str; 14] = [ +const VALID_REACT_API: [&str; 29] = [ "Component", "PureComponent", "memo", @@ -157,6 +157,21 @@ const VALID_REACT_API: [&str; 14] = [ "Suspense", "startTransition", "Children", + "useEffect", + "useLayoutEffect", + "useInsertionEffect", + "useCallback", + "useMemo", + "useImperativeHandle", + "useState", + "useContext", + "useReducer", + "useRef", + "useDebugValue", + "useDeferredValue", + "useTransition", + "useId", + "useSyncExternalStore", ]; /// Checks if the current [JsCallExpression] is a potential [`React` API]. diff --git a/crates/rome_js_analyze/src/react/hooks.rs b/crates/rome_js_analyze/src/react/hooks.rs index 8d0c3b1f371..bcf32e14bfe 100644 --- a/crates/rome_js_analyze/src/react/hooks.rs +++ b/crates/rome_js_analyze/src/react/hooks.rs @@ -1,3 +1,4 @@ +use crate::react::{is_react_call_api, ReactLibrary}; use std::collections::{HashMap, HashSet}; use rome_js_semantic::{Capture, Closure, ClosureExtensions, SemanticModel}; @@ -109,6 +110,15 @@ pub(crate) fn react_hook_configuration<'a>( hooks.get(name) } +const HOOKS_WITH_DEPS_API: [&str; 6] = [ + "useEffect", + "useLayoutEffect", + "useInsertionEffect", + "useCallback", + "useMemo", + "useImperativeHandle", +]; + /// Returns the [TextRange] of the hook name; the node of the /// expression of the argument that correspond to the closure of /// the hook; and the node of the dependency list of the hook. @@ -126,8 +136,10 @@ pub(crate) fn react_hook_configuration<'a>( pub(crate) fn react_hook_with_dependency( call: &JsCallExpression, hooks: &HashMap, + model: &SemanticModel, ) -> Option { - let name = match call.callee().ok()? { + let expression = call.callee().ok()?; + let name = match &expression { AnyJsExpression::JsIdentifierExpression(identifier) => { Some(identifier.name().ok()?.value_token().ok()?) } @@ -139,6 +151,13 @@ pub(crate) fn react_hook_with_dependency( let function_name_range = name.text_trimmed_range(); let name = name.text_trimmed(); + // check if the hooks api is imported from the react library + if HOOKS_WITH_DEPS_API.contains(&name) + && !is_react_call_api(expression, model, ReactLibrary::React, name) + { + return None; + } + let hook = hooks.get(name)?; let closure_index = hook.closure_index?; let dependencies_index = hook.dependencies_index?; diff --git a/crates/rome_js_analyze/src/semantic_analyzers/nursery/use_exhaustive_dependencies.rs b/crates/rome_js_analyze/src/semantic_analyzers/nursery/use_exhaustive_dependencies.rs index fd3da98508e..c8e929a95ed 100644 --- a/crates/rome_js_analyze/src/semantic_analyzers/nursery/use_exhaustive_dependencies.rs +++ b/crates/rome_js_analyze/src/semantic_analyzers/nursery/use_exhaustive_dependencies.rs @@ -509,9 +509,9 @@ impl Rule for UseExhaustiveDependencies { let mut signals = vec![]; let call = ctx.query(); - if let Some(result) = react_hook_with_dependency(call, &options.hooks_config) { - let model = ctx.model(); + let model = ctx.model(); + if let Some(result) = react_hook_with_dependency(call, &options.hooks_config, model) { let Some(component_function) = function_of_hook_call(call) else { return vec![] }; diff --git a/crates/rome_js_analyze/tests/specs/nursery/useExhaustiveDependencies/checkHooksImportedFromReact.js b/crates/rome_js_analyze/tests/specs/nursery/useExhaustiveDependencies/checkHooksImportedFromReact.js new file mode 100644 index 00000000000..34e548d4ede --- /dev/null +++ b/crates/rome_js_analyze/tests/specs/nursery/useExhaustiveDependencies/checkHooksImportedFromReact.js @@ -0,0 +1,20 @@ +function MyComponent1() { + let a = 1; + React.useEffect(() => { + console.log(a); + }); + + // the rule doesn't show the warnings because the hooks are not imported from react. + useEffect(() => { + console.log(a); + }); +} + +function MyComponent2() { + let a = 1; + const React = { useEffect() {} } + // the rule doesn't show the warnings because `React` is defined by the user. + React.useEffect(() => { + console.log(a); + }); +} diff --git a/crates/rome_js_analyze/tests/specs/nursery/useExhaustiveDependencies/checkHooksImportedFromReact.js.snap b/crates/rome_js_analyze/tests/specs/nursery/useExhaustiveDependencies/checkHooksImportedFromReact.js.snap new file mode 100644 index 00000000000..ff12ddbfcde --- /dev/null +++ b/crates/rome_js_analyze/tests/specs/nursery/useExhaustiveDependencies/checkHooksImportedFromReact.js.snap @@ -0,0 +1,55 @@ +--- +source: crates/rome_js_analyze/tests/spec_tests.rs +expression: checkHooksImportedFromReact.js +--- +# Input +```js +function MyComponent1() { + let a = 1; + React.useEffect(() => { + console.log(a); + }); + + // the rule doesn't show the warnings because the hooks are not imported from react. + useEffect(() => { + console.log(a); + }); +} + +function MyComponent2() { + let a = 1; + const React = { useEffect() {} } + // the rule doesn't show the warnings because `React` is defined by the user. + React.useEffect(() => { + console.log(a); + }); +} + +``` + +# Diagnostics +``` +checkHooksImportedFromReact.js:3:9 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━━ + + ! This hook do not specify all of its dependencies. + + 1 │ function MyComponent1() { + 2 │ let a = 1; + > 3 │ React.useEffect(() => { + │ ^^^^^^^^^ + 4 │ console.log(a); + 5 │ }); + + i This dependency is not specified in the hook dependency list. + + 2 │ let a = 1; + 3 │ React.useEffect(() => { + > 4 │ console.log(a); + │ ^ + 5 │ }); + 6 │ + + +``` + + diff --git a/crates/rome_js_analyze/tests/specs/nursery/useExhaustiveDependencies/customHook.js b/crates/rome_js_analyze/tests/specs/nursery/useExhaustiveDependencies/customHook.js index 1dd9c444ea2..4387d80345f 100644 --- a/crates/rome_js_analyze/tests/specs/nursery/useExhaustiveDependencies/customHook.js +++ b/crates/rome_js_analyze/tests/specs/nursery/useExhaustiveDependencies/customHook.js @@ -1,3 +1,5 @@ +import { useEffect } from "react"; + function MyComponent() { let a = 1; useEffect(() => { @@ -6,4 +8,4 @@ function MyComponent() { useMyEffect(() => { console.log(a); }); -} \ No newline at end of file +} diff --git a/crates/rome_js_analyze/tests/specs/nursery/useExhaustiveDependencies/customHook.js.snap b/crates/rome_js_analyze/tests/specs/nursery/useExhaustiveDependencies/customHook.js.snap index 6da45d54712..1e350b302f4 100644 --- a/crates/rome_js_analyze/tests/specs/nursery/useExhaustiveDependencies/customHook.js.snap +++ b/crates/rome_js_analyze/tests/specs/nursery/useExhaustiveDependencies/customHook.js.snap @@ -4,6 +4,8 @@ expression: customHook.js --- # Input ```js +import { useEffect } from "react"; + function MyComponent() { let a = 1; useEffect(() => { @@ -13,53 +15,54 @@ function MyComponent() { console.log(a); }); } + ``` # Diagnostics ``` -customHook.js:3:5 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ +customHook.js:5:5 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ! This hook do not specify all of its dependencies. - 1 │ function MyComponent() { - 2 │ let a = 1; - > 3 │ useEffect(() => { + 3 │ function MyComponent() { + 4 │ let a = 1; + > 5 │ useEffect(() => { │ ^^^^^^^^^ - 4 │ console.log(a); - 5 │ }); + 6 │ console.log(a); + 7 │ }); i This dependency is not specified in the hook dependency list. - 2 │ let a = 1; - 3 │ useEffect(() => { - > 4 │ console.log(a); + 4 │ let a = 1; + 5 │ useEffect(() => { + > 6 │ console.log(a); │ ^ - 5 │ }); - 6 │ useMyEffect(() => { + 7 │ }); + 8 │ useMyEffect(() => { ``` ``` -customHook.js:6:5 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ +customHook.js:8:5 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ! This hook do not specify all of its dependencies. - 4 │ console.log(a); - 5 │ }); - > 6 │ useMyEffect(() => { - │ ^^^^^^^^^^^ - 7 │ console.log(a); - 8 │ }); + 6 │ console.log(a); + 7 │ }); + > 8 │ useMyEffect(() => { + │ ^^^^^^^^^^^ + 9 │ console.log(a); + 10 │ }); i This dependency is not specified in the hook dependency list. - 5 │ }); - 6 │ useMyEffect(() => { - > 7 │ console.log(a); - │ ^ - 8 │ }); - 9 │ } + 7 │ }); + 8 │ useMyEffect(() => { + > 9 │ console.log(a); + │ ^ + 10 │ }); + 11 │ } ``` diff --git a/crates/rome_js_analyze/tests/specs/nursery/useExhaustiveDependencies/extraDependenciesInvalid.js b/crates/rome_js_analyze/tests/specs/nursery/useExhaustiveDependencies/extraDependenciesInvalid.js index 0f9a09185d3..7697dd20b82 100644 --- a/crates/rome_js_analyze/tests/specs/nursery/useExhaustiveDependencies/extraDependenciesInvalid.js +++ b/crates/rome_js_analyze/tests/specs/nursery/useExhaustiveDependencies/extraDependenciesInvalid.js @@ -1,3 +1,5 @@ +import { useEffect } from "react"; + function MyComponent() { let a = 1; useEffect(() => {}, [a]); @@ -26,4 +28,4 @@ function MyComponent1() { useEffect(() => { console.log(someObj) }, [someObj.id]); -} \ No newline at end of file +} diff --git a/crates/rome_js_analyze/tests/specs/nursery/useExhaustiveDependencies/extraDependenciesInvalid.js.snap b/crates/rome_js_analyze/tests/specs/nursery/useExhaustiveDependencies/extraDependenciesInvalid.js.snap index 546c47e6c80..fef188f942a 100644 --- a/crates/rome_js_analyze/tests/specs/nursery/useExhaustiveDependencies/extraDependenciesInvalid.js.snap +++ b/crates/rome_js_analyze/tests/specs/nursery/useExhaustiveDependencies/extraDependenciesInvalid.js.snap @@ -4,6 +4,8 @@ expression: extraDependenciesInvalid.js --- # Input ```js +import { useEffect } from "react"; + function MyComponent() { let a = 1; useEffect(() => {}, [a]); @@ -33,142 +35,144 @@ function MyComponent1() { console.log(someObj) }, [someObj.id]); } + ``` # Diagnostics ``` -extraDependenciesInvalid.js:3:3 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ +extraDependenciesInvalid.js:5:3 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ! This hook specifies more dependencies than necessary. - 1 │ function MyComponent() { - 2 │ let a = 1; - > 3 │ useEffect(() => {}, [a]); + 3 │ function MyComponent() { + 4 │ let a = 1; + > 5 │ useEffect(() => {}, [a]); │ ^^^^^^^^^ - 4 │ } - 5 │ + 6 │ } + 7 │ i This dependency can be removed from the list. - 1 │ function MyComponent() { - 2 │ let a = 1; - > 3 │ useEffect(() => {}, [a]); + 3 │ function MyComponent() { + 4 │ let a = 1; + > 5 │ useEffect(() => {}, [a]); │ ^ - 4 │ } - 5 │ + 6 │ } + 7 │ ``` ``` -extraDependenciesInvalid.js:10:3 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━━━━ +extraDependenciesInvalid.js:12:3 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ! This hook specifies more dependencies than necessary. - 8 │ function MyComponent2() { - 9 │ let a = 1, b = 1; - > 10 │ useEffect(() => {}, [a, b]); + 10 │ function MyComponent2() { + 11 │ let a = 1, b = 1; + > 12 │ useEffect(() => {}, [a, b]); │ ^^^^^^^^^ - 11 │ } - 12 │ + 13 │ } + 14 │ i This dependency can be removed from the list. - 8 │ function MyComponent2() { - 9 │ let a = 1, b = 1; - > 10 │ useEffect(() => {}, [a, b]); + 10 │ function MyComponent2() { + 11 │ let a = 1, b = 1; + > 12 │ useEffect(() => {}, [a, b]); │ ^ - 11 │ } - 12 │ + 13 │ } + 14 │ i This dependency can be removed from the list. - 8 │ function MyComponent2() { - 9 │ let a = 1, b = 1; - > 10 │ useEffect(() => {}, [a, b]); + 10 │ function MyComponent2() { + 11 │ let a = 1, b = 1; + > 12 │ useEffect(() => {}, [a, b]); │ ^ - 11 │ } - 12 │ + 13 │ } + 14 │ ``` ``` -extraDependenciesInvalid.js:17:3 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━━━━ +extraDependenciesInvalid.js:19:3 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ! This hook specifies more dependencies than necessary. - 15 │ function MyComponent2() { - 16 │ const a = 1; - > 17 │ useEffect(() => {}, [a]); + 17 │ function MyComponent2() { + 18 │ const a = 1; + > 19 │ useEffect(() => {}, [a]); │ ^^^^^^^^^ - 18 │ } - 19 │ + 20 │ } + 21 │ i This dependency can be removed from the list. - 15 │ function MyComponent2() { - 16 │ const a = 1; - > 17 │ useEffect(() => {}, [a]); + 17 │ function MyComponent2() { + 18 │ const a = 1; + > 19 │ useEffect(() => {}, [a]); │ ^ - 18 │ } - 19 │ + 20 │ } + 21 │ ``` ``` -extraDependenciesInvalid.js:26:3 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━━━━ +extraDependenciesInvalid.js:28:3 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ! This hook specifies a dependency more specific that its captures - 24 │ function MyComponent1() { - 25 │ let someObj = getObj(); - > 26 │ useEffect(() => { + 26 │ function MyComponent1() { + 27 │ let someObj = getObj(); + > 28 │ useEffect(() => { │ ^^^^^^^^^ - 27 │ console.log(someObj) - 28 │ }, [someObj.id]); + 29 │ console.log(someObj) + 30 │ }, [someObj.id]); i This capture is more generic than... - 25 │ let someObj = getObj(); - 26 │ useEffect(() => { - > 27 │ console.log(someObj) + 27 │ let someObj = getObj(); + 28 │ useEffect(() => { + > 29 │ console.log(someObj) │ ^^^^^^^ - 28 │ }, [someObj.id]); - 29 │ } + 30 │ }, [someObj.id]); + 31 │ } i ...this dependency. - 26 │ useEffect(() => { - 27 │ console.log(someObj) - > 28 │ }, [someObj.id]); + 28 │ useEffect(() => { + 29 │ console.log(someObj) + > 30 │ }, [someObj.id]); │ ^^^^^^^^^^ - 29 │ } + 31 │ } + 32 │ ``` ``` -extraDependenciesInvalid.js:26:3 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━━━━ +extraDependenciesInvalid.js:28:3 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ! This hook do not specify all of its dependencies. - 24 │ function MyComponent1() { - 25 │ let someObj = getObj(); - > 26 │ useEffect(() => { + 26 │ function MyComponent1() { + 27 │ let someObj = getObj(); + > 28 │ useEffect(() => { │ ^^^^^^^^^ - 27 │ console.log(someObj) - 28 │ }, [someObj.id]); + 29 │ console.log(someObj) + 30 │ }, [someObj.id]); i This dependency is not specified in the hook dependency list. - 25 │ let someObj = getObj(); - 26 │ useEffect(() => { - > 27 │ console.log(someObj) + 27 │ let someObj = getObj(); + 28 │ useEffect(() => { + > 29 │ console.log(someObj) │ ^^^^^^^ - 28 │ }, [someObj.id]); - 29 │ } + 30 │ }, [someObj.id]); + 31 │ } ``` diff --git a/crates/rome_js_analyze/tests/specs/nursery/useExhaustiveDependencies/missingDependenciesInvalid.js b/crates/rome_js_analyze/tests/specs/nursery/useExhaustiveDependencies/missingDependenciesInvalid.js index 6dd75b6dc60..f7b55df875d 100644 --- a/crates/rome_js_analyze/tests/specs/nursery/useExhaustiveDependencies/missingDependenciesInvalid.js +++ b/crates/rome_js_analyze/tests/specs/nursery/useExhaustiveDependencies/missingDependenciesInvalid.js @@ -1,3 +1,6 @@ +import React from "react"; +import { useEffect, useCallback, useMemo, useLayoutEffect, useInsertionEffect, useImperativeHandle } from "react"; + function MyComponent1() { let a = 1; const b = a + 1; diff --git a/crates/rome_js_analyze/tests/specs/nursery/useExhaustiveDependencies/missingDependenciesInvalid.js.snap b/crates/rome_js_analyze/tests/specs/nursery/useExhaustiveDependencies/missingDependenciesInvalid.js.snap index 2072d91d196..c6507708054 100644 --- a/crates/rome_js_analyze/tests/specs/nursery/useExhaustiveDependencies/missingDependenciesInvalid.js.snap +++ b/crates/rome_js_analyze/tests/specs/nursery/useExhaustiveDependencies/missingDependenciesInvalid.js.snap @@ -4,6 +4,9 @@ expression: missingDependenciesInvalid.js --- # Input ```js +import React from "react"; +import { useEffect, useCallback, useMemo, useLayoutEffect, useInsertionEffect, useImperativeHandle } from "react"; + function MyComponent1() { let a = 1; const b = a + 1; @@ -131,583 +134,583 @@ function MyComponent13() { # Diagnostics ``` -missingDependenciesInvalid.js:4:5 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━━━ +missingDependenciesInvalid.js:7:5 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━━━ ! This hook do not specify all of its dependencies. - 2 │ let a = 1; - 3 │ const b = a + 1; - > 4 │ useEffect(() => { + 5 │ let a = 1; + 6 │ const b = a + 1; + > 7 │ useEffect(() => { │ ^^^^^^^^^ - 5 │ console.log(a, b); - 6 │ }); + 8 │ console.log(a, b); + 9 │ }); i This dependency is not specified in the hook dependency list. - 3 │ const b = a + 1; - 4 │ useEffect(() => { - > 5 │ console.log(a, b); - │ ^ - 6 │ }); - 7 │ } + 6 │ const b = a + 1; + 7 │ useEffect(() => { + > 8 │ console.log(a, b); + │ ^ + 9 │ }); + 10 │ } ``` ``` -missingDependenciesInvalid.js:4:5 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━━━ +missingDependenciesInvalid.js:7:5 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━━━ ! This hook do not specify all of its dependencies. - 2 │ let a = 1; - 3 │ const b = a + 1; - > 4 │ useEffect(() => { + 5 │ let a = 1; + 6 │ const b = a + 1; + > 7 │ useEffect(() => { │ ^^^^^^^^^ - 5 │ console.log(a, b); - 6 │ }); + 8 │ console.log(a, b); + 9 │ }); i This dependency is not specified in the hook dependency list. - 3 │ const b = a + 1; - 4 │ useEffect(() => { - > 5 │ console.log(a, b); - │ ^ - 6 │ }); - 7 │ } + 6 │ const b = a + 1; + 7 │ useEffect(() => { + > 8 │ console.log(a, b); + │ ^ + 9 │ }); + 10 │ } ``` ``` -missingDependenciesInvalid.js:18:3 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━━ +missingDependenciesInvalid.js:21:3 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━━ ! This hook do not specify all of its dependencies. - 16 │ const deferredValue = useDeferredValue(value); - 17 │ const [isPending, startTransition] = useTransition(); - > 18 │ useEffect(() => { + 19 │ const deferredValue = useDeferredValue(value); + 20 │ const [isPending, startTransition] = useTransition(); + > 21 │ useEffect(() => { │ ^^^^^^^^^ - 19 │ console.log(name); - 20 │ setName(1); + 22 │ console.log(name); + 23 │ setName(1); i This dependency is not specified in the hook dependency list. - 25 │ console.log(memoizedCallback); - 26 │ console.log(memoizedValue); - > 27 │ console.log(deferredValue); + 28 │ console.log(memoizedCallback); + 29 │ console.log(memoizedValue); + > 30 │ console.log(deferredValue); │ ^^^^^^^^^^^^^ - 28 │ - 29 │ console.log(isPending); + 31 │ + 32 │ console.log(isPending); ``` ``` -missingDependenciesInvalid.js:18:3 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━━ +missingDependenciesInvalid.js:21:3 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━━ ! This hook do not specify all of its dependencies. - 16 │ const deferredValue = useDeferredValue(value); - 17 │ const [isPending, startTransition] = useTransition(); - > 18 │ useEffect(() => { + 19 │ const deferredValue = useDeferredValue(value); + 20 │ const [isPending, startTransition] = useTransition(); + > 21 │ useEffect(() => { │ ^^^^^^^^^ - 19 │ console.log(name); - 20 │ setName(1); + 22 │ console.log(name); + 23 │ setName(1); i This dependency is not specified in the hook dependency list. - 23 │ dispatch(1); - 24 │ - > 25 │ console.log(memoizedCallback); + 26 │ dispatch(1); + 27 │ + > 28 │ console.log(memoizedCallback); │ ^^^^^^^^^^^^^^^^ - 26 │ console.log(memoizedValue); - 27 │ console.log(deferredValue); + 29 │ console.log(memoizedValue); + 30 │ console.log(deferredValue); ``` ``` -missingDependenciesInvalid.js:18:3 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━━ +missingDependenciesInvalid.js:21:3 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━━ ! This hook do not specify all of its dependencies. - 16 │ const deferredValue = useDeferredValue(value); - 17 │ const [isPending, startTransition] = useTransition(); - > 18 │ useEffect(() => { + 19 │ const deferredValue = useDeferredValue(value); + 20 │ const [isPending, startTransition] = useTransition(); + > 21 │ useEffect(() => { │ ^^^^^^^^^ - 19 │ console.log(name); - 20 │ setName(1); + 22 │ console.log(name); + 23 │ setName(1); i This dependency is not specified in the hook dependency list. - 20 │ setName(1); - 21 │ - > 22 │ console.log(state); - │ ^^^^^ - 23 │ dispatch(1); + 23 │ setName(1); 24 │ + > 25 │ console.log(state); + │ ^^^^^ + 26 │ dispatch(1); + 27 │ ``` ``` -missingDependenciesInvalid.js:18:3 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━━ +missingDependenciesInvalid.js:21:3 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━━ ! This hook do not specify all of its dependencies. - 16 │ const deferredValue = useDeferredValue(value); - 17 │ const [isPending, startTransition] = useTransition(); - > 18 │ useEffect(() => { + 19 │ const deferredValue = useDeferredValue(value); + 20 │ const [isPending, startTransition] = useTransition(); + > 21 │ useEffect(() => { │ ^^^^^^^^^ - 19 │ console.log(name); - 20 │ setName(1); + 22 │ console.log(name); + 23 │ setName(1); i This dependency is not specified in the hook dependency list. - 17 │ const [isPending, startTransition] = useTransition(); - 18 │ useEffect(() => { - > 19 │ console.log(name); + 20 │ const [isPending, startTransition] = useTransition(); + 21 │ useEffect(() => { + > 22 │ console.log(name); │ ^^^^ - 20 │ setName(1); - 21 │ + 23 │ setName(1); + 24 │ ``` ``` -missingDependenciesInvalid.js:18:3 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━━ +missingDependenciesInvalid.js:21:3 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━━ ! This hook do not specify all of its dependencies. - 16 │ const deferredValue = useDeferredValue(value); - 17 │ const [isPending, startTransition] = useTransition(); - > 18 │ useEffect(() => { + 19 │ const deferredValue = useDeferredValue(value); + 20 │ const [isPending, startTransition] = useTransition(); + > 21 │ useEffect(() => { │ ^^^^^^^^^ - 19 │ console.log(name); - 20 │ setName(1); + 22 │ console.log(name); + 23 │ setName(1); i This dependency is not specified in the hook dependency list. - 27 │ console.log(deferredValue); - 28 │ - > 29 │ console.log(isPending); + 30 │ console.log(deferredValue); + 31 │ + > 32 │ console.log(isPending); │ ^^^^^^^^^ - 30 │ startTransition(); - 31 │ }, []); + 33 │ startTransition(); + 34 │ }, []); ``` ``` -missingDependenciesInvalid.js:18:3 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━━ +missingDependenciesInvalid.js:21:3 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━━ ! This hook do not specify all of its dependencies. - 16 │ const deferredValue = useDeferredValue(value); - 17 │ const [isPending, startTransition] = useTransition(); - > 18 │ useEffect(() => { + 19 │ const deferredValue = useDeferredValue(value); + 20 │ const [isPending, startTransition] = useTransition(); + > 21 │ useEffect(() => { │ ^^^^^^^^^ - 19 │ console.log(name); - 20 │ setName(1); + 22 │ console.log(name); + 23 │ setName(1); i This dependency is not specified in the hook dependency list. - 25 │ console.log(memoizedCallback); - > 26 │ console.log(memoizedValue); + 28 │ console.log(memoizedCallback); + > 29 │ console.log(memoizedValue); │ ^^^^^^^^^^^^^ - 27 │ console.log(deferredValue); - 28 │ + 30 │ console.log(deferredValue); + 31 │ ``` ``` -missingDependenciesInvalid.js:38:3 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━━ +missingDependenciesInvalid.js:41:3 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━━ ! This hook do not specify all of its dependencies. - 36 │ function MyComponent3() { - 37 │ let a = 1; - > 38 │ useEffect(() => console.log(a)); + 39 │ function MyComponent3() { + 40 │ let a = 1; + > 41 │ useEffect(() => console.log(a)); │ ^^^^^^^^^ - 39 │ useCallback(() => console.log(a)); - 40 │ useMemo(() => console.log(a)); + 42 │ useCallback(() => console.log(a)); + 43 │ useMemo(() => console.log(a)); i This dependency is not specified in the hook dependency list. - 36 │ function MyComponent3() { - 37 │ let a = 1; - > 38 │ useEffect(() => console.log(a)); + 39 │ function MyComponent3() { + 40 │ let a = 1; + > 41 │ useEffect(() => console.log(a)); │ ^ - 39 │ useCallback(() => console.log(a)); - 40 │ useMemo(() => console.log(a)); + 42 │ useCallback(() => console.log(a)); + 43 │ useMemo(() => console.log(a)); ``` ``` -missingDependenciesInvalid.js:39:3 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━━ +missingDependenciesInvalid.js:42:3 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━━ ! This hook do not specify all of its dependencies. - 37 │ let a = 1; - 38 │ useEffect(() => console.log(a)); - > 39 │ useCallback(() => console.log(a)); + 40 │ let a = 1; + 41 │ useEffect(() => console.log(a)); + > 42 │ useCallback(() => console.log(a)); │ ^^^^^^^^^^^ - 40 │ useMemo(() => console.log(a)); - 41 │ useImperativeHandle(ref, () => console.log(a)); + 43 │ useMemo(() => console.log(a)); + 44 │ useImperativeHandle(ref, () => console.log(a)); i This dependency is not specified in the hook dependency list. - 37 │ let a = 1; - 38 │ useEffect(() => console.log(a)); - > 39 │ useCallback(() => console.log(a)); + 40 │ let a = 1; + 41 │ useEffect(() => console.log(a)); + > 42 │ useCallback(() => console.log(a)); │ ^ - 40 │ useMemo(() => console.log(a)); - 41 │ useImperativeHandle(ref, () => console.log(a)); + 43 │ useMemo(() => console.log(a)); + 44 │ useImperativeHandle(ref, () => console.log(a)); ``` ``` -missingDependenciesInvalid.js:40:3 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━━ +missingDependenciesInvalid.js:43:3 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━━ ! This hook do not specify all of its dependencies. - 38 │ useEffect(() => console.log(a)); - 39 │ useCallback(() => console.log(a)); - > 40 │ useMemo(() => console.log(a)); + 41 │ useEffect(() => console.log(a)); + 42 │ useCallback(() => console.log(a)); + > 43 │ useMemo(() => console.log(a)); │ ^^^^^^^ - 41 │ useImperativeHandle(ref, () => console.log(a)); - 42 │ useLayoutEffect(() => console.log(a)); + 44 │ useImperativeHandle(ref, () => console.log(a)); + 45 │ useLayoutEffect(() => console.log(a)); i This dependency is not specified in the hook dependency list. - 38 │ useEffect(() => console.log(a)); - 39 │ useCallback(() => console.log(a)); - > 40 │ useMemo(() => console.log(a)); + 41 │ useEffect(() => console.log(a)); + 42 │ useCallback(() => console.log(a)); + > 43 │ useMemo(() => console.log(a)); │ ^ - 41 │ useImperativeHandle(ref, () => console.log(a)); - 42 │ useLayoutEffect(() => console.log(a)); + 44 │ useImperativeHandle(ref, () => console.log(a)); + 45 │ useLayoutEffect(() => console.log(a)); ``` ``` -missingDependenciesInvalid.js:41:3 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━━ +missingDependenciesInvalid.js:44:3 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━━ ! This hook do not specify all of its dependencies. - 39 │ useCallback(() => console.log(a)); - 40 │ useMemo(() => console.log(a)); - > 41 │ useImperativeHandle(ref, () => console.log(a)); + 42 │ useCallback(() => console.log(a)); + 43 │ useMemo(() => console.log(a)); + > 44 │ useImperativeHandle(ref, () => console.log(a)); │ ^^^^^^^^^^^^^^^^^^^ - 42 │ useLayoutEffect(() => console.log(a)); - 43 │ useInsertionEffect(() => console.log(a)); + 45 │ useLayoutEffect(() => console.log(a)); + 46 │ useInsertionEffect(() => console.log(a)); i This dependency is not specified in the hook dependency list. - 39 │ useCallback(() => console.log(a)); - 40 │ useMemo(() => console.log(a)); - > 41 │ useImperativeHandle(ref, () => console.log(a)); + 42 │ useCallback(() => console.log(a)); + 43 │ useMemo(() => console.log(a)); + > 44 │ useImperativeHandle(ref, () => console.log(a)); │ ^ - 42 │ useLayoutEffect(() => console.log(a)); - 43 │ useInsertionEffect(() => console.log(a)); + 45 │ useLayoutEffect(() => console.log(a)); + 46 │ useInsertionEffect(() => console.log(a)); ``` ``` -missingDependenciesInvalid.js:42:3 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━━ +missingDependenciesInvalid.js:45:3 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━━ ! This hook do not specify all of its dependencies. - 40 │ useMemo(() => console.log(a)); - 41 │ useImperativeHandle(ref, () => console.log(a)); - > 42 │ useLayoutEffect(() => console.log(a)); + 43 │ useMemo(() => console.log(a)); + 44 │ useImperativeHandle(ref, () => console.log(a)); + > 45 │ useLayoutEffect(() => console.log(a)); │ ^^^^^^^^^^^^^^^ - 43 │ useInsertionEffect(() => console.log(a)); - 44 │ } + 46 │ useInsertionEffect(() => console.log(a)); + 47 │ } i This dependency is not specified in the hook dependency list. - 40 │ useMemo(() => console.log(a)); - 41 │ useImperativeHandle(ref, () => console.log(a)); - > 42 │ useLayoutEffect(() => console.log(a)); + 43 │ useMemo(() => console.log(a)); + 44 │ useImperativeHandle(ref, () => console.log(a)); + > 45 │ useLayoutEffect(() => console.log(a)); │ ^ - 43 │ useInsertionEffect(() => console.log(a)); - 44 │ } + 46 │ useInsertionEffect(() => console.log(a)); + 47 │ } ``` ``` -missingDependenciesInvalid.js:43:3 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━━ +missingDependenciesInvalid.js:46:3 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━━ ! This hook do not specify all of its dependencies. - 41 │ useImperativeHandle(ref, () => console.log(a)); - 42 │ useLayoutEffect(() => console.log(a)); - > 43 │ useInsertionEffect(() => console.log(a)); + 44 │ useImperativeHandle(ref, () => console.log(a)); + 45 │ useLayoutEffect(() => console.log(a)); + > 46 │ useInsertionEffect(() => console.log(a)); │ ^^^^^^^^^^^^^^^^^^ - 44 │ } - 45 │ + 47 │ } + 48 │ i This dependency is not specified in the hook dependency list. - 41 │ useImperativeHandle(ref, () => console.log(a)); - 42 │ useLayoutEffect(() => console.log(a)); - > 43 │ useInsertionEffect(() => console.log(a)); + 44 │ useImperativeHandle(ref, () => console.log(a)); + 45 │ useLayoutEffect(() => console.log(a)); + > 46 │ useInsertionEffect(() => console.log(a)); │ ^ - 44 │ } - 45 │ + 47 │ } + 48 │ ``` ``` -missingDependenciesInvalid.js:50:3 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━━ +missingDependenciesInvalid.js:53:3 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━━ ! This hook do not specify all of its dependencies. - 48 │ function MyComponent4() { - 49 │ let a = 1; - > 50 │ useEffect(() => { + 51 │ function MyComponent4() { + 52 │ let a = 1; + > 53 │ useEffect(() => { │ ^^^^^^^^^ - 51 │ return () => console.log(a) - 52 │ }, []); + 54 │ return () => console.log(a) + 55 │ }, []); i This dependency is not specified in the hook dependency list. - 49 │ let a = 1; - 50 │ useEffect(() => { - > 51 │ return () => console.log(a) + 52 │ let a = 1; + 53 │ useEffect(() => { + > 54 │ return () => console.log(a) │ ^ - 52 │ }, []); - 53 │ } + 55 │ }, []); + 56 │ } ``` ``` -missingDependenciesInvalid.js:59:3 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━━ +missingDependenciesInvalid.js:62:3 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━━ ! This hook do not specify all of its dependencies. - 57 │ function MyComponent5() { - 58 │ let a = 1; - > 59 │ useEffect(() => { + 60 │ function MyComponent5() { + 61 │ let a = 1; + > 62 │ useEffect(() => { │ ^^^^^^^^^ - 60 │ console.log(a); - 61 │ return () => console.log(a); + 63 │ console.log(a); + 64 │ return () => console.log(a); i This dependency is not specified in the hook dependency list. - 58 │ let a = 1; - 59 │ useEffect(() => { - > 60 │ console.log(a); + 61 │ let a = 1; + 62 │ useEffect(() => { + > 63 │ console.log(a); │ ^ - 61 │ return () => console.log(a); - 62 │ }, []); + 64 │ return () => console.log(a); + 65 │ }, []); i This dependency is not specified in the hook dependency list. - 59 │ useEffect(() => { - 60 │ console.log(a); - > 61 │ return () => console.log(a); + 62 │ useEffect(() => { + 63 │ console.log(a); + > 64 │ return () => console.log(a); │ ^ - 62 │ }, []); - 63 │ } + 65 │ }, []); + 66 │ } ``` ``` -missingDependenciesInvalid.js:69:3 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━━ +missingDependenciesInvalid.js:72:3 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━━ ! This hook do not specify all of its dependencies. - 67 │ function MyComponent6() { - 68 │ let someObj = getObj(); - > 69 │ useEffect(() => { + 70 │ function MyComponent6() { + 71 │ let someObj = getObj(); + > 72 │ useEffect(() => { │ ^^^^^^^^^ - 70 │ console.log(someObj.name) - 71 │ }); + 73 │ console.log(someObj.name) + 74 │ }); i This dependency is not specified in the hook dependency list. - 68 │ let someObj = getObj(); - 69 │ useEffect(() => { - > 70 │ console.log(someObj.name) + 71 │ let someObj = getObj(); + 72 │ useEffect(() => { + > 73 │ console.log(someObj.name) │ ^^^^^^^^^^^^ - 71 │ }); - 72 │ } + 74 │ }); + 75 │ } ``` ``` -missingDependenciesInvalid.js:75:3 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━━ +missingDependenciesInvalid.js:78:3 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━━ ! This hook do not specify all of its dependencies. - 74 │ const MyComponent7 = React.memo(function ({ a }) { - > 75 │ useEffect(() => { + 77 │ const MyComponent7 = React.memo(function ({ a }) { + > 78 │ useEffect(() => { │ ^^^^^^^^^ - 76 │ console.log(a); - 77 │ }); + 79 │ console.log(a); + 80 │ }); i This dependency is not specified in the hook dependency list. - 74 │ const MyComponent7 = React.memo(function ({ a }) { - 75 │ useEffect(() => { - > 76 │ console.log(a); + 77 │ const MyComponent7 = React.memo(function ({ a }) { + 78 │ useEffect(() => { + > 79 │ console.log(a); │ ^ - 77 │ }); - 78 │ }); + 80 │ }); + 81 │ }); ``` ``` -missingDependenciesInvalid.js:81:3 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━━ +missingDependenciesInvalid.js:84:3 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━━ ! This hook do not specify all of its dependencies. - 80 │ const MyComponent8 = React.memo(({ a }) => { - > 81 │ useEffect(() => { + 83 │ const MyComponent8 = React.memo(({ a }) => { + > 84 │ useEffect(() => { │ ^^^^^^^^^ - 82 │ console.log(a); - 83 │ }); + 85 │ console.log(a); + 86 │ }); i This dependency is not specified in the hook dependency list. - 80 │ const MyComponent8 = React.memo(({ a }) => { - 81 │ useEffect(() => { - > 82 │ console.log(a); + 83 │ const MyComponent8 = React.memo(({ a }) => { + 84 │ useEffect(() => { + > 85 │ console.log(a); │ ^ - 83 │ }); - 84 │ }); + 86 │ }); + 87 │ }); ``` ``` -missingDependenciesInvalid.js:89:3 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━━ +missingDependenciesInvalid.js:92:3 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━━ ! This hook do not specify all of its dependencies. - 87 │ export function MyComponent9() { - 88 │ let a = 1; - > 89 │ useEffect(() => { + 90 │ export function MyComponent9() { + 91 │ let a = 1; + > 92 │ useEffect(() => { │ ^^^^^^^^^ - 90 │ console.log(a); - 91 │ }); + 93 │ console.log(a); + 94 │ }); i This dependency is not specified in the hook dependency list. - 88 │ let a = 1; - 89 │ useEffect(() => { - > 90 │ console.log(a); + 91 │ let a = 1; + 92 │ useEffect(() => { + > 93 │ console.log(a); │ ^ - 91 │ }); - 92 │ } + 94 │ }); + 95 │ } ``` ``` -missingDependenciesInvalid.js:96:3 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━━ +missingDependenciesInvalid.js:99:3 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━━ ! This hook do not specify all of its dependencies. - 94 │ export default function MyComponent10() { - 95 │ let a = 1; - > 96 │ useEffect(() => { - │ ^^^^^^^^^ - 97 │ console.log(a); - 98 │ }); + 97 │ export default function MyComponent10() { + 98 │ let a = 1; + > 99 │ useEffect(() => { + │ ^^^^^^^^^ + 100 │ console.log(a); + 101 │ }); i This dependency is not specified in the hook dependency list. - 95 │ let a = 1; - 96 │ useEffect(() => { - > 97 │ console.log(a); - │ ^ - 98 │ }); - 99 │ } + 98 │ let a = 1; + 99 │ useEffect(() => { + > 100 │ console.log(a); + │ ^ + 101 │ }); + 102 │ } ``` ``` -missingDependenciesInvalid.js:104:3 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━ +missingDependenciesInvalid.js:107:3 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━ ! This hook do not specify all of its dependencies. - 102 │ function MyComponent11() { - 103 │ let a = 1; - > 104 │ useEffect(function inner() { + 105 │ function MyComponent11() { + 106 │ let a = 1; + > 107 │ useEffect(function inner() { │ ^^^^^^^^^ - 105 │ console.log(a); - 106 │ }); + 108 │ console.log(a); + 109 │ }); i This dependency is not specified in the hook dependency list. - 103 │ let a = 1; - 104 │ useEffect(function inner() { - > 105 │ console.log(a); + 106 │ let a = 1; + 107 │ useEffect(function inner() { + > 108 │ console.log(a); │ ^ - 106 │ }); - 107 │ } + 109 │ }); + 110 │ } ``` ``` -missingDependenciesInvalid.js:111:3 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━ +missingDependenciesInvalid.js:114:3 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━ ! This hook do not specify all of its dependencies. - 109 │ function MyComponent12() { - 110 │ let a = 1; - > 111 │ useEffect(async function inner() { + 112 │ function MyComponent12() { + 113 │ let a = 1; + > 114 │ useEffect(async function inner() { │ ^^^^^^^^^ - 112 │ console.log(a); - 113 │ }); + 115 │ console.log(a); + 116 │ }); i This dependency is not specified in the hook dependency list. - 110 │ let a = 1; - 111 │ useEffect(async function inner() { - > 112 │ console.log(a); + 113 │ let a = 1; + 114 │ useEffect(async function inner() { + > 115 │ console.log(a); │ ^ - 113 │ }); - 114 │ } + 116 │ }); + 117 │ } ``` ``` -missingDependenciesInvalid.js:119:9 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━ +missingDependenciesInvalid.js:122:9 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━ ! This hook do not specify all of its dependencies. - 117 │ function MyComponent13() { - 118 │ let a = 1; - > 119 │ React.useEffect(() => { + 120 │ function MyComponent13() { + 121 │ let a = 1; + > 122 │ React.useEffect(() => { │ ^^^^^^^^^ - 120 │ console.log(a); - 121 │ }); + 123 │ console.log(a); + 124 │ }); i This dependency is not specified in the hook dependency list. - 118 │ let a = 1; - 119 │ React.useEffect(() => { - > 120 │ console.log(a); + 121 │ let a = 1; + 122 │ React.useEffect(() => { + > 123 │ console.log(a); │ ^ - 121 │ }); - 122 │ } + 124 │ }); + 125 │ } ``` diff --git a/crates/rome_js_analyze/tests/specs/nursery/useExhaustiveDependencies/valid.js b/crates/rome_js_analyze/tests/specs/nursery/useExhaustiveDependencies/valid.js index ded66870cab..5c84dd76315 100644 --- a/crates/rome_js_analyze/tests/specs/nursery/useExhaustiveDependencies/valid.js +++ b/crates/rome_js_analyze/tests/specs/nursery/useExhaustiveDependencies/valid.js @@ -1,5 +1,7 @@ /* should not generate diagnostics */ +import React from "react"; +import { useEffect } from "react"; import doSomething from 'a'; // No captures diff --git a/crates/rome_js_analyze/tests/specs/nursery/useExhaustiveDependencies/valid.js.snap b/crates/rome_js_analyze/tests/specs/nursery/useExhaustiveDependencies/valid.js.snap index 5caf8e27da5..79d246e9ec5 100644 --- a/crates/rome_js_analyze/tests/specs/nursery/useExhaustiveDependencies/valid.js.snap +++ b/crates/rome_js_analyze/tests/specs/nursery/useExhaustiveDependencies/valid.js.snap @@ -6,6 +6,8 @@ expression: valid.js ```js /* should not generate diagnostics */ +import React from "react"; +import { useEffect } from "react"; import doSomething from 'a'; // No captures diff --git a/crates/rome_js_analyze/tests/specs/nursery/useExhaustiveDependencies/valid.ts b/crates/rome_js_analyze/tests/specs/nursery/useExhaustiveDependencies/valid.ts index 50bab64eb43..d6c0163da19 100644 --- a/crates/rome_js_analyze/tests/specs/nursery/useExhaustiveDependencies/valid.ts +++ b/crates/rome_js_analyze/tests/specs/nursery/useExhaustiveDependencies/valid.ts @@ -1,6 +1,6 @@ /* should not generate diagnostics */ -import useEffect from 'react'; +import { useEffect } from "react"; // capturing declarations function overloaded(s: string): string; diff --git a/crates/rome_js_analyze/tests/specs/nursery/useExhaustiveDependencies/valid.ts.snap b/crates/rome_js_analyze/tests/specs/nursery/useExhaustiveDependencies/valid.ts.snap index 113662570c6..9c1f071d234 100644 --- a/crates/rome_js_analyze/tests/specs/nursery/useExhaustiveDependencies/valid.ts.snap +++ b/crates/rome_js_analyze/tests/specs/nursery/useExhaustiveDependencies/valid.ts.snap @@ -6,7 +6,7 @@ expression: valid.ts ```js /* should not generate diagnostics */ -import useEffect from 'react'; +import { useEffect } from "react"; // capturing declarations function overloaded(s: string): string;