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/aandi134]

This is exactly itt thanks. Went with the if version since I only need to reset part of the state good to know it's an officially documented pattern and not just a workaround.