Función memo

Cuando usemos la función memo, el componente sólo se renderizará si cambian sus props, en lugar de cuando se actualice el componente padre.

import { memo } from 'react';

const ComponenteMemo = ({ count1 }) => {

    console.log('Se actualiza el componente con Memo (ComponenteMemo), pero sólo cuando cambien sus props (count1)', count1, 'no cuando cambie el componente padre');

    return <div>
        <h2>Como puedes ver en la consola, este componente (ComponenteMemo) se renderizará sólo cuando se actualicen sus props</h2>
        <p>{count1}</p>
    </div>
}

export default memo(ComponenteMemo);

Función memo con dos parámetros

El ComponenteMemo se actualizará shólo cuando su método shouldNotRender devuelva false.

App.js

import { useState } from 'react';
import ComponenteMemo from './ComponenteMemo';


const App = () => {
    const [count1, setCount1] = useState(0);
    const [count2, setCount2] = useState(0);

    return (
        <div>

            <button onClick={() => setCount1(count1 + 1)}>Aumentar count1: {count1}</button>

            <button onClick={() => setCount2(count2 + 1)}>Aumentar count2: {count2}</button>

            <ComponenteMemo count1={count1} count2={count2} />
        </div>
    )
}

export default App;

ComponenteMemo

import { memo } from 'react';

const Componente = ({ count1, count2 }) => {
    console.log('Se actualiza el componente con Memo', count1, '---', count2);
    return <div>
        <h2>Este componente se renderizará sólo cuando se actualicen sus props</h2>
        <p>{count1}</p>
        <p>{count2}</p>
    </div>
}

const shouldNotRender = (prevProps, nextProps) => nextProps.count1 > nextProps.count2;


export default memo(Componente, shouldNotRender);