Entender como o React Native renderiza componentes é essencial para construir aplicativos eficientes e de alto desempenho. Quando o estado ou as propriedades de um componente mudam, o React atualiza automaticamente a interface do usuário (IU) para refletir essas mudanças. Como resultado, o React chama o método render do componente novamente para gerar a representação da UI atualizada.

Neste artigo, exploraremos três React Hooks e como eles evitam renderizações desnecessárias no React

• usarMemorando
• usar retorno de chamada
• usarRef

Essas ferramentas nos permitem otimizar nosso código evitando novas renderizações desnecessárias, melhorando o desempenho e armazenando valores de forma eficiente.

Ao final deste artigo, entenderemos melhor como tornar nossos aplicativos React mais rápidos e responsivos usando esses úteis ganchos React.

Usando useMemo do React

No React, useMemo pode evitar novas renderizações desnecessárias e otimizar o desempenho.

Vamos explorar como o gancho useMemo pode evitar novas renderizações desnecessárias em nossos componentes React.

Ao memorizar o resultado de uma função e rastrear suas dependências, useMemo garante que o processo seja recalculado somente quando necessário.

Considere o seguinte exemplo:

import { useMemo, useState } from 'react';

    function Page() {
      const [count, setCount] = useState(0);
      const [items] = useState(generateItems(300));

      const selectedItem = useMemo(() => items.find((item) => item.id === count), [
        count,
        items,
      ]);

      function generateItems(count) {
        const items = [];
        for (let i = 0; i 
          
Count: {count}
          
Selected Item: {selectedItem?.id}
           setCount(count   1)}>Increment
        
      );
    }

    export default Page;

O código acima é um componente React chamado Page que usa useMemo para otimizar o cálculo do selectedItem.

Aqui está a explicação:

• O componente mantém uma contagem de variáveis ​​de estado usando o gancho useState.
• O estado dos itens é inicializado usando o gancho useState com o resultado da função generateItems.
• O selectedItem é calculado usando useMemo, que memoriza o resultado da operação items.find. Ele apenas recalcula quando a contagem ou os itens mudam.
• A função generateItems gera uma matriz de itens com base na contagem fornecida.
• O componente renderiza o valor count atual, o ID do item selecionado e um botão para incrementar a contagem.

O uso de useMemo otimiza o desempenho memorizando o resultado da operação items.find. Ele garante que o cálculo de selectedItem seja realizado apenas quando as dependências (contagem ou itens) mudam, evitando recálculos desnecessários em renderizações subsequentes.

A memoização deve ser empregada seletivamente para operações computacionalmente intensivas, pois introduz sobrecarga adicional no processo de renderização.

Usando useCallback do React

O gancho useCallback no React permite a memorização de funções, evitando que sejam recriadas durante a renderização de cada componente. Utilizando useCallback. uma parte é criada apenas uma vez e reutilizada em renderizações subsequentes, desde que suas dependências permaneçam inalteradas.

Considere o seguinte exemplo:

import React, { useState, useCallback, memo } from 'react';

    const allColors = ['red', 'green', 'blue', 'yellow', 'orange'];

    const shuffle = (array) => {
      const shuffledArray = [...array];
      for (let i = shuffledArray.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i   1));
        [shuffledArray[i], shuffledArray[j]] = [shuffledArray[j], shuffledArray[i]];
      }
      return shuffledArray;
    };

    const Filter = memo(({ onChange }) => {
      console.log('Filter rendered!');

      return (
         onChange(e.target.value)}
        />
      );
    });

    function Page() {
      const [colors, setColors] = useState(allColors);
      console.log(colors[0])

      const handleFilter = useCallback((text) => {
        const filteredColors = allColors.filter((color) =>
          color.includes(text.toLowerCase())
        );
        setColors(filteredColors);
      }, [colors]);


      return (
        

        

           setColors(shuffle(allColors))}>
            Shuffle
          
          
        
        

          {colors.map((color) => (
            
{color}
          ))}
        
      
      );
    }

    export default Page;

O código acima demonstra uma funcionalidade simples de filtragem de cores e embaralhamento em um componente React. Vamos examinar isso passo a passo:

• A matriz inicial de cores é definida como allColors.
• A função shuffle pega um array e embaralha seus elementos aleatoriamente. Ele usa o algoritmo Fisher-Yates para conseguir embaralhar.
• O componente Filter é um componente funcional memorizado que renderiza um elemento de entrada. Ele recebe uma propriedade onChange e aciona a função de retorno de chamada quando o valor de entrada muda.
• O componente Página é o principal componente que renderiza a funcionalidade de filtragem de cores e embaralhamento.
• As cores da variável de estado são inicializadas usando o gancho useState, com o valor inicial definido como allColors. Representa a lista filtrada de cores.
• A função handleFilter é criada usando o gancho useCallback. Ele pega um parâmetro de texto e filtra o array allColors com base no texto fornecido. As cores filtradas são então definidas usando a função setColors do gancho useState. A matriz de dependência [colors] garante que a função handleFilter só seja recriada se o estado das cores mudar, otimizando o desempenho ao evitar novas renderizações desnecessárias.
• Dentro do componente Página há um botão para embaralhar as cores. Quando o botão é clicado, ele chama a função setColors com o array embaralhado de allColors.
• O componente Filter é renderizado com a propriedade onChange definida para a função handleFilter.
• Finalmente, o array de cores é mapeado para renderizar a lista de itens de cores como
• elementos.

O gancho useCallback é usado para memorizar a função handleFilter, o que significa que a função só é criada uma vez e reutilizada em renderizações subsequentes se as dependências (neste caso, o estado das cores) permanecerem as mesmas.

Essa otimização evita novas renderizações desnecessárias de componentes filhos que recebem a função handleFilter como um suporte, como o componente Filter.
Ele garante que o componente Filtro não seja renderizado novamente se o estado das cores não tiver mudado, melhorando o desempenho.

Usando useRef do React

Outra abordagem para melhorar o desempenho em aplicativos React e evitar novas renderizações desnecessárias é usar o gancho useRef. Usando useRef, podemos armazenar um valor mutável que persiste entre renderizações, evitando efetivamente novas renderizações desnecessárias.

Essa técnica nos permite manter uma referência a um valor sem acionar atualizações de componentes quando esse valor muda. Ao aproveitar a mutabilidade da referência, podemos otimizar o desempenho em cenários específicos.

Considere o seguinte exemplo:

import React, { useRef, useState } from 'react';

function App() {
  const [name, setName] = useState('');
  const inputRef = useRef(null);

  function handleClick() {
    inputRef.current.focus();
  }

  return (
    

       setName(e.target.value)}
        ref={inputRef}
      />
      Focus
    
  );
}

O exemplo acima possui um campo de entrada simples e um botão. O gancho useRef cria uma referência chamada inputRef. Assim que o botão é clicado, a função handleClick é chamada, que foca no elemento input acessando a propriedade atual do objeto ref inputRef. Como tal, evita a nova renderização desnecessária do componente quando o valor de entrada é alterado.

Para garantir o uso ideal de useRef, reserve-o apenas para valores mutáveis ​​que não afetam a renderização do componente. Se um valor mutável influenciar a renderização do componente, ele deverá ser armazenado dentro de seu estado.

Conclusão

Ao longo deste tutorial, exploramos o conceito de rerenderização do React e seu impacto potencial no desempenho de nossos aplicativos. Investigamos as técnicas de otimização que podem ajudar a mitigar novas renderizações desnecessárias. O React oferece uma variedade de ganchos que nos permitem melhorar o desempenho de nossos aplicativos. Podemos armazenar efetivamente valores e funções entre renderizações aproveitando esses ganchos, aumentando significativamente o desempenho do aplicativo React.