How to re-render a component on value change in React?

Question

How to re-render a component on value change in React?

Answer

React automatically re-renders a component when its state or props change.

import { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Every time you click the button, setCount() updates state → React re-renders with the new value.

If you’re passing data as props and the parent updates it, the child will re-render automatically too.

Real-World Example

• Live counters
• Search inputs
• Data fetching triggers

Quick Practice

Build a “Like Button” that updates its count on every click.

Summary

React re-renders when state or props change — not when plain variables mutate.