DEV Community

Cover image for React State Explained: Why Your UI Does Not Update and How to Fix It
Ebenezer
Ebenezer

Posted on

React State Explained: Why Your UI Does Not Update and How to Fix It

#javascript #webdev #beginners #react

Three days ago Mock Interview conducted in our Institute.Interviewer asked a question What is State? I completely stunned I said I am not aware of that I will learn. Then I asked my Batchmates same question They said about State But not clearly. I searched in React Official website , W3 schools ,Geeks for Geeks , Some Tech blogs about this. Finally I came to understand what the state in React is?
I want to share this in my Blog...

Here's what we'll cover today:

  • What State actually is (and why your component needs it)
  • Why regular variables silently fail in React
  • How Props and State are different — and when to use which

Part 1: What Is State? (Your Component's Memory)

Imagine you're building a magical world out of Lego bricks — but these bricks can move, remember things, and react to the user. In React, we call these magical bricks components.

Now imagine one of those bricks is a small toy robot.

You ask the robot: "What is your favorite color?"
It says: "Blue."

That answer — "Blue" — is stored in its state. State is simply a component's memory. It's data that belongs to a component and can change over time.

When the robot changes its mind to "Red," its state updates. And here's the important part: whenever state changes, React automatically redraws that component on screen. This automatic redrawing is called a re-render — think of it like the robot blinking its eyes and refreshing itself to show the new color.

Why do we even need state? Without it, your components would be statues. They couldn't remember:

  • What a user typed into a form
  • Whether a "Like" button was pressed
  • Which slide is currently showing in an image gallery

In React, we create this memory using a built-in tool called a Hook — specifically useState. When you call useState, you're telling React: "Hey, I want this component to remember something!"

React then gives that component a dedicated memory slot — one that survives re-renders and triggers a screen update whenever it changes.

Part 2: The Mystery of the Disappearing Data (State vs. Local Variables)

So why can't you just use a regular JavaScript variable like let count = 0?

This is the question that trips up almost every React beginner. Let's break it down with a simple analogy.

Think of two ways to keep score in a game:

  1. A paper napkin (local variable)
  2. A magic digital scoreboard (state)

Problem 1: The Napkin That Vanishes

Every time React re-renders your component, it runs your function from the very beginning — like pressing restart.

When it does that, your local variable resets. It's as if someone grabs your score napkin and throws it in the trash every few seconds. The next time React runs your function, let count = 0 starts at zero again. Your changes are gone.

State doesn't have this problem. React stores your state value in its own internal vault — completely separate from your function. Even when the component function re-runs, the state value is safely preserved.

Problem 2: The Silent Change

Now imagine you managed to keep your napkin. You change the score from 5 to 6.

But the fans in the stadium are watching the big screen — and the screen hasn't changed. Why? Because you didn't tell the screen to update.

That's exactly what happens with local variables in React. Changing let count = 5 to let count = 6 is a silent operation. React has no idea something changed, so it never bothers to refresh the UI.

The Fix: useState Gives You Both

When you use useState, React gives you two things:

const [count, setCount] = useState(0);
Enter fullscreen mode Exit fullscreen mode
  1. count — the value stored safely in React's vault (persists across re-renders)
  2. setCount — a function that updates the vault AND rings a bell telling React to redraw the screen

I wrote a brief beginner friendly blog about hooks
You can check here:https://dev.to/buddingdeveloper/react-had-a-mess-problem-heres-how-hooks-fixed-it-3b72

import { useState } from "react";

// A counter that actually works
const Counter = () => {
  const [count, setCount] = useState(0);

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

export default Counter;
Enter fullscreen mode Exit fullscreen mode

What's happening here: every time you click the button, setCount updates the vault with the new value AND tells React to re-render — so the screen shows the updated count instantly.

That's the whole magic. State remembers and notifies — local variables do neither.

Part 3: Props vs. State — The Gift vs. Your Thoughts

Now that you understand state, let's clear up one more thing that confuses beginners: what's the difference between props and state?

Both hold data. Both affect what shows on screen. But they have completely different rules.

The Birthday Present Analogy

Imagine you are a child (the child component) and your parent (the parent component) hands you a birthday gift.

Props are like the present.
Your parent chose it and gave it to you. You can open it, look at it, use it — but you can't reach back and change what they bought. Props are read-only for the component that receives them.

State is like your own thoughts.
Your thoughts belong only to you. You can change your mind whenever you want. Your parent can't reach inside your head and rewire your thinking. State is fully private to the component that owns it.

Here's the difference in code:

// Parent passes props — child just receives and displays
const UserCard = ({ name, role }) => {
  return (
    <div>
      <h2>{name}</h2>
      <p>{role}</p>
    </div>
  );
};

const App = () => {
  return <UserCard name="Ebenezer" role="React Developer" />;
};
Enter fullscreen mode Exit fullscreen mode

What's happening here: name and role come from the parent. UserCard cannot change them — it can only read and display them.

Compare that to state, where the component is in full control:

const LikeButton = () => {
  const [liked, setLiked] = useState(false);

  return (
    <button onClick={() => setLiked(!liked)}>
      {liked ? "Liked" : "Like"}
    </button>
  );
};
Enter fullscreen mode Exit fullscreen mode

What's happening here: liked is private to LikeButton. No parent controls it. The component flips its own state when clicked.

Quick Reference Table

Feature State Props
Ownership Belongs to the component Passed from a parent
Can it change? Yes — component controls it No — read-only for the child
Purpose Things that change (counters, toggles) Configuring a child component
Who controls it? The component itself The parent component

Part 4: Every Component Gets Its Own Memory

Here's one last thing that surprises beginners.

If you use the same component twice on the same page, each one gets its own independent state — they don't share.

const App = () => {
  return (
    <div>
      <Counter /> {/* This counter has its own count */}
      <Counter /> {/* This one has its own count too */}
    </div>
  );
};
Enter fullscreen mode Exit fullscreen mode

Click the first counter — the second one doesn't budge. They're completely isolated, even though they use the exact same code.

This is called encapsulation — each component minds its own business. It makes your app predictable and much easier to debug, because you always know which component owns which piece of data.

Sources I referred for this blog:
https://react.dev/learn/state-a-components-memory
https://www.w3schools.com/react/react_state.asp
https://www.geeksforgeeks.org/reactjs/reactjs-state/
https://medium.com/@vaheedsk36/understanding-the-concept-of-state-in-react-4f3461a1c7c4

Top comments (0)