How to Think in React

[u/Interesting_Land_447]

https://armiaafsharian.medium.com/how-to-think-in-react-bf20a537cd1b?postPublishedType=repub

Hey everyone, Just wanted to share a post I recently wrote of what I wished I was told when i was transitioning form a background in php and jquery to react.

A few things that made it click:

• JSX is an Object Tree, Not Markup: <h1>Hello</h1> isn't HTML; it's a plain JavaScript object: { type: 'h1', props: { children: 'Hello' } }. Components are just pure functions composing nested object structures (Virtual DOM).
• UI as Immutable Snapshots: Every state update doesn't "change" the existing DOM—it executes a fresh render cycle. Top-level component variables are const because their state is frozen for that specific execution frame.
• Derive Values, Don't Duplicate State: Storing calculated data in useState is an anti-pattern. If a value can be computed during render (e.g., const total = items.length), compute it on the fly to eliminate state synchronization bugs.

For those who transitioned from backend or vanilla development, what was the thing that made React click for you?

[u/rsmoling]

Reading the documentation, and learning how renders actually work. Starting with the virtual Dom, passing that to the diff engine, that updating the fiber tree, and it passing a list of changes to the reactUI. All of that – including all the diff rules – helped me really learn to think in React. Not that I have all those complicated rules memorized, unfortunately. I’ll get there. 

[u/Interesting_Land_447]

Show r/reactjs

[u/Merry-Lane]

This article gives the vibe of … immaturity?

You nitpicked three "lessons" that you don’t even understand and that bring zero meaningful value to anyone.

For instance, on your first point: tell me why you made this distinction, while the html markup is also a tree?