linter: followups for react/exhaustive-dep #7246
Description
Following from #7151, there are a few changes left to complete for parity with reacts lint rule:
- unknown dependeencies should report on the
useCallbackident, not the second arg fix(linter): react/exhaustive-deps update span for unknown deps diagnostic #7249
⚠ react_hooks(exhaustive-deps): React Hook useCallback received a function whose dependencies are unknown.
╭─[kibana/src/plugins/console/public/application/hooks/use_save_current_text_object.ts:27:5]
26 │ return useCallback(
27 │ ╭─▶ throttle(
28 │ │ (text: string) => {
29 │ │ const { current: promise } = promiseChainRef;
30 │ │ if (!currentTextObject) return;
31 │ │ promise.finally(() =>
32 │ │ objectStorageClient.text.update({ ...currentTextObject, text, updatedAt: Date.now() })
33 │ │ );
34 │ │ },
35 │ │ WAIT_MS,
36 │ │ { trailing: true }
37 │ ╰─▶ ),
38 │ [objectStorageClient, currentTextObject]
╰────
help: Pass an inline function instead.
- custom nodes should be supported
- ensure that the following disabled cases pass/fail as expected: fix(linter): fix false positives in exhaustive-deps #7615
function useMyThing(myRef) {
useEffect(() => {
const handleMove = () => {};
myRef.current = {};
return () => {
console.log(myRef.current.toString());
};
}, [myRef]);
}In the below case, we need to mark props as a dependency because it has a this value. #7615
function MyComponent(props) {
const [skillsCount] = useState();
useEffect(() => {
if (skillsCount === 0 && !props.isEditMode) {
props.toggleEditMode();
}
}, [skillsCount, props.isEditMode, props.toggleEditMode]);
}I think we can just ignore the below case. It will throw an error (JS error) if you try to execute it (foo is used before its declaration)
function Example() {
const foo = useCallback(() => {
foo();
}, [foo]);
}Same as above case
function Example({ prop }) {
const foo = useCallback(() => {
prop.hello(foo);
}, [foo]);
const bar = useCallback(() => {
foo();
}, [foo]);
}- we should report the name (excluding the function name. fix(linter): fix false positives in exhaustive-deps #7615
currently
function MyComponent(props) {
useCallback(() => {
console.log(props.foo?.toString());
}, []);
}
produces an error saying props.foo.toString should be a dep.
this should be changed to say that props.foo should be a dep.
Metadata
Metadata
Assignees
Labels
No labels