Primeiros passos com React.memo()

Existem várias ferramentas integradas para melhorar o desempenho dos aplicativos React. Uma dessas ferramentas é o componente de alta ordem React.memo(). Este tutorial o ajudará a aprender sobre React.memo(). Você aprenderá o que é, como funciona e como usá-lo em seus aplicativos React.

O que é React.memo ()

Vamos começar com o que React.memo()é. É um componente de alta ordem ( HOC ). Um componente de ordem superior é uma função que pega outro componente e retorna um novo componente. Você pode pensar no HOC como um invólucro que transforma algum componente fornecido em um novo componente.

Como memorando () ajuda

React.memo()nos ajuda a aumentar o desempenho dos aplicativos React, evitando renderizações desnecessárias de componentes. Cada vez que o React precisa decidir se atualiza o DOM, ele compara a renderização anterior com a nova. Se esses dois renderizadores forem diferentes, alguns dados serão diferentes, o React renderá novamente o DOM para atualizá-lo.

Isso é feito para manter a IU sincronizada com os dados. Quando isso acontece, o React renderiza novamente os componentes que são renderizados atualmente no DOM. Isso pode levar algum tempo e consumir alguns recursos, dependendo de quantos componentes são renderizados. A React.memo()ajuda-nos a tornar este processo mais rápido.

Quando envolvermos algum componente com React.memo()três coisas acontecerão. Primeiro, o React renderizará o componente na renderização inicial como normalmente. Depois disso, no entanto, o React também memorizará o componente. O React armazenará o resultado dessa renderização na memória.

memo () e memoização

Algo interessante acontece quando algo faz com que o React renderize novamente o DOM. Desta vez, com o memo()React não irá renderizar novamente o componente automaticamente. Em vez disso, ele verificará se os novos adereços do componente são os mesmos do componente memorizado da renderização anterior.

Se o React reconhecer que os adereços do componente não mudaram, ele reutilizará o resultado memorizado da renderização anterior e pulará a re-renderização do componente do zero. O React irá basicamente reutilizar a versão “mais antiga” do componente. Quando o React usa a versão anterior do componente, ele também reutiliza todo o conteúdo desse componente anterior.

Isso significa que se tivermos algum cálculo naquele componente, essa compilação não pode se repetir, a menos que seja necessário, ou seja, algum recurso externo foi alterado. Isso significa que podemos evitar não apenas re-renderizações desnecessárias do componente, mas, mais importante, repetir cálculos que não são necessários dentro desses componentes.

E se os adereços do componente mudassem? O React renderá novamente o componente e executará todos os cálculos necessários dentro dele. Este, memoization com memo(), funciona apenas com componentes funcionais. No entanto, podemos conseguir isso com componentes de classe se usarmos PureComponent .

Como usá-lo

Uma coisa boa React.memo()é que é muito fácil de usar. Tudo o que temos a fazer é pegar algum componente funcional que queremos memorizar e embrulhar memo(). Podemos fazer isso com o novo componente que queremos criar, bem como com o componente que já existe.

// Functional component without memo():
export const App = () => {
  return (
    <div className="App">
      <h1>Hello world</h1>
    </div>
  )
}

// Functional component with memo():
// Import memo from React:
import { memo } from 'react'

// Wrap App component with memo():
export const App = memo(() => {
  return (
    <div className="App">
      <h1>Hello world</h1>
    </div>
  )
})

// Create component and memoize it later:
// Import memo from React:
import { memo } from 'react'

// Create component:
const App = () => {
  return (
    <div className="App">
      <h1>Hello world</h1>
    </div>
  )
}

// Memoize and export App component:
export const AppMemoized = memo(App)

Comparação superficial e função de comparação personalizada

Por padrão, o React faz uma comparação superficial do objeto adereços ao comparar os adereços da renderização anterior e da próxima. Isso será suficiente na maioria dos casos, se os adereços que você está passando forem simples, ou seja, tipos de dados primitivos . Pode não ser suficiente se você estiver trabalhando com adereços complexos.

Por exemplo, se você estiver passando objetos ou matrizes por meio de adereços, a comparação superficial feita pelo React não será suficiente. O React provavelmente deixará de reconhecer que algum objeto passado pelos adereços é o mesmo que o anterior. Isso porque, quando se trata de objetos, o React compara referências, não os próprios objetos.

Isso causará problemas com comparação superficial. Digamos que criamos um novo objeto que é o mesmo que algum outro objeto. O fato é que esses dois objetos não serão iguais. Eles terão o mesmo formato, conterão os mesmos dados, mas terão referências diferentes.

Para React e também para JavaScript, quando se trata de objetos, as referências são mais importantes. Quando duas referências são diferentes, a comparação superficial falhará.

// Compare "the same" objects:
console.log({ foo: 'foo' } === { foo: 'foo' })
// Output:
// false

// Or:
const obj1 = { foo: 'foo' }
const obj2 = { foo: 'foo' }

console.log(obj1 === obj2)
// Output:
// false

// Compare "the same" arrays:
console.log([1] === [1])
// Output:
// false

// Or:
const arr1 = [1]
const arr2 = [1]
console.log(arr1 === arr2)
// Output:
// false


// Use the same reference:
const obj1 = { foo: 'foo' }
const obj2 = obj1

console.log(obj1 === obj2)
// Output:
// true

const arr1 = [1]
const arr2 = arr1

console.log(arr1 === arr2)
// Output:
// true

Usando a função de comparação personalizada

Felizmente, o React nos permite usar a função de comparação personalizada para verificar a igualdade dos adereços. Portanto, se sabemos que precisamos de uma comparação mais completa, podemos fornecer uma React.memo()função de comparação personalizada. Esta função vem como o segundo argumento, logo após o componente que queremos memorizar.

// Functional component with memo():
// Import memo from React:
import { memo } from 'react'
import { isEqual } from 'lodash'

// Create custom comparison function:
function compareProps(prevProps, nextProps) {
  return isEqual(prevProps, nextProps)
}

// Wrap with memo() and use custom comparison function:
export const App = memo(() => {
  return (
    <div className="App">
      <h1>Hello world</h1>
    </div>
  )
}, compareProps) // Pass compareProps as the 2nd argument

// Create component and memoize it later:
// Import memo from React:
import { memo } from 'react'
import { isEqual } from 'lodash'

// Create component:
const App = () => {
  return (
    <div className="App">
      <h1>Hello world</h1>
    </div>
  )
}

// Memoize with custom comparison function:
export const AppMemoized = memo(App, compareProps) // Pass compareProps as the 2nd argument

Se você quiser usar a função de comparação personalizada, lembre-se de duas coisas importantes. Primeiro, essa função deve sempre retornar um booleano. Em segundo lugar, ele deve retornar truese os pilares anteriores e os próximos forem iguais. Caso contrário, ele deve retornar false.

Quando usar memo ()

Tudo tem um preço. É por isso que antes de tentar usar o memo()padrão, você deve considerar uma coisa. Quando você o usa, o React armazena o resultado do componente de renderização na memória. Se você decidir memorizar um grande número de componentes, isso aumentará o consumo de memória.

Outra coisa a considerar é a comparação. Quando o React compara os adereços anteriores e seguintes, ele requer alguns recursos. Isso pode não ser um grande problema se seu aplicativo for pequeno ou se você não tiver muitos componentes memoized. Se você trabalhar em um projeto maior, renderizar novamente pode ser mais barato do que memorizar.

O fato é que o React já está fazendo um bom trabalho na otimização do desempenho de renderização. Portanto, antes de tentar memorizar tudo, faça o perfil de seu aplicativo e identifique os problemas. Se você descobrir que alguns componentes são renderizados quando não é necessário, tente usar React.memo(). Em seguida, crie o perfil de seu aplicativo novamente e compare os resultados.

Repita esse processo com todos os componentes que deseja tentar memorizar. Se você notar algumas melhorias significativas, mantenha a versão memorizada. Caso contrário, se não houver melhoria no desempenho ou houver alguma penalidade, apenas deixe o componente renderizar novamente.

Algumas regras básicas

Além do acima, existem algumas regras básicas que podem ajudá-lo a encontrar componentes que podem valer a pena memorizar. Primeiro, procure os componentes que são renderizados com frequência, geralmente com os mesmos adereços. Isso geralmente acontece quando o componente é forçado a renderizar novamente por seu componente pai, mesmo que o próprio componente não tenha sido alterado.

React.memo()pode ajudá-lo a evitar essas re-renderizações induzidas pelos pais. Em segundo lugar, tente memorizar um componente se o componente sempre renderizar o mesmo resultado com os mesmos adereços. Terceiro, seu componente renderiza muita IU. Quanto mais UI um componente renderiza, mais caros esses renderizadores geralmente são.

Nesses casos, os recursos necessários para memoização e verificação de comparação podem ser menores do que os recursos para renderizações subsequentes.

Conclusão: Primeiros passos com React.memo ()

React.memo()pode ser uma ferramenta muito útil quando queremos melhorar o desempenho de nossos aplicativos React. Isso torna muito fácil memorizar os componentes e evitar novas renderizações desnecessárias. Espero que este tutorial tenha ajudado você a entender o que memo()é, como funciona e como usá-lo.