2

Em meus estudos sobre o React Native estou esbarrando na otimização de renderização nos componentes, especificamente em componentes funcionais.

É sabido que a qualquer alteração do estado ou das props, o componente por padrão é renderizado, assim como todos seus componentes filhos. Mas às vezes tal alteração não implica em uma necessária mudança visual, tornando a renderização dos componentes desnecessária.

Para contornar tal problema podemos usar PureComponents para componentes de classe, e no caso dos componentes funcionais usar o React.memo que possui a limitação de verificar apenas as props e não os estados, o que já é algo ruim.

A questão que venho expor aqui é sobre o método render() que existe em componentes de classe. Com ele podemos colocar todo o código que só precisa ser executado uma vez (como por exemplo a declaração de constantes) fora do mesmo e dentro do do escopo do componente. Isso é recomendável, pois fazendo isso sempre que o componente for renderizado, tais constantes não serão recarregadas novamente de forma desnecessária, assim como qualquer outro código que seja fixo.

Mas como tal abordagem é feita em componentes funcionais? Como vocês declaram tais constantes ou códigos fixos para que não sejam recarregados desnecessariamente a cada renderização do componente, já que TUDO que está codificado dentro do escopo do componente é novamente carregado? Qual é a maneira correta de abordar isso em componentes funcionais?

1

1 Resposta 1

3

Otimizar a performance do app é um assunto muito extenso. O título da pergunta diz respeito a otimizar a renderização, e isso pode ser levado para duas interpretações: evitar uma renderização desnecessária ou tornar a renderização computacionalmente menos custosa.

O corpo da pergunta demonstra uma preocupação com a declaração de funções ou constantes no componente funcional, que são re-declaradas em toda renderização. Esse será o foco da resposta escrita aqui.

Quando ocorre a re-renderização?

É importante saber quando ocorre uma re-renderização antes de tentar otimizar isso. O autor da pergunta já parece saber sobre, mas segue um breve resumo. A re-renderização ocorre quando:

  • O nó raiz da árvore é de tipo diferente (e.g. <div> <a>Oi</a> </div> e <button> <a>Oi</a> </button>);

  • Algum atributo foi modificado (e.g. <div className="a" /> e <div className="b" />);

  • Alguma propriedade do componente foi modificada (e.g. <Timer time={10} /> e <Timer time={15} />);

  • Algum estado do componente foi modificado;

  • A comparação de nós filhos encontra diferenças. Essa comparação é uma recursão nas duas árvores ao mesmo tempo, comparando nó a nó.

Fonte da citação: O que faz o meu componente ser renderizado novamente no React?

Como evitar (ou melhorar) re-renderizações em componentes funcionais?

React.memo

Foi citado na pergunta o React.memo. Ele pode ser utilizado para evitar a re-renderização com base nas props recebidas. Se o seu componente funcional que utiliza React.memo também utilizar useState, useReducer ou useContext, ele continuará re-renderizando nas mudanças de estado ou contexto.

function MyComponent(props) {
  // ...
}

function areEqual(prevProps, nextProps) {
  // Retorne `true` se `nextProps` retornaria o mesmo resultado a ser renderizado
  // que `prevProps`, senão retorne `false`
}

export default React.memo(MyComponent, areEqual);

useCallback

É possível utilizar o hook useCallback para manter a referência de uma função, já que uma nova referência é criada a cada render. O useCallback retorna um callback memoizado. Quando isso é útil? Bom, quando essa função está no array de dependências de outro hook.

Também acaba servindo para a comparação padrão das props realizada pelo React, já que ele perceberá que é a mesma função. Mas, se você for utilizar useCallback pensando nisso, talvez seja mais simples utilizar o React.memo no componente filho e comparar só as propriedades necessárias, dependendo das suas necessidades. Se essa função realmente é mutável, então o useCallback pode fazer sentido.

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

useMemo

O useMemo retorna um valor memoizado. A documentação recomenda o uso desse hook para cálculos computacionalmente caros. Note que o código será executado durante a renderização, então se for algo muito demorado, a tela ficará travada e você deverá resolver isso de outra maneira.

Se você tem um cálculo caro que muda apenas de vez em quando, de acordo com variáveis (também tem um array de dependências), ou que é sempre o mesmo valor, o useMemo pode sim ser uma solução para tornar as re-renderizações mais baratas. Neste caso, o useMemo não evitará novas re-renderizações, não tem nada a ver com isso, apenas tornará elas mais baratas.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

Observação: No futuro, o React pode escolher "esquecer" alguns valores memoizados e recalculá-los no próximo render para, por exemplo, liberar memória de componentes que não estão em tela.

Fiz uma descrição mais detalhada sobre o useCallback e useMemo nessa resposta, caso queira mais detalhes sobre.

useRef

A declaração de constantes é uma preocupação apontada na pergunta. É possível utilizar o useMemo para manter a referência de um objeto ou array, mas existem opções que podem ser mais adequadas para isso, como apontado neste artigo.

Como você não quer memoizar um valor neste caso, mas sim manter a referência, pode fazer uso do useRef. O useRef é como uma "caixa" que armazena um valor mutável na propriedade .current.

Inclusive, está no FAQ a resposta para sua dúvida sobre se existe algo em componentes funcionais como a declaração de constantes em classes, em tradução livre:

O objeto "ref" é um container genérico cuja propriedade atual é mutável e pode conter qualquer valor, semelhante a uma propriedade de instância em uma classe.

Exemplo:

function Bla() {
  // Inadequado:
  // const baz = useMemo(() => [1, 2, 3], [])

  // Adequado:
  const { current: baz } = useRef([1, 2, 3])

  return <Foo baz={baz} />
}

Não é tão simples melhorar a performance. Você precisa entender o que está atrapalhando antes de tentar corrigir, senão pode acabar piorando. Nem toda atualização do DOM virtual causa uma re-renderização no DOM real.

Mas, quando for modificar algo, acredito que essa resposta tenha abordado bem os pontos para componentes funcionais com os três hooks citados (useCallback, useMemo e useRef) e o HOC React.memo.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .