Why React Context state updates are not causing re-render when updating nested objects?

[JK083]

Body

Hi everyone,

I’m using React Context API for global state management.
When I try to update a nested object inside the context, sometimes the component doesn’t re-render and still shows the old value.

contextState.user.name = "New Name";
setContextState(contextState);

After this, my component doesn't reflect the updated name.
I think it might be related to immutability or how React detects state changes.

Can someone explain why this happens?

What's the best practice to update nested state in Context?

Is there any library or cleaner way to handle such updates?

Guidelines

• I have read and understood this category's guidelines before making this post.

[Jatin083]

Yes, this issue happens due to how React detects state updates.
React re-renders a component only when it sees that the state reference has changed.
In your example, you are mutating the object directly:

contextState.user.name = "New Name";
setContextState(contextState);

Since contextState reference remains the same, React doesn't realize that anything has changed.

✅ Instead, you should always create a new object using immutable updates:

setContextState(prevState => ({
  ...prevState,
  user: {
    ...prevState.user,
    name: "New Name"
  }
}));

This way, you're creating a brand new object and React properly triggers a re-render.