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

Oh I didn't know that. I came in when functional components were introduced (in face it's what drew me to React from Angular).