](https://nearestnabors.com/)

##  Step 2: React renders your components

After you trigger a render, React calls your components to figure out what to
display on screen. **“Rendering” is React calling your components.**

  * **On initial render,** React will call the root component. 
  * **For subsequent renders,** React will call the function component whose state update triggered the render. 

This process is recursive: if the updated component returns some other
component, React will render _that_ component next, and if that component also
returns something, it will render _that_ component next, and so on. The
process will continue until there are no more nested components and React
knows exactly what should be displayed on screen.

In the following example, React will call ` Gallery() ` and ` Image() `
several times:

index.js  Gallery.js

Gallery.js

Reset  [ Fork
](https://codesandbox.io/api/v1/sandboxes/define?undefined&environment=create-
react-app "Open in CodeSandbox")

    
    
    export default function Gallery() {
      return (
        <section>
          <h1>Inspiring Sculptures</h1>
          <Image />
          <Image />
          <Image />
        </section>
      );
    }
    
    function Image() {
      return (
        <img
          src="https://i.imgur.com/ZF6s192.jpg"
          alt="'Floralis Genérica' by Eduardo Catalano: a gigantic metallic flower sculpture with reflective petals"
        />
      );
    }
    
    

Show more

  * **During the initial render,** React will [ create the DOM nodes ](https://developer.mozilla.org/docs/Web/API/Document/createElement) for ` <section> ` , ` <h1> ` , and three ` <img> ` tags. 
  * **During a re-render,** React will calculate which of their properties, if any, have changed since the previous render. It won’t do anything with that information until the next step, the commit phase. 

###  Pitfall

Rendering must always be a [ pure calculation ](/learn/keeping-components-
pure) :

  * **Same inputs, same output.** Given the same inputs, a component should always return the same JSX. (When someone orders a salad with tomatoes, they should not receive a salad with onions!) 
  * **It minds its own business.** It should not change any objects or variables that existed before rendering. (One order should not change anyone else’s order.) 

Otherwise, you can encounter confusing bugs and unpredictable behavior as your
codebase grows in complexity. When developing in “Strict Mode”, React calls
each component’s function twice, which can help surface mistakes caused by
impure functions.

#####  Deep Dive

####  Optimizing performance

Show Details

The default behavior of rendering all components nested within the updated
component is not optimal for performance if the updated component is very high
in the tree. If you run into a performance issue, there are several opt-in
ways to solve it described in the [ Performance
](https://reactjs.org/docs/optimizing-performance.html) section. **Don’t
optimize prematurely!**

##  Step 3: React commits changes to the DOM

After rendering (calling) your components, React will modify the DOM.

  * **For the initial render,** React will use the [ ` appendChild() ` ](https://developer.mozilla.org/docs/Web/API/Node/appendChild) DOM API to put all the DOM nodes it has created on screen. 
  * **For re-renders,** React will apply the minimal necessary operations (calculated while rendering!) to make the DOM match the latest rendering output. 

**React only changes the DOM nodes if there’s a difference between renders.**
For example, here is a component that re-renders with different props passed
from its parent every second. Notice how you can add some text into the `
<input> ` , updating its ` value ` , but the text doesn’t disappear when the
component re-renders:

Clock.js

Clock.js

Reset  [ Fork
](https://codesandbox.io/api/v1/sandboxes/define?undefined&environment=create-
react-app "Open in CodeSandbox")

    
    
    export defau