Why React Uses State Instead of Plain JavaScript Variables

#webdev #javascript #react #frontend

When you’re starting out with React, one of the first concepts you encounter is state. At first glance, you might wonder: Why can’t I just use a regular JavaScript variable to store my data? After all, JavaScript variables can hold values, and you can update them anytime. So why does React introduce this extra concept called state?

Let’s break it down in a simple, developer-friendly way.

1. JavaScript Variables Don’t Trigger UI Updates

In vanilla JavaScript, if you store a value in a variable and change it, the browser won’t magically update the UI. For example:

let count = 0;
count = count + 1;
console.log(count); // 1

The value changes in memory, but nothing in the UI changes unless you manually select DOM elements and update them yourself (e.g., using document.getElementById().innerText = count).

React, however, is designed around the concept of declarative UI. You describe what the UI should look like based on data, and React takes care of updating the DOM when that data changes. That’s where state comes in.

2. State Triggers React’s Re-render Cycle

When you update a state variable in React using setState, React knows that something has changed. It then re-renders the component and updates the UI.

Example with useState:

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

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

Here’s the magic:

count is tied to the UI ({count} inside the <p> tag).
When you call setCount, React re-runs the Counter function, calculates the new UI, and updates the DOM automatically.

If you tried this with a plain JavaScript variable, the UI would never re-render unless you forced it.

3. React’s Virtual DOM Needs State Awareness

React uses a concept called the Virtual DOM to optimize rendering. Instead of updating the real DOM directly on every change (which is slow), React:

Keeps a lightweight copy of the DOM in memory (the Virtual DOM).
Recomputes what the UI should look like when state changes.
Efficiently updates only the parts of the real DOM that changed.

Without state, React wouldn’t know when it needs to re-run this process.

4. State Is Persistent Across Re-renders

One subtle but important difference is that React preserves state across renders. When a component re-renders, local JavaScript variables reset. For example:

function Counter() {
  let count = 0;

  function increment() {
    count++;
    console.log(count);
  }

  return (
    <div>
      <p>Count is: {count}</p>
      <button onClick={increment}>Click Me</button>
    </div>
  );
}

Every time the component re-renders, count resets back to 0. That means the UI never reflects the real value. With useState, React keeps the value safe between renders.

So Why Not Just Variables?

To summarize:

Variables change values, but React won’t notice.
State changes tell React: “Hey, something changed—re-render the UI.”
State values persist across renders, unlike plain variables.
React’s Virtual DOM system depends on state to know when to update.

Without state, React would just be a fancy templating engine. State is what gives React its power and efficiency.

Using state instead of plain variables might feel unnecessary at first, but once you understand how React’s re-render cycle works, it makes total sense. State is the bridge between your data and your UI. It ensures your app stays predictable, maintainable, and reactive.

So next time you’re tempted to use a plain variable, ask yourself: Will this value affect the UI? If the answer is yes, put it in React state.