react-hooks-js/static-components

Validates that components are static, not recreated every render. Components that are recreated dynamically can reset state and trigger excessive re-rendering

• Category: React Compiler
• Severity: error
• Source: eslint-plugin-react-hooks
• Framework: global
• Enabled when: eslint-plugin-react-hooks v6+ installed AND React Compiler detected in project
• Documentation: https://react.dev/reference/eslint-plugin-react-hooks/lints/static-components

Validation prompt

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

Fires when a function whose name starts with an uppercase letter (so the compiler treats it as a component) is declared inside another component or hook body — most commonly const ChildComponent = () => ... inside a parent function, or a conditional component reference like type === 'a' ? () => <A /> : () => <B />. Local lowercase helpers are not flagged.

Fix prompt

Use this once validation confirms the diagnostic is real.

Hoist the inner component to module scope. If it needs values from the parent, accept them as props (function ThemedButton({ theme }) instead of capturing theme from closure). Recreating the function every render gives it a new identity, so React unmounts and remounts the entire subtree on each parent render, destroying all child state and DOM. See https://react.dev/reference/eslint-plugin-react-hooks/lints/static-components

Related rules

More React Compiler rules from the rules reference:

• react-hooks-js/todo: Unimplemented features
• react-hooks-js/unsupported-syntax: Validates against syntax that we do not plan to support in React Compiler
• react-hooks-js/use-memo: Validates usage of the useMemo() hook against common mistakes. See [`useMemo()` docs](https://react.dev/reference/react/useMemo) for more information.
• react-hooks-js/void-use-memo: Validates that useMemos always return a value and that the result of the useMemo is used by the component/hook. See [`useMemo()` docs](https://react.dev/reference/react/useMemo) for more information.
• react-hooks-js/component-hook-factories: Deprecated: this rule has been removed in 7.1.0.