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.
Top comments (0)