React Derived State: Storing Computed Values in useState Causes Silent Bugs

A common React coding pattern — storing a filtered or computed list as a separate state variable and syncing it via useEffect — introduces subtle bugs where the UI briefly shows stale data. This happens because Effects run after the DOM commits, causing an extra render cycle before the correct value appears on screen. The root issue is treating a value that can be calculated from existing state or props as if it were independent state that needs to be stored. React developers are advised to compute such derived values directly during render, reserving useMemo only for genuinely expensive calculations. The article, written against React 19.3 and the stable React Compiler 1.0, outlines how to identify and eliminate this pattern across common and edge-case scenarios.