Redux and React-Redux detect changes by comparing references, so state must be updated immutably. You create new objects for whatever changed, instead of modifying the existing ones. If a reducer mutates state in place, the reference stays the same, and the change goes unnoticed.
UI updates.useSelector compares the old and new selected values with ===. A mutated object looks unchanged, so the component doesn't re-render.
Fast change checks. Comparing references is cheap, so selectors can run after every action.
Reliable history. Old state objects stay untouched, so Redux DevTools can show earlier states and time-travel debugging works.
Immutable updates copy only the changed path, not the whole tree. Redux Toolkit uses Immer, so you can write "mutating" code inside createSlice and still get an immutable update.
Rewriting in plainer words…
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
