One of the most important concepts to understand how React works is its rendering cycle. Understanding it allows you to detect common errors, optimize performance and write more efficient components.
You will learn what is rendering in React, when it happens, what triggers it and how you can control it.
Rendering in React means converting the current state of a component into elements that are displayed on the user interface.
Every time React renders a component, it executes the component’s function to generate a virtual representation of the interface. This representation is compared with the previous version and React only updates the real DOM when changes are detected.
This process allows React to be efficient and fast.
The rendering cycle can be divided into three main phases.
In this phase, React runs the component to generate the Virtual DOM. During this process:
React is only preparing the new version of the interface.
React compares the old Virtual DOM with the new one. This process is called reconciliation.
React identifies what elements have changed and which ones can remain unchanged without modifying them. Thanks to this comparison, it avoids updating the entire interface and only updates what’s necessary.
In this phase React applies changes to the real DOM.
Aquí es cuando el usuario ve los cambios reflejados en la interfaz. También es cuando se ejecutan efectos como los definidos en useEffect.
A re-render occurs when React re-executes a component to generate a new version of the interface.
The state change of a component causes React to re-render that component.
Ejemplo:
const [contador, setContador] = useState(0); setContador(contador + 1);
Every time the update function is called, the component is re-rendered.
When a parent component changes the props it sends to its child, the child also gets re-rendered.
If a parent component is rendered, all its children are also rendered by default, even if their props haven’t changed.
This behavior is one of the reasons why optimization is important in large applications.
<
p Whenever the value of a Context changes, all components that consume it are re-rendered.
function Child() { console.log("Render child"); return Child component; }function Parent() { const [counter, setCounter] = useState(0); return (
This child component does not use the state, but it will be re-rendered every time its parent does.
React offers several tools to optimize rendering.
It allows to memoize a component so that it only renders when its props change.
html
const Child = React.memo(function Child() { console.log("Render child"); return Child component; });
useMemo
Allows to memorize costly calculation results.
const result = useMemo(() => { return calculateComplexValue(data); }, [data]);
useCallback
Memoizes functions to prevent them from being created on every render.
const handleClick = useCallback(() => { console.log("Click"); }, []);
These tools help to improve performance when used correctly.
The Virtual DOM is a memory representation of the real DOM. React uses it to compare versions of the interface and apply only the necessary changes.
Thanks to this system, React reduces the number of operations on the real DOM, which are costly in terms of performance.
Components must behave like pure functions. This means that, for the same props and state, they must always return the same visual result.
You should not modify the state or props directly.
Avoid side effects during rendering. These must be executed within useEffect.
A common error is to think that each render modifies the real DOM. In reality, React can render many times without updating the visible interface.
You will update the DOM only when React detects changes during reconciliation.
You can use tools like:
These tools allow you to analyze when components are rendered and why.
