No history yet

Stateful UI Paradigms

From Variables to State

In a Node.js environment, you're used to variables holding data. You might change a variable, then manually write logic to send an updated response to a client. The UI and the data are separate concerns, connected by explicit instructions.

React flips this model. It uses a declarative approach. Instead of telling the UI how to change step-by-step (imperative), you declare what the UI should look like for any given piece of data. When the data changes, React automatically figures out the most efficient way to update the display to match.

Think of it like this: an imperative approach is giving turn-by-turn directions to a friend. A declarative approach is just giving them the final address and letting their GPS figure out the route.

This shift from manual DOM manipulation to describing UI based on data is the foundation of React. The primary tool for managing this data is the useState hook.

Introducing State

To add data that React can track, you call the useState hook at the top level of your component. It's a function that gives you two things: a variable to hold the current value and a function to update that value.

import { useState } from 'react';

function Counter() {
  // 1. "count" is the state variable.
  // 2. "setCount" is the function to update it.
  // 3. 0 is the initial value.
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

The syntax const [count, setCount] is JavaScript array destructuring. useState(0) returns an array with two elements. The first is the current state value (initially 0), and the second is the function that lets you change it.

State Changes Trigger Renders

Here’s the critical difference from a standard variable. When you call the setter function, like setCount(1), you are doing two things:

  1. Telling React to update the state variable to the new value.
  2. Queuing a of your component.

During the re-render, React calls your component function again. This time, when useState is called, it returns the new value you just set. React then compares the new output with the old one and efficiently updates the actual DOM to match. A standard JavaScript variable declared with let or const inside your component wouldn't survive this process. It would be reset to its initial value every single time the component re-renders.

When the state changes, React updates the virtual DOM first.

This is also why React state is said to be “preserved” across renders. While local variables are wiped and recalculated, React keeps track of your state values outside the component's execution cycle. The value you pass to useState, like the 0 in our counter, is only used for the very first render. On all subsequent renders, React provides the latest value it has stored.

Understanding this render cycle is key. You don't change the UI directly. You change the state, and the UI updates as a result of that change.

Quiz Questions 1/4

React's approach to building user interfaces is described as 'declarative'. What does this mean in practice?

Quiz Questions 2/4

In the line const [count, setCount] = useState(0);, what is the purpose of setCount?

This core concept of state-driven UI is the building block for all interactivity in React. By managing data with useState, you create dynamic components that respond to user actions.