1. Introdução

Imagine o seguinte: você acabou de criar um aplicativo React elegante e rico em recursos, mas de repente o desempenho começa a diminuir. Os botões parecem lentos, as atualizações de dados demoram muito e você não consegue descobrir por quê. Se isso lhe parece familiar, você não está sozinho. As re-renderizações do React, quando tratadas incorretamente, costumam ser os culpados silenciosos por trás dos problemas de desempenho.

Dominar a re-renderização no React é crucial para desenvolvedores web que desejam construir aplicativos eficientes e escaláveis. Vamos nos aprofundar em como funcionam as re-renderizações do React e descobrir estratégias práticas para otimizar o desempenho, evitar armadilhas comuns e transformar seu aplicativo React em uma experiência extremamente rápida.

2. Como funcionam as re-renderizações do React?

O mecanismo de nova renderização do React é um de seus recursos mais poderosos. Ele permite que seu aplicativo atualize dinamicamente a IU com base na mudança de estado ou adereços. No entanto, se não for otimizado, esse processo pode levar a novas renderizações desnecessárias, causando degradação do desempenho.

Em termos simples, o React é renderizado sempre:

1. O estado de um componente muda.
2. Um componente recebe novos adereços.
3. O componente pai é renderizado novamente.

Mas o que acontece quando um componente é renderizado novamente com muita frequência? O navegador precisa repintar a tela, resultando em animações instáveis, interações lentas e usuários frustrados. Agora, pergunte-se: quantas vezes seu aplicativo pareceu lento e você não conseguiu identificar o motivo?

3. Por que re-renderizações excessivas prejudicam o desempenho

Rerrenderizações excessivas criam um efeito dominó, tornando todo o seu aplicativo lento. Cada vez que ocorre uma nova renderização:

1. React reconcilia as alterações com o DOM virtual.
2. Ele calcula as atualizações mínimas a serem feitas no DOM real.
3. O navegador redesenha a tela.

Em aplicativos pequenos, isso pode passar despercebido. Mas em aplicações grandes, com componentes profundamente aninhados e gerenciamento de estado complexo, mesmo a menor re-renderização desnecessária pode se transformar em um gargalo de desempenho.

Aqui está um exemplo simples:

const UserList = ({ users }) => {
  return users.map(user => 
{user.name}
);
};

// Inside a parent component:

Agora imagine que esta UserList seja renderizada novamente sempre que o componente pai for atualizado, mesmo quando os usuários não tiverem mudado. É aqui que reside o problema. Como podemos evitar essas re-renderizações desnecessárias?

4. Armadilhas comuns (e como evitá-las)

Armadilha 1: não memorizar funções e objetos

Cada vez que um componente pai é renderizado novamente, ele cria novas referências de função e objeto, mesmo que os valores reais não tenham mudado. Isso faz com que os componentes filhos sejam renderizados novamente desnecessariamente.

Ação: use os ganchos useCallback e useMemo para memorizar funções e objetos.

const ParentComponent = () => {
  const handleClick = useCallback(() => {
    // some function logic
  }, []);

  const userDetails = useMemo(() => ({ name: "Rajesh", age: 30 }), []);

  return ;
};

Por que funciona: A memorização evita a criação de novas referências de funções e objetos em cada nova renderização, reduzindo renderizações desnecessárias em componentes filhos.

Armadilha 2: passar funções ou objetos embutidos como acessórios

Funções ou objetos embutidos são criados sempre que um componente é renderizado, fazendo com que o componente receptor seja renderizado novamente, mesmo que os valores reais não tenham mudado.

Ação: Declare funções e objetos fora do componente ou use ganchos de memoização.

// Avoid this:
 console.log("clicked")} />

// Instead:
const handleClick = useCallback(() => console.log("clicked"), []);

Armadilha 3: Falha ao usar React.memo

Alguns componentes são de natureza pura - eles sempre renderizam a mesma saída com os mesmos adereços. No entanto, sem React.memo, eles ainda serão renderizados novamente quando seu componente pai o fizer.

Ação: envolva componentes funcionais com React.memo para evitar novas renderizações desnecessárias.

const ChildComponent = React.memo(({ data }) => {
  return 
{data.name}
;
});

Por que funciona: React.memo garante que o componente seja renderizado novamente quando seus adereços mudam, evitando renderizações redundantes.

5. Como rastrear e depurar re-renderizações do React

Você já se perguntou: "Por que meu componente está sendo renderizado novamente?" React DevTools fornece uma excelente maneira de rastrear renderizações e entender onde as coisas dão errado.

1. Ativar 'Atualizações de destaque': Isso mostra quais componentes estão sendo renderizados novamente.
2. Use a guia 'Profiler': Ela mostra os tempos de renderização e ajuda a identificar gargalos.

Você também pode usar ganchos personalizados como este para registrar novas renderizações:

const useWhyDidYouRender = (componentName, props) => {
  const previousProps = useRef(props);

  useEffect(() => {
    if (previousProps.current !== props) {
      console.log(`${componentName} re-rendered`);
      previousProps.current = props;
    }
  });
};

6. Melhores práticas para otimizar re-renderizações do React

1. Aumente o estado quando necessário, nem sempre

Às vezes, elevar o estado para um componente superior causa novas renderizações desnecessárias de componentes filhos. Em vez disso, gerencie o estado localmente sempre que possível.

2. Use a chave com sabedoria

Ao renderizar listas, certifique-se de que cada item tenha um suporte de chave estável e exclusivo. Isso ajuda o React a otimizar as novas renderizações, identificando quais itens foram alterados.

3. Evite renderizar novamente componentes não montados

Isso pode causar vazamentos de memória e problemas de desempenho. Use a função de limpeza useEffect para evitar novas renderizações em componentes desmontados.

useEffect(() => {
  return () => {
    // cleanup logic here
  };
}, []);

7. Resumo: Master React Re-renderizações

Resumindo, as rerenderizações do React podem ser uma fonte oculta de problemas de desempenho, mas com as técnicas certas, você pode evitar rerrenderizações desnecessárias, manter seu aplicativo rápido e garantir experiências de usuário tranquilas.

• Memoize funções e objetos para evitar a nova renderização de componentes filhos.
• Use React.memo para impedir re-renderizações desnecessárias em componentes puros.
• Aproveite o React DevTools para rastrear, entender e depurar gargalos de desempenho.

8. Aplicação prática: Melhorando o desempenho com novas renderizações intencionais

Na próxima vez que você estiver otimizando um aplicativo React, pense criticamente sobre cada nova renderização. Eles são necessários? O que acontece se você memorizar esta função? Ao aplicar essas estratégias, você escreverá código React mais enxuto e rápido e evitará as armadilhas comuns que atrapalham até mesmo os desenvolvedores mais experientes.

Pensamento final: Agora que você aprendeu os detalhes das re-renderizações do React, vá em frente e aplique essas otimizações aos seus próprios aplicativos. Você não apenas verá um melhor desempenho, mas também ganhará confiança ao escrever código React escalonável e sustentável!