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.

• 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/set-state-in-effect

Validation prompt

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

Fires on a synchronous setState call inside useEffect's body — the textbook 'mirror prop into state on change' pattern that forces a wasted second render before paint. False positive: useLayoutEffect that reads ref.getBoundingClientRect() (or another post-layout DOM measurement) and stores the result in state — the value cannot exist until after layout commits, and useLayoutEffect runs the extra render before paint.

Fix prompt

Use this once validation confirms the diagnostic is real.

Derive the value during render and drop the state + effect entirely: const filtered = items.filter(...). For prop-driven full resets, pass key={prop} to the child to remount. For DOM-measured values, keep the setState but use useLayoutEffect so the extra render happens before the browser paints (avoiding a visible flash). See https://react.dev/reference/eslint-plugin-react-hooks/lints/set-state-in-effect