React State, Immutability, and Why Mutating Stuff Feels Like Hugging Someone Else’s Wife

Farhan Khan — Tue, 16 Dec 2025 15:53:09 +0000

I was learning React (FullStackOpen - very good resource) and something clicked so hard that I got mad nobody talks about how insanely cool this actually is (I too overlooked it for the longest while....).

We're told:

don't mutate state
always create a new object

Cool. But....
why does this feel so correct once you get it?

State is the one real thing

State is the single authoritative piece.

The UI isn't alive. It's just a reflection React rebuilds from state. There is one real state. Everything else is just a copy or a projection.

Conceptually, React treats the UI as disposable and re-runs the render tree.

Mutable state is a horror story

Imagine one shared object on the heap. Everyone has access.

Someone does this:

clicks.left = clicks.left + 1

Now what?
Who touched it?
When?
From where?

The heap turns into a crime scene.

It's like walking into a neighborhood where every house looks the same, entering the wrong one, and hugging someone else's wife.

You saw the same Christmas tree in the yard and said "Yep my house".
That's shared mutable state.

Immutability fixes this

Now compare that to this:

setClicks({ ...clicks, left: clicks.left + 1 })

You are not modifying the old object.

You are:

leaving the old one untouched
creating a brand new object
giving React a new reference

Anyone still holding the old reference sees the old reality. No surprises. No silent corruption.

React doesn't check what changed.

It checks whether it's the same thing or not.

Same reference → nothing happens

New reference → re-render everything.
Sounds simple indeed!

"But where is `newClicks`?"

This is where I got confused (I know ... "Omg its so simple yada yada.. HUSH!) anways-

When you write:

setClicks({ ...clicks, left: clicks.left + 1 })

You did create newClicks.

You just didn't name it.

Objects don't need variable names to exist.

They just need to be created and passed once.

The object is:

allocated in memory
passed to setClicks
compared by React
later garbage-collected when nobody references it

Same deal with arrow functions.

Yes, there can be hundreds of these "anonymous" objects and functions.

And the browser just calmly says:

cool, I'll clean it up later

Garbage collection is doing god-tier work in the background.

React didn't invent this. They just used it perfectly

The real credit goes to:

lambda calculus
first-class functions
garbage collection

React just had the audacity to say:

let's build a UI assuming everything is disposable

UI = pure function of state.

Re-run it, throw it away. REPEAT.
Turns out computers are fast :) and we are bad at tracking mutability just like how we are bad at coding.

Final thought

Immutability isn't about elegance. It's about knowing where the hell you are.

DEV Community: Farhan Khan

An overlooked React idea that finally made everything make sense.