Last year I audited a React codebase with over 300 useEffect calls. Most of them were copying one piece of state into another, and half of the bugs we fixed came from exactly that.
If a value can be calculated during render, it doesn’t belong in state. If something happens because a user clicked, it belongs in the event handler, not in an effect.
Now I reach for derived values, event handlers and libraries like TanStack Query first. My components got shorter, and a whole class of bugs simply disappeared.
Barış Sezer

