O que é o memo em ReactJS? - COM EXEMPLOS DE CÓDIGO

Se você já desenvolveu aplicações com ReactJS já deve ter se deparado com essas nomenclaturas. Mas se ainda não, eu te conto mais sobre o que é o memo dentro do ecosistema ReactJS.

De acordo com a documentação oficial do ReactJS (https://pt-br.react.dev/reference/react/memo) o memo permite que você impessa a re-renderização de um componente quando seu estado/props se mantenham inalterados. Você já se deparou com um componente sendo renderizado duas vezes quando você realiza uma ação? O memo faz com que você impessa esse tipo de ação na sua aplicação.

Como por exemplo o código a seguir:

import { memo, useState } from 'react';


export default function MyApp() {
const [name, setName] = useState('');
const [address, setAddress] = useState('');
return (
  <>
    <label>
      Name{': '}
      <input value={name} onChange={e => setName(e.target.value)} />
    </label>
    <label>
      Address{': '}
      <input value={address} onChange={e => setAddress(e.target.value)} />
    </label>
    <Greeting name={name} />
  </>
);
}


const Greeting = memo(function Greeting({ name }) {
console.log("Greeting was rendered at", new Date().toLocaleTimeString());
return <h3>Hello{name && ', '}{name}!</h3>;
});

Como a própia doc diz "Você deve confiar apenas memocomo uma otimização de desempenho. Se o seu código não funcionar sem ele, encontre o problema subjacente e corrija-o primeiro. Então você pode adicionar memopara melhorar o desempenho."

Mas fique atento, você não deve sair colocando o memo em todo lugar da sua aplicação.

"A otimização com memo só é valiosa quando seu componente é renderizado novamente com frequência com os mesmos adereços exatos e sua lógica de nova renderização é cara. Se não houver atraso perceptível quando seu componente for renderizado novamente, memoisso será desnecessário. Tenha em mente que isso memoé completamente inútil se os adereços passados ​​para o seu componente forem sempre diferentes, como se você passar um objeto ou uma função simples definida durante a renderização. É por isso que você frequentemente precisará useMemode e useCallbackjunto com memo.

Não há benefício em agrupar um componente em memooutros casos. Também não há nenhum dano significativo em fazer isso, então algumas equipes optam por não pensar em casos individuais e memorizar o máximo possível. A desvantagem dessa abordagem é que o código se torna menos legível. Além disso, nem toda memorização é eficaz: um único valor “sempre novo” é suficiente para quebrar a memorização de um componente inteiro."

Então fique atento e estude bem para entender onde e como o uso do memo vai trazer bebeficios para sua aplicação.

Se você ficou interessado e quer saber mais sobre essa funcionalidade, dê uma olhada na documentação que você não vai se arrepender: https://pt-br.react.dev/reference/react/memo