# React Tree Rendering

## DOM Tree Rendering in React

Reacts' components rendering in DOM tree:&#x20;

* React recursively renders components down one branch until there are no more components to render.
* Changes to state or props in any component will recursively re-render down the remaining tree whether those components have changed or not. This can be very inefficient!
* &#x20;React has provided `shouldComponentUpdate()`, `React.PureComponent` and `React.memo()` to optimize this process.

{% tabs %}
{% tab title="GrandChild.js" %}

```jsx
import React, {Component} from "react"

class GrandChild extends Component {
    render() {
        console.log("[ ]   [ ]   [ ]   [👶🏻] rendered")
        return (
            <div>
                <p>I'm a GrandChild Component</p>
            </div>
        )
    }
}

export default GrandChild
```

{% endtab %}

{% tab title="Child.js" %}

```jsx
import React, {Component} from "react"
import GrandChild from "./GrandChild"

class Child extends Component {
    render() {
        console.log("[ ]   [ ]   [🧒🏻]   [ ] rendered")
        return (
            <div>
                <p style={{color: "orange"}}>I'm a Child Component</p>
                <GrandChild />
                <GrandChild />
            </div>
        )
    }
}

export default Child
```

{% endtab %}

{% tab title="Parent.js" %}

```jsx
import React, {Component} from "react"
import Child from "./Child"

class Parent extends Component {
    render() {
        console.log("[ ]   [👩🏼‍⚕️]   [ ]   [ ] rendered")
        return (
            <div>
                <p style={{color: "green"}}>I'm a Parent Component</p>
                <Child />
                <Child />
            </div>
        )
    }
}

export default Parent
```

{% endtab %}

{% tab title="GrandParent.js" %}

```jsx
import React, {Component} from "react"
import Parent from "./Parent"

class GrandParent extends Component {
    render() {
        console.log("[👴🏼]   [ ]   [ ]   [ ] rendered")
        return (
            <div>
                <p style={{color: "red"}}>I'm a GrandParent Component</p>
                <Parent />
                <Parent />
            </div>
        )
    }
}

export default GrandParent
```

{% endtab %}

{% tab title="App.js" %}

```jsx
import React, {Component} from "react"
import GrandParent from "./GrandParent"

class App extends Component {
    render() {
        console.log("[GP] [P] [C] [GC] APP just rendered")
        return (
            <div>
                <p>I'm the App component</p>
                <GrandParent />
                <GrandParent />
            </div>
        )    
    }
}

export default App
```

{% endtab %}

{% tab title="index.js" %}

```jsx
import React from "react"
import ReactDOM from "react-dom"
import App from "./App"

ReactDOM.render(<App />, document.getElementById("root"))
```

{% endtab %}
{% endtabs %}

We get this result after React finishes rendering DOM tree.

```bash
[GP] [P] [C] [GC] APP just rendered
[👴🏼] [ ] [ ] [ ] rendered
[ ] [👩🏼‍⚕️] [ ] [ ] rendered
[ ] [ ] [🧒🏻] [ ] rendered
[ ] [ ] [ ] [👶🏻] rendered
[ ] [ ] [ ] [👶🏻] rendered
[ ] [ ] [🧒🏻] [ ] rendered
[ ] [ ] [ ] [👶🏻] rendered
[ ] [ ] [ ] [👶🏻] rendered
[ ] [👩🏼‍⚕️] [ ] [ ] rendered
[ ] [ ] [🧒🏻] [ ] rendered
[ ] [ ] [ ] [👶🏻] rendered
[ ] [ ] [ ] [👶🏻] rendered
[ ] [ ] [🧒🏻] [ ] rendered
[ ] [ ] [ ] [👶🏻] rendered
[ ] [ ] [ ] [👶🏻] rendered
[👴🏼] [ ] [ ] [ ] rendered
[ ] [👩🏼‍⚕️] [ ] [ ] rendered
[ ] [ ] [🧒🏻] [ ] rendered
[ ] [ ] [ ] [👶🏻] rendered
[ ] [ ] [ ] [👶🏻] rendered
[ ] [ ] [🧒🏻] [ ] rendered
[ ] [ ] [ ] [👶🏻] rendered
[ ] [ ] [ ] [👶🏻] rendered
[ ] [👩🏼‍⚕️] [ ] [ ] rendered
[ ] [ ] [🧒🏻] [ ] rendered
[ ] [ ] [ ] [👶🏻] rendered
[ ] [ ] [ ] [👶🏻] rendered
[ ] [ ] [🧒🏻] [ ] rendered
[ ] [ ] [ ] [👶🏻] rendered
[ ] [ ] [ ] [👶🏻] rendered
```
