React re-renders a component whenever its state changes, its props change, or its parent re-renders — during a render, React calls the component function to get its returned JSX, builds an updated virtual DOM representation, and diffs it against the previous version to figure out the minimal actual changes needed in the real DOM, a process it then commits during the separate commit phase. Rendering itself must be a pure operation, with no side effects like network calls or DOM manipulation happening directly in the component's function body — those are handled separately, in effects, precisely because a render can potentially happen more than once, or be discarded, before a final version is actually committed.
1Understanding Rendering
React re-renders a component whenever its state changes, its props change, or its parent re-renders — during a render, React calls the component function to get its returned JSX, builds an updated virtual DOM representation, and diffs it against the previous version to figure out the minimal actual changes needed in the real DOM, a process it then commits during the separate commit phase. Rendering itself must be a pure operation, with no side effects like network calls or DOM manipulation happening directly in the component's function body — those are handled separately, in effects, precisely because a render can potentially happen more than once, or be discarded, before a final version is actually committed.
Keep a component's function body free of side effects like fetching data or manipulating the DOM directly — those belong inside useEffect, since render itself needs to remain a pure function of props and state that's safe to call multiple times.
function Clock({ time }) {
console.log('Rendering Clock with time:', time);
return <p>Current time: {time}</p>;
}2Practical Example
Here is a real-world application of Rendering showing how it is used in production React code.
import { useState } from 'react';
function App() {
const [count, setCount] = useState(0);
console.log('App rendered');
return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}3Best Practices
Follow these guidelines when working with Rendering:
1. Keep component functions pure, computing their returned JSX from props/state only, with no side effects performed directly during rendering
2. Move side effects like data fetching, subscriptions, or manual DOM manipulation into useEffect, which runs after rendering and committing, not during it
3. Avoid creating new object/array/function values unnecessarily inside a render if they're passed as props to a memoized child, since a new reference on every render defeats memoization
Tip: Keep a component's function body free of side effects like fetching data or manipulating the DOM directly — those belong inside useEffect, since render itself needs to remain a pure function of props and state that's safe to call multiple times.
function Clock({ time }) {
console.log('Rendering Clock with time:', time);
return <p>Current time: {time}</p>;
}