React Mental Models That Actually Stick

Most React confusion isn't about syntax — it's about the wrong mental model. Here are the ones I keep coming back to.

UI is a function of state

Stop thinking about "changing the DOM." You describe what the UI should look like for a given state, and React figures out the rest.

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount((c) => c + 1)}>{count}</button>;
}

Re-renders are cheap; effects are not

A re-render is just calling your function again. The expensive, surprising part is usually an effect firing when you didn't expect it.

When something feels magic, it's usually a model you haven't made explicit yet.

More models — composition over configuration, colocation, and lifting state — in the full post.