Memo

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

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);