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
.
useMemo
euseCallback
, mas tem mais coisa também. Relacionada: Qual é a diferença entre os hooks useMemo e useCallback do React?