State re-render behavior in React

Introduction

State lets React remember information and update the screen when that information changes. When state changes, React redraws the part of the screen that uses that state.

When you want to show or hide something based on user clicks.

When you need to update a list after adding or removing items.

When you want to change text or colors after a button press.

When you want to keep track of form inputs as the user types.

Syntax

React

const [state, setState] = useState(initialValue);

// To update state:
setState(newValue);

Calling setState tells React to update the component.

React re-renders only the component that owns the state and its children.

Examples

Increase a number state by 1.

React

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

Change a boolean state to show something.

React

const [visible, setVisible] = useState(false);
setVisible(true);

Update text shown on screen.

React

const [text, setText] = useState('Hello');
setText('Hi there!');

Sample Program

This component shows a number that starts at 0. Each time you click the button, the number increases by 1. React re-renders the component to show the new number.

React

import React, { useState } from 'react';

export default function ClickCounter() {
  const [count, setCount] = useState(0);

  return (
    <main>
      <h1>Clicked {count} times</h1>
      <button onClick={() => setCount(count + 1)} aria-label="Increase count">
        Click me
      </button>
    </main>
  );
}

Important Notes

React batches multiple state updates inside event handlers for better performance.

Updating state with the same value does not cause a re-render.

Use functional updates (setState(prev => newVal)) when new state depends on old state.

Summary

State changes tell React to redraw the component.

Only the component with changed state and its children update.

Use setState to update state and trigger re-render.