* wip * feedback and rm canary stuff * tweak * fix json * more canary stuff * fix link * update dates * update meta description * Expand performance track section * adjust linter note * edit perf tracks down * edit perf tracks down more * tweak note * tweak useEffectEvent * formatting * tweaks * ppr * rm canary stuff * fix json * fix json * tweaks * linter note * nit * nit * link * nit * ppr * missing await * add lint v6 * fix link --------- Co-authored-by: Dan Abramov <dan.abramov@gmail.com>
3.8 KiB
title, version
| title | version |
|---|---|
| eslint-plugin-react-hooks | rc |
eslint-plugin-react-hooks provides ESLint rules to enforce the Rules of React.
This plugin helps you catch violations of React's rules at build time, ensuring your components and hooks follow React's rules for correctness and performance. The lints cover both fundamental React patterns (exhaustive-deps and rules-of-hooks) and issues flagged by React Compiler. React Compiler diagnostics are automatically surfaced by this ESLint plugin, and can be used even if your app hasn't adopted the compiler yet.
When the compiler reports a diagnostic, it means that the compiler was able to statically detect a pattern that is not supported or breaks the Rules of React. When it detects this, it **automatically** skips over those components and hooks, while keeping the rest of your app compiled. This ensures optimal coverage of safe optimizations that won't break your app.What this means for linting, is that you don’t need to fix all violations immediately. Address them at your own pace to gradually increase the number of optimized components.
Recommended Rules {/recommended/}
These rules are included in the recommended preset eslint-plugin-react-hooks:
exhaustive-deps- Validates that dependency arrays for React hooks contain all necessary dependenciesrules-of-hooks- Validates that components and hooks follow the Rules of Hooks
Additional Rules {/additional-rules/}
Starting in version 6.0, these rules are available to opt-in:
component-hook-factories- Validates higher order functions defining nested components or hooksconfig- Validates the compiler configuration optionserror-boundaries- Validates usage of Error Boundaries instead of try/catch for child errorsgating- Validates configuration of gating modeglobals- Validates against assignment/mutation of globals during renderimmutability- Validates against mutating props, state, and other immutable valuesincompatible-library- Validates against usage of libraries which are incompatible with memoizationpreserve-manual-memoization- Validates that existing manual memoization is preserved by the compilerpurity- Validates that components/hooks are pure by checking known-impure functionsrefs- Validates correct usage of refs, not reading/writing during renderset-state-in-effect- Validates against calling setState synchronously in an effectset-state-in-render- Validates against setting state during renderstatic-components- Validates that components are static, not recreated every renderunsupported-syntax- Validates against syntax that React Compiler does not supportuse-memo- Validates usage of theuseMemohook without a return value