rendering/lifecycle

9 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

React render and commit lifecycle

React UI updates happen in three steps: 1) Triggering a render (a state update or other event requests a render), 2) Rendering the component (React calls your component function to figure out what should be on screen), 3) Committing to the DOM (React applies the changes to the actual DOM). Understanding these steps helps explain how code executes and behaves.

Three steps of React rendering and display

Every screen update in a React app happens in three steps: (1) Triggering a render by initial render or state update, (2) Rendering the component where React calls your components to figure out what to display, and (3) Committing to the DOM where React modifies the DOM nodes.

Initial render with createRoot and render

To trigger the initial render when an app starts, call createRoot() with the target DOM node, then call its render() method with your component. Example: const root = createRoot(document.getElementById('root')); root.render(<Image />);

Re-renders triggered by state updates

Once a component is initially rendered, you can trigger further renders by updating its state with the set function. Updating a component's state automatically queues a render.

What rendering means in React

Rendering is React calling your components to figure out what to display on screen. On initial render, React calls the root component. For subsequent renders, React calls the function component whose state update triggered the render. If updated components return nested components, React continues rendering those components recursively until there are no more nested components.

React commit phase uses minimal DOM operations

During the commit phase, React modifies the DOM. For initial renders, React uses appendChild() to put all created DOM nodes on screen. For re-renders, React applies only the minimal necessary operations to make the DOM match the latest rendering output.

React only changes DOM nodes if there is a difference

React does not touch DOM nodes if there is no difference between renders. For example, if a component re-renders but a particular DOM node (like an input element) remains in the same position with the same properties, React will not modify it, preserving user input like text in an input field.

Rendering must be pure computation

Rendering must always be a pure calculation with two requirements: (1) Same inputs must produce the same output—given the same inputs, a component should always return the same JSX. (2) It must not have side effects—it should not change any objects or variables that existed before rendering. React calls each component function twice in Strict Mode to help surface mistakes caused by impure functions.

Browser paint after DOM commit

After React completes rendering and commits changes to the DOM, the browser repaints the screen. This process is referred to as 'painting' in React documentation to avoid confusion with React's rendering step.

Give your agent this brain