New
Introducing React Doctor for Enterprise

react-hooks-js/incompatible-library

Validates against usage of libraries which are incompatible with memoization (manual or automatic)

Validation prompt

Use this to decide whether a fired diagnostic is real or a false positive.

Fires on a hardcoded allowlist (maintained in facebook/react's DefaultModuleTypeProvider.ts) of APIs that use interior mutability and break memoization — currently react-hook-form's watch(), TanStack Table's useReactTable, and others. False positive: you've already opted that file or component out of compilation via the 'use no memo' directive, or the API has shipped a memo-safe replacement since the list was published.

Fix prompt

Use this once validation confirms the diagnostic is real.

Swap for the library's memo-safe alternative when one exists — useWatch + control instead of watch for react-hook-form, the newer immutable-state hooks for TanStack Table. For libraries without a fix (MobX observer, etc.), add 'use no memo' as the first statement of the affected component or file so the Compiler skips it cleanly. File an issue upstream so the allowlist can grow. See https://react.dev/reference/eslint-plugin-react-hooks/lints/incompatible-library

More React Compiler rules from the rules reference:

  • react-hooks-js/preserve-manual-memoization: Validates that existing manual memoized is preserved by the compiler. React Compiler will only compile components and hooks if its inference [matches or exceeds the existing manual memoization](https://react.dev/learn/react-compiler/introduction#what-should-i-do-about-usememo-usecallback-and-reactmemo)
  • react-hooks-js/purity: Validates that [components/hooks are pure](https://react.dev/reference/rules/components-and-hooks-must-be-pure) by checking that they do not call known-impure functions
  • react-hooks-js/refs: Validates correct usage of refs, not reading/writing during render. See the "pitfalls" section in [`useRef()` usage](https://react.dev/reference/react/useRef#usage)
  • react-hooks-js/set-state-in-effect: Validates against calling setState synchronously in an effect. This can indicate non-local derived data, a derived event pattern, or improper external data synchronization.
  • react-hooks-js/set-state-in-render: Validates against setting state during render, which can trigger additional renders and potential infinite render loops