Why does React advise against directly mutating state?

React recommends not mutating state directly because it can lead to unexpected bugs and incorrect UI updates.

React relies on immutability to detect changes and decide when a component should re-render.

What goes wrong when state is mutated

When state is mutated directly:

• React may not detect the change
• Components may not re-render
• UI can become out of sync with data

Example (Incorrect):

This changes the existing state object instead of creating a new one.

Correct Approach:

Why immutability matters

• React uses reference comparison to detect changes
• New objects signal React that state has changed
• Enables predictable rendering and performance optimizations