How React memo works? 

Hi, If we are working with functional components and the props of that component never change then also the input of this component will never change, we can say that this component have a behavior of similar to pure components. 

OK, to learn how React memo works let see this example, where I have a Parent component and a Child component like this:

Then, if in the Parent component have a data that is changing or something that is causing a re-rendering the Parent component then in that case every-time that my Parent component has a re-render also my Child component will have a render too.

Parent Component Code:

// PARENT COMPONENT CODE

// Dependencies
import React, { useState, useEffect } from 'react';

// Components
import Child from './child';

// Styles
import './App.css';

function App() {
  console.log('*** Render the PARENT COMPONENT ***');

  // Local state
  const [time, setTime] = useState(new Date().toString());

  useEffect(() => {
    // Getting the current date every 1 second, to simulate re-renders
    setInterval(() => {
      setTime(new Date().toString());
    }, 1000)

  }, []); // Acting as component did mount

  return (
    <div className="App">

      <section>
        <h1>I'm Parent component</h1>

        <Child />
      </section>
    </div>
  );
}

export default App;

Child Component Code:

// CHILD COMPONENT CODE

// Dependencies
import React from 'react';

// Functional component
const Child = () => {
  console.log('Render CHILD COMPONENT')

  const divStyle = {
    border: '2px solid green',
    width: '100%',
    height: 'auto'
  }

  return (
    <>
      <section style={divStyle}>
        <p>I'm Child component</p>
      </section>
    </>
  )
}

export default Child;

Result: see how the parent component is re-rendering and Child component too.

Ok look now, if we pass the time prop to the Child component and because this time prop is changing also will cause a re-rendering in Child component. 

<Child time={time} />

Result:

But, let suppose that the prop that we are passing to the Child component is NOT CHANGING and all the time that prop will have the same value, like this:

<Child time={1}  />

In this case we don’t need that our Child component will re-render as the Parent component is re-rendering. 

Re-render the Child component  is not necessary BECAUSE THE PROP NEVER CHANGE, so in this point to prevent unnecessary re-renders that are coming from the Parent component to Child components the solution is implement React memo

React memo 

The keyword “memo” is a derivative from memoization (optimization technique in computers).

The first thing is import { memo } from ‘react; in our Child component

Then wrap our child component with memo( );

export default memo(ChildComponent)

The next code is implementing “memo” and is solving re-renders in Child component when props are the same all the time:

<Child time={1} />

Child component with memo:

// Dependencies
import React, { memo } from 'react'; // importing memo from react

// Functional component
const Child = ({ time }) => {
  console.log('Render CHILD COMPONENT')

  const divStyle = {
    border: '2px solid green',
    width: '100%',
    height: 'auto'
  }

  return (
    <>
      <section style={divStyle}>
        <p>I'm Child component</p>
      </section>
    </>
  )
}

// Wrapping the component with memo()
export default memo(Child);

Result: in this case Only the first render in child component will be executed but not more, and the parent component will be re-rendering itself because parent need to do re-renders.

Even if the child component do not receive props, we can implement react memo in child component to avoid unnecessary renders that are coming from the parent:

<Child />

React memo compare the previous prop to the current prop and if the prop doesn’t change then “memoize” the value and because the value is the same this avoid multiple re-renders.

Using “memo” we are incrementing the performance of the components.

By Cristina Rojas.