Component re-render decision

ReactJunior~2 min read

Short answer

React re-renders a component (re-render) when:

Its state (state) changes
Its properties (props) change
The context (context) changes, if it is used in the component
Its parent was re-rendered, and passed it new props (or even the same ones, but without optimization)

1. Change to `state`

If setState (or setCount, setUser, etc.) is called inside a component, React triggers a re-render of that component.

javascript

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

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

Each call to setCount() -> React creates a new Virtual DOM tree for this component and compares it with the previous one (diffing).

2. Change to `props`

If the parent component passes new props, React re-renders the child component to display the updated data.

javascript

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

function App() {
  const [name, setName] = useState("Alex");
  return <Greeting name={name} />;
}

When setName("Maria") -> React re-renders App, and then Greeting, because its props.name changed.

3. Change to context (`useContext`)

If a component subscribes to a context via useContext, it re-renders when the context value changes.

javascript

const ThemeContext = createContext("light");

function Button() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>Click</button>;
}

function App() {
  const [theme, setTheme] = useState("light");

  return (
    <ThemeContext.Provider value={theme}>
      <Button />
    </ThemeContext.Provider>
  );
}

setTheme("dark") -> every component using this context re-renders.

4. When the parent re-renders

Even if props did not change by value, React still re-renders the child component by default if the parent was re-rendered.

javascript

function Child() {
  console.log("Child render");
  return <p>Child</p>;
}

function Parent() {
  const [count, setCount] = useState(0);
  return (
    <>
      <button onClick={() => setCount(count + 1)}>+</button>
      <Child />
    </>
  );
}

Each click -> Parent updates -> Child also re-renders, even though it has neither state nor props.

To avoid this, Child can be wrapped in:

javascript

export default React.memo(Child);

Now React will re-render Child only if its props changed.

What does not cause a re-render

Changing variables outside state

javascript

let count = 0;
function Counter() {
  count++;
  // React doesn't know about count - it isn't from state
}

Changing an object "around" setState

javascript

state.user.name = "Maria"; // React will not track this

Directly changing the DOM (document.querySelector) React manages its own Virtual DOM - it does not track manual changes to the real DOM.

How React decides exactly what to update

After React decides that a component must be re-rendered:

It calls the component function again (to get the new JSX).
Creates a new Virtual DOM tree.
Compares it with the previous one (diffing).
Changes only what actually changed in the real DOM (reconciliation).

Optimization: when re-rendering is not needed

Use React.memo() for functional components: it will re-render only when props change.

Use useMemo() and useCallback(), so functions and computations are not recreated unnecessarily.

Pass stable values (id, name, etc.), not new objects/functions on every render.

Summary

Reason	Does the component re-render?
`state` changed	Yes
`props` changed	Yes
Context changed	Yes
Parent re-rendered	Yes (unless `React.memo`)
A variable outside `state` changed	No
Direct DOM change	No

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.