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