A counter displays its value and a doubled version of it. Clicking Increment should update both numbers together. The doubled value never changes after the page loads.
Click Increment — Count goes up correctly but Doubled stays at 0 forever. The derived value is frozen at the initial value no matter how many times you click.
Ask yourself whether doubled really needs to be state at all.
Ask yourself whether doubled really needs to be state at all.
Why this fixes it
doubled was stored as a separate useState and synced via a useEffect with an empty dependency array — the effect ran once on mount, captured count at 0, and never ran again, leaving doubled frozen at 0 forever. Removing both the doubled state and the effect entirely, and instead computing const doubled = count * 2 inline during render, eliminates the lag because the derived value is recalculated on every render from the current value of count. There is no synchronization delay because there is nothing to synchronize — the value is derived directly, not stored.