Rerenders

Rerenders refer to the repeated execution of rendering code to produce a new visual representation after data changes. The term is commonly used in front-end user interface frameworks and rendering engines to describe when the interface is redrawn to reflect updated state or inputs.

In modern UI libraries such as React, a rerender happens when component state or props change. The framework schedules an update, runs the component’s render logic to create a new element tree, diffs it against the previous tree, and applies the necessary changes to the DOM or rendering surface. Updates are often batched for performance, and the framework may skip costly work if the output would be unchanged or if a subtree is protected by memoization.

Causes of rerenders include state updates, prop changes, context changes, or a parent component rerendering. Direct calls to forceUpdate are another trigger in some frameworks. A rerender does not always imply visible changes; it may adjust internal structures or quietly produce the same output.

To minimize unnecessary rerenders, developers use techniques such as memoization (e.g., React.memo or PureComponent), hooks like useMemo and useCallback, and avoiding creation of new object references in render. Component splitting, virtualization for long lists, and stable prop references help keep rerenders manageable. Profiling tools such as React DevTools Profiler and browser performance tools aid in identifying expensive rerenders and guiding optimizations.

In browser rendering beyond UI frameworks, rerendering is related to repaint and reflow cycles: changes that affect layout or painting trigger updates to what is drawn on screen.