Um dos segredos para construir aplicativos React de alto desempenho é evitar novas renderizações desnecessárias. O mecanismo de renderização do React é eficiente, mas ainda é crucial evitar novas renderizações onde elas não são necessárias. Nesta postagem, abordaremos erros comuns e como evitá-los.

1. Memoizando componentes usando React.memo

A memorização ajuda você a pular novas renderizações quando os adereços do componente não foram alterados. No entanto, é fácil usar mal o React.memo ao não implementar uma função de comparação personalizada.

Uso incorreto:

const MemoizedComponent = React.memo(MyComponent);

Isso apenas verifica se a referência dos adereços foi alterada, o que pode nem sempre ser suficiente.

Uso correto:

const MemoizedComponent = React.memo(MyComponent, (prevProps, nextProps) => {
  return prevProps.itemId === nextProps.itemId;
});

Aqui, usamos uma função de comparação personalizada que só aciona uma nova renderização quando a propriedade itemId muda.

2. Evite o uso excessivo de funções inline

O uso de funções inline dentro do JSX pode levar a novas renderizações desnecessárias, pois o React trata uma nova função como um novo suporte em cada renderização.

Uso incorreto:

function ButtonComponent() {
  return  handleClick()}>Click me;
}

Isso faz com que o handleClick seja recriado em cada renderização, levando a novas renderizações desnecessárias.

Uso correto:

import { useCallback } from 'react';

function ButtonComponent() {
  const handleClick = useCallback(() => {
    // Handle click logic
  }, []);

  return Click me;
}

Ao usar useCallback, memorizamos a função handleClick, evitando recriações desnecessárias em cada renderização.

3. Aproveitando PureComponent

Ao trabalhar com componentes de classe, usar React.PureComponent garante que o componente seja renderizado novamente se seus adereços ou estado mudarem. Se você estiver usando React.Component, isso pode levar a novas renderizações desnecessárias.

Uso incorreto:

class CardComponent extends React.Component {
  // Component logic
}

Uso correto:

class CardComponent extends React.PureComponent {
  // Component logic
}

Ao estender React.PureComponent, o React comparará superficialmente adereços e estados, evitando novas renderizações desnecessárias.

4. Otimizando useSelector em componentes funcionais

Ao usar useSelector do react-redux, é importante selecionar apenas a fatia necessária do estado.

Uso incorreto:

import { useSelector } from 'react-redux';

const DataComponent = () => {
  const globalState = useSelector((state) => state);
  // Render logic
};

Isso fará com que o componente seja renderizado novamente sempre que qualquer parte do estado for alterada.

Uso correto:

import { useSelector } from 'react-redux';

const DataComponent = () => {
  const selectedData = useSelector((state) => state.specificSlice);
  // Render logic based on specific slice
};

Ao selecionar apenas a parte necessária do estado, você minimiza as novas renderizações.

5. Implementação de shouldComponentUpdate em componentes de classe

Para componentes de classe que não estendem PureComponent, a implementação manual de shouldComponentUpdate permite um controle mais granular sobre quando o componente é renderizado novamente.

Uso incorreto:

class ListItem extends React.Component {
  // Component logic
}

Isso será renderizado novamente toda vez que o componente pai for renderizado, mesmo que os adereços e o estado não tenham mudado.

Uso correto:

class ListItem extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    return this.props.itemId !== nextProps.itemId || this.state.value !== nextState.value;
  }

  // Component logic
}

Ao personalizar o shouldComponentUpdate, garantimos que o componente só será renderizado novamente quando a propriedade itemId ou o estado do valor for alterado.

Conclusão

Ao empregar essas técnicas, você pode reduzir significativamente re-renderizações desnecessárias em seus aplicativos React, levando a um melhor desempenho. Implementar memoização com React.memo, aproveitar PureComponent e ajustar o shouldComponentUpdate são estratégias importantes para otimizar seus componentes React.

Compreender quando e como otimizar a renderização pode melhorar muito a experiência do usuário, fornecendo aplicativos mais rápidos e responsivos.

Referências:

1. Geeks para Geeks. (2023). O que é memorização no React?
2. Sincronização. (2024). Memoização em React
3. Hígrafo. (2024). O que é React Memo e como usá-lo?
4. Refine.dev. (2024). Guia React Memo com exemplos

Se você achou este guia útil, considere compartilhá-lo com outras pessoas! ?

Este blog fornece uma visão geral atualizada e abrangente sobre como evitar novas renderizações desnecessárias em aplicativos React, ao mesmo tempo que incorpora práticas recomendadas e altera nomes de variáveis ​​para maior clareza e relevância nas práticas modernas de desenvolvimento web.

Citações:
[1] https://www.geeksforgeeks.org/what-is-memoization-in-react/
[2] https://stackoverflow.com/questions/74013864/why-arent-all-react-components-wrapped-with-react-memo-by-default
[3] https://www.syncfusion.com/blogs/post/what-is-memoization-in-react
[4] https://hygraph.com/blog/react-memo
[5] https://refine.dev/blog/react-memo-guide/
[6] https://dmitripavlutin.com/use-react-memo-wisely/
[7] https://www.topcoder.com/thrive/articles/memoization-in-react-js
[8] https://react.dev/reference/react/memo