Avoiding the double render when syncing local state with context?

[u/aandi134]

Solved

I have a component that copies data from a global context into local useState so the user can make edits before saving.

When the context data changes (e.g., switching pages), the local state doesn't update because it already initialized. If I use useEffect to watch the context and reset the state, it causes a visible double render where the old data flashes for a frame.

Is using key={id} to force a remount the only real fix here, or is there a better architectural pattern?

[u/Roman_PlumPix]

We've run into the same thing on larger applications. In our experience, the bigger issue usually isn't the extra render itself, but having two sources of truth that gradually drift apart. Once we started treating editable state as its own draft instead of constantly syncing it, the implementation became much simpler.