Most developers think React key prop exists only for .map() lists. But React uses key for something much more powerful — component identity.

<UserForm key={userId} user={user} />

When userId changes, React doesn’t just update props. It completely unmounts the old component and creates a new one.

That means:
• local state resets
• effects rerun
• forms clear correctly
• stale data disappears
• animations restart cleanly

This is extremely useful for:
— forms
— modals
— tabs
— profile switchers
— realtime dashboards

Without it, developers often add complicated useEffect sync logic just to reset state manually. Sometimes the cleaner solution is simply:

<ProfileEditor key={profile.id} profile={profile} />

The important part: key is not a “force update”. It tells React:

This is a completely new component instance.

But this should be used carefully.
If the component contains heavy computations, expensive subscriptions, or large component trees, unnecessary remounts can hurt performance.

React is far more dependent on component identity than many developers realize.
And understanding that changes how you start designing UI state.