# React Pure Component

## `React.PureComponent`

The React documentation suggests using `React.PureComponent` instead of trying to implement `shouldComponentUpdate()`

`React.PureComponent` is an alternative to `React.Component`

{% 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, {PureComponent} from "react"
import GrandChild from "./GrandChild"

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

export default Child
```

{% endtab %}

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

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

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

export default Parent
```

{% endtab %}

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

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

class GrandParent extends PureComponent {    
    render() {
        console.log("[👴🏼]   [ ]   [ ]   [ ] rendered")
        return (
            <div>
                <p>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 {
    state = { count: 0 }
    
    increment = () => this.setState(prevState => ({count: prevState.count + 1}))
    
    render() {
        console.log("[GP] [P] [C] [GC] APP just rendered")
        return (
            <div>
                <button onClick={this.increment}>+1</button>
                <h2>{this.state.count}</h2>
                <p>I'm the App component</p>
                <GrandParent count={this.state.count} />
                <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 %}

The result of the operation is below. We see only the **App** & **GrandParent** component just re- rendered instead of the whole DOM Tree.&#x20;

Since we defined GrandParent component as  `PureComponent` It looks for **state** **update** & if **state is changed** it updates the component.&#x20;

```javascript
// Initial Tree rendering
[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

// Tree re-rendering after state change (Only the App & GP component is re-rendered)
[GP] [P] [C] [GC] APP just rendered
[👴🏼] [ ] [ ] [ ] rendered
```

{% hint style="info" %}
`React.PureComponent` automatically implements `shouldComponentUpdate()` for shallow props and state comparisons.
{% endhint %}
