react-best-practices

Use useEffect only to synchronize with external systems such as browser APIs, third-party non-React libraries, or window event listeners. Derived state, expensive calculations, and event responses should use render-time calculation, useMemo, or event handlers instead.

Pass a key prop to the component instead of using an Effect to reset state. When the key changes, React unmounts and remounts the component, resetting all its state automatically without extra code.

React intentionally remounts components in development to verify that effect cleanup works correctly. Fix the cleanup function so remounting is safe rather than suppressing the double-fire with a ref guard.

useEffectEvent wraps non-reactive logic inside an Effect so values like theme or callback props do not become reactive dependencies. This prevents effects from re-running when unrelated values change, such as reconnecting a chat on theme change.

Use refs for values that do not affect rendering, such as timer IDs or DOM node references, and never read or write ref.current during render. Use state for any value that the UI displays or depends on.