Quando criamos aplicativos em React, frequentemente nos deparamos com os termos renderização e re-renderização de componentes. Embora isso possa parecer simples à primeira vista, as coisas ficam interessantes quando diferentes sistemas de gerenciamento de estado, como useState, Redux, ou quando inserimos ganchos de ciclo de vida, como useEffect, estão envolvidos. Se você deseja que sua aplicação seja rápida e eficiente, compreender esses processos é fundamental.

O que é renderização?

Renderização é o processo pelo qual o React renderiza sua interface de usuário (IU) na tela, com base em estado ou adereços. Quando seu componente é renderizado pela primeira vez, ele é chamado de primeira renderização.

Como funciona a renderização inicial?

Quando um componente é "montado" pela primeira vez no DOM, isto é o que acontece:

1. Inicialização de estado:
Quer você use useState, props ou Redux, o estado inicial do componente é criado.

2. Função de renderização:
O React percorre o código JSX e gera um DOM virtual com base no estado atual.

3. Cria um DOM virtual (DOM virtual) para o estado atual do componente.

4. Comparando (diferenciando):
O DOM virtual é comparado ao DOM real (por ser a primeira renderização, todos os elementos serão totalmente renderizados).

5. Exibindo:
O componente é exibido na tela.
Depois que o componente for renderizado, o próximo desafio é a nova renderização.

Rerenderização: quando e por quê?

A nova renderização acontece sempre que o estado ou os adereços mudam. Você clicou no botão que altera o número na tela? Alterou um valor na loja Redux? Todas essas ações podem fazer com que o React renderize o componente novamente, e é aí que entra a nova renderização.

Como funciona a nova renderização?

Detecção de alteração de estado:

• Com useState, quando você chama setState, o React sabe que precisa atualizar o componente.

• Com Redux, quando um valor na loja muda, cada componente associado a essa parte do estado é renderizado novamente.

Acionador de renderização:

Quando o estado muda, o React cria um novo DOM virtual com base nessa mudança.

Comparação (diferença):

• O React compara o novo DOM virtual com o antigo e calcula quais alterações aplicar. Esta é uma maneira pela qual o React otimiza a renderização.

Ver alterações:

• Depois que as alterações são calculadas, o React as aplica ao DOM real. Assim, apenas as partes alteradas da página são exibidas novamente.

Quais componentes são renderizados novamente?

Nem todos os componentes são afetados por todas as alterações. O React renderiza novamente apenas os componentes que:

Usar estados locais:
Se você usar useState, o componente será renderizado novamente toda vez que setState for chamado.

Usar estado Redux:
Se o seu componente depender do estado Redux (via useSelector ou connect), ele será renderizado novamente quando essa parte do estado mudar.

Usar adereços:
Se o valor dos adereços for alterado, o componente será renderizado novamente com os novos valores.

Otimização de Renderização

É claro que nem sempre é ideal renderizar novamente todos os componentes desnecessariamente. Se quisermos que o aplicativo funcione de forma rápida e eficiente, aqui estão algumas técnicas de otimização:

1. Componentes de memorização
React oferece funcionalidade para memorização de componentes via React.memo. Se o seu componente não depende de props ou mudanças de estado, você pode "lembrar" dele, para que ele seja renderizado novamente somente quando os valores relevantes mudarem.

Exemplo:

const MemoizedComponent = React.memo(MyComponent);

2. Memoização de funções e valores

Para evitar a recriação de funções ou valores em cada renderização, use useCallback para memorizar funções e useMemo para memorizar valores.

• useCallback permite que você memorize uma função e evite que ela seja recriada até que as dependências sejam alteradas.

• useMemo memoriza o resultado da função, portanto, não é recalculado em cada renderização.

Exemplo:

const increment = useCallback(() => {
  setCount(prevCount => prevCount   1);
}, []);

const expensiveCalculation = useMemo(() => {
  return count * 2;
}, [count]);

3. Otimização Redux

Se você usar Redux, poderá otimizar ainda mais o aplicativo com seletores memorizados, como seleção novamente. Isso torna possível evitar a nova renderização de componentes que não são afetados pela mudança de estado.

Ganchos e renderização do ciclo de vida

Nas classes React clássicas, usamos shouldComponentUpdate para controlar quando o componente será renderizado novamente. Em componentes funcionais, este conceito pode ser simulado usando useEffect e memoization.

Conclusão

A renderização e a nova renderização são cruciais para a exibição da IU em aplicativos React, mas compreender e otimizar adequadamente esses processos pode fazer a diferença entre um aplicativo lento e um super-rápido. O uso correto de memoização, useCallback, useMemo, bem como o manuseio cuidadoso do Redux, ajudam a evitar re-renderizações desnecessárias e a manter nossos aplicativos rápidos e responsivos.

Código de exemplo: renderização e nova renderização em ação
Aqui está um exemplo de componente que usa useState, Redux e memoization para otimizar a renderização:

import React, { useState, useEffect, useCallback, useMemo } from 'react';
import { useSelector, useDispatch } from 'react-redux';

const MyComponent = () => {
  // Lokalni state
  const [count, setCount] = useState(0);

  // Redux state
  const reduxValue = useSelector(state => state.someValue);
  const dispatch = useDispatch();

  // Memoizacija funkcije kako bi se izbeglo ponovno kreiranje na svakom renderu
  const increment = useCallback(() => {
    setCount(prevCount => prevCount   1);
  }, []);

  // Memoizacija izračunate vrednosti
  const expensiveCalculation = useMemo(() => {
    return count * 2;
  }, [count]);

  // Efekat koji se pokreće samo pri promeni reduxValue
  useEffect(() => {
    console.log("Redux value changed:", reduxValue);
  }, [reduxValue]);

  return (
    

      
Count: {count}
      
Expensive Calculation: {expensiveCalculation}
      Increment
       dispatch({ type: 'SOME_ACTION' })}>
        Dispatch Redux Action
      
    
  );
};

Como podemos ver, uma combinação de estado local, Redux, memoização e gancho useEffect é usada aqui para tornar o aplicativo o mais eficiente possível.