Mastering React Rendering: When and How Components Re‑Render

Introduction

When using React, component updates, state changes, and parent‑child interactions all go through React's rendering pipeline. The article explores the exact steps of rendering, factors that trigger re‑rendering, and the principles behind optimization hooks such as React.memo, useMemo, and useCallback.

Render Process

Initial Render

Define a function component (e.g., Home) that returns JSX wrapped in a fragment. React creates a root container, calls root.render(<App />), and converts the JSX into a virtual DOM object. The virtual DOM is then reconciled with the real DOM, producing the final HTML output.

Because a function can return only one value, multiple top‑level elements must be wrapped in a single container (fragment or <div>), otherwise the compiler throws “Adjacent JSX elements must be wrapped in an enclosing tag”.

Update Render

React can be expressed as view = f(state). When state changes, React re‑executes the component function, producing a new virtual DOM. All child components are also re‑executed, even if they do not receive changed props, because React cannot know whether the child uses the changed state.

Example code demonstrates that clicking a button in Home updates num, causing both Home and its child Content to re‑render. Adding a child component Test that does not use props still re‑renders because React treats every child as potentially dependent on the parent’s state.

Avoiding Unnecessary Renders

React.memo

Wrap a component with React.memo to memoize its rendered output. If the component’s props do not change between renders, React skips re‑executing the component function.

Note that memoization adds a shallow props comparison cost; therefore it is not enabled by default.

useMemo

useMemo

caches the result of a computation (or a value such as an array) between renders. By providing an empty dependency array, the value is created only once, preventing the creation of new object references that would break memoization.

Example shows that moving the array definition into useMemo stops Home from re‑rendering when the parent App updates unrelated state.

useCallback

useCallback

memoizes a function reference. Passing a stable callback to a memoized child component prevents the child from re‑rendering due to a new function reference on each parent render.

Code example demonstrates wrapping handleClick with useCallback so that MemoizedHome does not re‑render when the parent’s counter changes.

When to Use These Hooks

useMemo

is best for expensive calculations; useCallback is useful when passing callbacks to memoized children. They should be applied selectively when performance problems are observed, not for every object or function.

Conclusion

React renders by executing function components to produce a virtual DOM, diffing it against the previous tree, and updating the real DOM. Only state changes trigger re‑renders, which cascade to all descendants. Optimizations such as React.memo, useMemo, and useCallback can reduce unnecessary work when used appropriately.