Re-render Triggers

In React, a component can render again when its state changes, its parent renders, a consumed context value changes, or a subscribed external store updates. A re-render means React calls the component again to calculate the next UI; it does not necessarily mean the DOM changes.

A state update is a direct trigger for a component to render again. For example, calling a `setState` function schedules an update, after which React evaluates the component with the new state.

A parent rendering can cause its child components to be evaluated again. This happens even when the child's props are unchanged, unless an optimization such as `memo` allows React to skip that child when its inputs are considered unchanged.

Context can also trigger consumers to render again. When a provider's context value changes according to React's context comparison, components that read that context can receive the new value and render again.

Components can also update because of external subscriptions, such as an external store accessed through React's subscription APIs. The important distinction is between a render and a DOM mutation: React may render a component and then determine that no DOM changes are necessary.

Key points

• State updates can schedule a re-render of the component using that state.
• A parent render can cause its children to render again.
• A changed consumed context value can trigger context consumers.
• External subscriptions can schedule updates independently of local component state.
• A re-render does not imply that the browser DOM will change.

Interview questions

What can cause a React component to render again?

A component can render again after one of its state values is updated. It can also be evaluated again when its parent renders, even if its props did not change. A changed context value used by the component can trigger an update as well. Components connected to external subscriptions can also update when their subscribed data changes.

If a parent re-renders but a child's props are identical, will the child render again?

Normally, the child can be evaluated again when its parent renders. Identical props do not by themselves prevent that work. Wrapping the child with `React.memo` can allow React to skip the child when its relevant props are unchanged. Memoization is an optimization, not a guarantee that a component will never render again.

Does every React re-render cause the DOM to change?

No. Rendering produces a new description of the UI, and React then reconciles that result with the previous one. If the relevant output is equivalent, React may have little or no DOM work to commit. Therefore, component render frequency and actual DOM mutations are different measurements.

How does context affect re-rendering?

A component that consumes a context can receive an update when the provider's context value changes. This lets data be shared without explicitly passing props through intermediate components. The important performance consideration is the identity and structure of the value supplied by the provider, because changing the context value can cause its consumers to update. Context should therefore be scoped appropriately when only a small part of the tree needs frequently changing data.

What is the difference between a component re-rendering and React updating the DOM?

A render is the calculation of the next React element tree for an update. React then reconciles that result with the previous tree and determines what work, if any, needs to be committed to the host environment. Consequently, repeated rendering does not necessarily imply repeated DOM mutations. When diagnosing performance, it is useful to distinguish component render cost from reconciliation and commit cost.