feat(linter): react/exhaustive-deps

[camc314]

Firstly, a massive thanks to @alisnic for starting this (incredibly complicated) lint rule in #2637 !

closes #2637
relates to #2174

[graphite-app]

Your org has enabled the Graphite merge queue for merging into main

Add the label “0-merge” to the PR and Graphite will automatically add it to the merge queue when it’s ready to merge. Or use the label “hotfix” to add to the merge queue as a hot fix.

You must have a Graphite account and log in to Graphite in order to use the merge queue. Sign up using this link.

[camc314]

Rough first draft but most of the way their. would appreciate some early reviews as this was a massive amount of work and i don't want to go too far 🙂

[Boshen]

Rough first draft but most of the way their. would appreciate some early reviews as this was a massive amount of work and i don't want to go too far 🙂

This is amazing! I would run it through oxlint ecosystem ci and see what happens.

[camchenry]

This looks pretty good overall, I didn't thoroughly review all of the code (there is a lot!) but I took a look at the diagnostics and have a few help text suggestions. I think keeping this in nursery and continuing to iterate on it would be good

[Boshen]

Note: once merged, manually add this rule to oxlint-ecosystem-ci's CI script. We then change this to correctness after running it for 2 - 4 weeks.

[camchenry]

it's hard to review all of this code, but I have skimmed over most of it and not too much stuck out to me. I think this is ready to start being tested in nursery

[camc314]

@Boshen did it look ok in the ecosystem ci? https://github.com/oxc-project/oxlint-ecosystem-ci/actions/runs/11755920122/job/32751524336

thanks for testing for me 🙂

[codspeed-hq]

CodSpeed Performance Report

Merging #7151 will not alter performance

_{Comparing c/exhaustive-deps2 (3dcac1a) with main (c5f4ee7)}

Summary

✅ 30 untouched benchmarks

[Boshen]

Merge activity

• Nov 11, 3:36 AM EST: The merge label '0-merge' was detected. This PR will be added to the Graphite merge queue once it meets the requirements.
• Nov 11, 3:36 AM EST: A user added this pull request to the Graphite merge queue.
• Nov 11, 3:43 AM EST: The Graphite merge queue couldn't merge this PR because it was in draft mode.
• Nov 12, 6:37 AM EST: The merge label '0-merge' was detected. This PR will be added to the Graphite merge queue once it meets the requirements.
• Nov 12, 6:42 AM EST: A user added this pull request to the Graphite merge queue.
• Nov 12, 6:47 AM EST: A user merged this pull request with the Graphite merge queue.

[Boshen]

Hit the merge button too quickly 😅

In oxlint-ecosystem-ci/repos:

~/oxc/target/release/oxlint -A all -W exhaustive-deps
Finished in 5.5s on 117561 files with 1 rules using 8 threads.
Found 536 warnings and 23 errors.

Some false positives:

affine  canary ❯ ~/oxc/oxc/target/release/oxlint -A all -W exhaustive-deps

  ⚠ react_hooks(exhaustive-deps): React Hook useMemo has a missing dependency: 'T'
     ╭─[packages/frontend/core/src/components/page-list/virtualized-list.tsx:142:6]
 141 │     return items;
 142 │   }, [groupCollapsedState, groups]);
     ·      ─────────────────────────────
 143 │ };
     ╰────
  help: Either include it or remove the dependency array.

It's picking up type annotation

    const items: VirtuosoItem<T>[] = [];

[Boshen]

Do you also need to include function calls?

  ⚠ react_hooks(exhaustive-deps): React Hook useEffect has a missing dependency: 'makeMappingRequest'
    ╭─[kibana/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/index_error.tsx:83:6]
 82 │     makeMappingRequest({ indexName });
 83 │   }, [indexName]);
    ·      ───────────
 84 │
    ╰────
  help: Either include it or remove the dependency array.

[Boshen]

  ⚠ react_hooks(exhaustive-deps): React Hook useCallback has unnecessary dependency: dataVisualizerListState.sortField
     ╭─[kibana/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/hooks/use_field_stats.ts:307:5]
 306 │     dataVisualizerListState.sortDirection,
 307 │     dataVisualizerListState.sortField,
     ·     ───────────────────────
 308 │     samplingProbability,
     ╰────
  help: Either include it or remove the dependency array.

The span is not pointing at the member expression.

[Boshen]

This looks pretty weird

  ⚠ react_hooks(exhaustive-deps): React Hook useEffect has missing dependencies: 'searchParams.get', 't', and 'form.setValue'
    ╭─[cal/packages/features/eventtypes/components/DuplicateDialog.tsx:67:6]
 66 │     }
 67 │   }, [searchParams?.get("dialog")]);
    ·      ─────────────────────────────
 68 │
    ╰────
  help: Either include it or remove the dependency array.

[Boshen]

kibana has the most violations, you may want to test it during developement.

[camc314]

This looks pretty weird

  ⚠ react_hooks(exhaustive-deps): React Hook useEffect has missing dependencies: 'searchParams.get', 't', and 'form.setValue'
    ╭─[cal/packages/features/eventtypes/components/DuplicateDialog.tsx:67:6]
 66 │     }
 67 │   }, [searchParams?.get("dialog")]);
    ·      ─────────────────────────────
 68 │
    ╰────
  help: Either include it or remove the dependency array.
``

🙂 looks like we're following the same behaviour as eslint

[camc314]

Do you also need to include function calls?

  ⚠ react_hooks(exhaustive-deps): React Hook useEffect has a missing dependency: 'makeMappingRequest'
    ╭─[kibana/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/index_error.tsx:83:6]
 82 │     makeMappingRequest({ indexName });
 83 │   }, [indexName]);
    ·      ───────────
 84 │
    ╰────
  help: Either include it or remove the dependency array.

looks like they've got it disabled? for this file https://github.com/elastic/kibana//blob/2466a172af66452bdd939dddc56506faba7ffb7a/.eslintrc.js#L1623

when i run eslint on this file, it reports (same as us)

[camc314]

@Boshen after a4f7675 i don't there are more false positives in affine at least

[Boshen]

  ⚠ 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.

Interesting case, how should this be handled?

[Boshen]

Feel free to merge after a final self review.

[camc314]

  ⚠ 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.

Interesting case, how should this be handled?

lol we do the same thing as react, only we're currently reporting on a different line so it wasn't being ignored

[camc314]

@Boshen i guess we should be reporting the same (or at least very similar spans to react? if ok with you, i'll make an issue to track bits that aren't exactly complete for this rule

[Boshen]

@Boshen i guess we should be reporting the same (or at least very similar spans to react? if ok with you, i'll make an issue to track bits that aren't exactly complete for this rule

Indeed, current span breaks already written eslint ignores.