React State

In the last lesson on React Props Best Practices you saw how a parent sends data down to a child. But what about data a component owns and changes on its own, like a counter that goes up when you click? That is state.

🤔 Why do we need state?

Props are great, but they only get you halfway. Here is the gap.

• Props come from the parent. The child just reads them and cannot change them.
• But lots of data lives inside one component and changes over time. Think of a like count on a YouTube video, or items added to an Amazon cart.
• That kind of data isn’t passed down from anywhere. The component owns it and updates it itself.
• For that you need a different tool. You need state.

So the short version is this. Props are data from outside. State is data a component keeps and changes on its own.

😟 The real problem: a plain variable does not update the screen

Here’s the trap almost everyone hits first. You think you’ll just use a normal variable and change it, but it does not work. Here’s why:

• You make a normal variable like let count = 0.
• A button click runs count = count + 1. The variable really does change in memory.
• But the screen still shows 0. Nothing updates.
• The reason is simple. React only updates the screen when it re-renders a component. A plain variable changing does not tell React to re-render. So React never repaints, and you see the old value.

Look at this counter that tries to use a plain variable. It looks right, but the number on screen never moves.

function Counter() {
  let count = 0; // a plain variable

  function handleClick() {
    count = count + 1; // changes in memory...
    console.log(count); // logs 1, 2, 3 in the console
  }

  // ...but the screen always shows 0
  return <button onClick={handleClick}>Clicked {count} times</button>;
}

So the console proves the number is going up. The screen does not. React was never told to re-render.

🧠 What is state?

So here is the fix. State is the special kind of memory React watches for you.

• State is data a component owns and can change over time.
• It is “remembered” memory. When the component re-renders, the value stays. A plain variable would reset back to its starting value every render.
• The important part: when you change state, React re-renders the component. So the new value actually shows up on screen.

A simple way to picture it is a scoreboard at a game. The number on the board is state. When the score changes, the board updates so everyone sees the new number. That update is the re-render.

🔄 Changing state triggers a re-render

This is the whole reason state exists, so it’s worth saying clearly. The magic isn’t just storing a value. It’s what happens when the value changes.

• You change a piece of state.
• React notices the change and re-renders that component.
• The component runs again with the new value, and the screen updates to match.

This little flow shows the loop you’ll see again and again in React.

So the screen always follows the state. Change the state, and React keeps the screen in sync for you. You never touch the screen directly.

🆚 State vs props

People mix these two up all the time, so let’s put them side by side. Both hold data, but they are owned differently and that’s the key difference to remember.

The big one is ownership. Props come from the parent and are read-only. State belongs to the component and it can change.

A quick rule of thumb: if the data is passed in, it’s props. If the component changes it over time, it’s state.

🔢 A tiny taste of useState

You don’t need to learn the mechanics yet, that’s the next lesson. But here’s the same counter done with real state, just so you see what fixes it.

• We bring in a tool called useState. It gives back two things: the current value, and a function to change it.
• We change the value by calling that function, not by reassigning a variable.
• The moment we call it, React re-renders and the new number shows on screen.

Here is the working counter. Notice we call setCount to change the value, we never write count = count + 1.

import { useState } from "react";

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

  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

So now every click really updates the screen. The number goes 1, 2, 3, and you can see it. The only difference from before is that count is state, and we change it through setCount instead of a plain assignment.

🧩 What You’ve Learned

• ✅ State is data a component owns and can change over time
• ✅ Props come from the parent and are read-only, but state belongs to the component
• ✅ A plain variable changing does not update the screen, because React does not re-render
• ✅ Changing state tells React to re-render, so the new value shows up on screen
• ✅ State is “remembered” memory that survives across renders, unlike a plain variable
• ✅ You change state by calling its setter function, never by reassigning it directly

🚀 What’s Next?

You now know what state is and why a plain variable can’t do the job. Next you’ll learn exactly how to create and update state, step by step, using the tool React gives you for it.

React useState Hook