Understanding useState in React: Why Re-render Happens

When learning React, one common question is:

“If state changes, does React re-render?”

The answer is yes.

To understand this, first we need to know what useState does.

What is useState?

useState is a React Hook used to store and manage data inside a component.

Example:

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

Here:

count -> stores the current value
setCount -> updates the value
0 -> initial value

Initially:

count = 0

React renders the UI and displays:

0

What Happens When State Changes?

Consider this counter example:

import { useState } from "react";

function Counter() {

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

 return (

  <>
   <h1>{count}</h1>

   <button
    onClick={() => setCount(count + 1)}
   >

    Increment

   </button>

  </>

 );

}

export default Counter;

When the button is clicked:

setCount(count + 1)

React updates the state.

Flow:

Button Click

↓

State Changes

↓

Component Re-renders

↓

Updated UI Appears

If count was:

0

After clicking:

1

React automatically updates the screen.

What Does Re-render Mean?

Many beginners think re-render means:

Entire website reloads
Page refresh happens

Actually:

Component function runs again
React updates only what changed

Re-render = Component runs again to update UI when data changes.

For example:

function Counter() {

 console.log("Rendering...");

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

 return <h1>{count}</h1>;

}

Every state update causes:

Rendering...

because the component executes again.

Why Not Use Normal Variables?

Example:

`let count = 0;

count++;`

The value changes.

But React does not know it changed.

So UI stays the same.

With useState:

setCount(count + 1);

React knows:

“State changed. Update the UI.”

That is why useState is important.

Simple Rule to Remember

If data changes and UI should update, use state.

Short formula:

State Change

↓

Re-render

↓

Updated UI

That is the basic idea behind how React keeps the interface updated automatically.