EditProfile keeps a draft of the form in local state. When userId changes, the draft must reset. What is the simplest correct approach?

Render <EditProfile key={userId} userId={userId} />. Changing the key makes React treat it as a different component. So it remounts with fresh state.

The useEffect option is the tempting one. It works, but it first renders once with stale data, and it is easy to get wrong when you add more state. The ref option is wrong because refs do not reset when props change. Calling setters unconditionally during render causes an endless loop of re-renders.