How does re-rendering work in React?

React

The short answer

A re-render happens when React calls your component function again to get the latest JSX. It is triggered by state changes, prop changes, or a parent re-rendering. React then compares the new output with the previous output (using the virtual DOM) and only updates the real DOM where things actually changed.

What triggers a re-render

There are three things that cause a component to re-render:

1. State change — When you call a state setter like setState or dispatch:

function Counter() {
  const [count, setCount] = useState(0);
  // Clicking this button causes a re-render
  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}

2. Prop change — When a parent passes new props to a child:

function Parent() {
  const [name, setName] = useState('John');
  return <Child name={name} />;
}
function Child({ name }) {
  // Re-renders when name prop changes
  return <p>{name}</p>;
}

3. Parent re-renders — When a parent component re-renders, all its children re-render too, even if their props have not changed:

function Parent() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>
        Count: {count}
      </button>
      <Child />{' '}
      {/* re-renders even though it has no props */}
    </div>
  );
}
function Child() {
  console.log('Child rendered');
  return <p>I am a child</p>;
}

This is the one that surprises most people. Child has no props at all, but it still re-renders every time Parent re-renders.

Re-render does not mean DOM update

This is very important to understand. A re-render means React calls your component function and generates new JSX. But it does not mean the actual DOM changes.

React compares the new JSX with the previous JSX. If nothing is different, React does not touch the DOM at all. The re-render was "for nothing" in terms of DOM updates, but the function still ran.

This is why re-renders are usually cheap — the expensive part is updating the real DOM, and React only does that when necessary.

How to prevent unnecessary re-renders

React.memo — Wraps a component so it only re-renders when its props actually change:

const Child = React.memo(function Child({ name }) {
  console.log('Child rendered');
  return <p>{name}</p>;
});

Now Child only re-renders when name changes, not when the parent re-renders for other reasons.

useMemo — Memoizes expensive calculations:

const sortedItems = useMemo(() => {
  return items.sort((a, b) => a.price - b.price);
}, [items]);

useCallback — Memoizes functions so they keep the same reference:

const handleClick = useCallback(() => {
  console.log('clicked');
}, []);

Common re-rendering mistakes

Creating objects or arrays inline in JSX:

// Bad — new object on every render, child always re-renders
<Child style={{ color: 'red' }} />;
// Better — stable reference
const style = useMemo(() => ({ color: 'red' }), []);
<Child style={style} />;

Creating functions inline when passing to memoized children:

// Bad — new function on every render
<MemoizedChild onClick={() => handleClick(id)} />;
// Better — stable reference
const onClick = useCallback(() => handleClick(id), [id]);
<MemoizedChild onClick={onClick} />;

Common Pitfalls

A common mistake is trying to prevent all re-renders. Most re-renders are fast and harmless. React is designed to re-render often — the virtual DOM diffing is very efficient. Only optimize when you measure a real performance problem. Premature optimization adds complexity and can actually make things slower because of the overhead of memoization.

Interview Tip

When explaining re-renders, make sure to cover three things: what triggers them (state, props, parent), the fact that re-render does not mean DOM update, and when to optimize. The third point is the most important — interviewers want to hear that you optimize based on measurement, not fear. Saying "I would profile first before adding React.memo" shows seniority.

Why interviewers ask this

Understanding re-rendering is fundamental to writing performant React applications. Interviewers want to see if you know what causes re-renders, if you understand the difference between a re-render and a DOM update, and if you know how to optimize when needed. This question reveals whether you understand React's core rendering model or just write code without thinking about what happens under the hood.

Table of Contents