# React Memo

## `React.memo()`

`React.memo()` is an alternate version of `React.PureComponent`which can be used with **functional components**.

`React.memo()` is a higher-order component which only compares `prevProps` and `nextProps` . It doesn't check **state**.

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

```jsx
import React from "react"

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

export default GrandChild
```

{% endtab %}

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

```jsx

import React from "react"
import GrandChild from "./GrandChild"

function Child(props) {  
    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 from "react"
import Child from "./Child"

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

export default React.memo(Parent)
```

{% endtab %}

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

```jsx
import React from "react"
import Parent from "./Parent"

function GrandParent(props) {     
    console.log("[👴🏼]   [ ]   [ ]   [ ] rendered")
    return (
        <div>
            <p>I'm a GrandParent Component</p>
            <Parent />
            <Parent />
        </div>
    )  
}

export default React.memo(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.

```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
```
