README.md

React useEffect renderizando apenas uma vez com useRef

React

Para utilizar o useRef do React e garantir que o useEffect seja executado apenas uma vez, você pode combinar esses dois hooks da seguinte maneira:

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

function Componente() {
  const isMountedRef = useRef(false);

  useEffect(() => {
    if (!isMountedRef.current) {
      // Lógica a ser executada apenas na primeira renderização
      // ...

      isMountedRef.current = true;
    }

    // Lógica a ser executada em todas as renderizações
    // ...

    // Cleanup (opcional)
    return () => {
      // Lógica de cleanup, caso necessário
    };
  }, []); // Passando um array vazio como segundo argumento, o useEffect será executado apenas uma vez

  return (
    // Componente renderizado
    // ...
  );
}

export default Componente;

Nesse exemplo, utilizamos uma ref chamada isMountedRef para controlar se o componente já foi montado ou não. Na primeira renderização, isMountedRef.current é false, então a lógica dentro do bloco if do useEffect será executada. Em seguida, atualizamos o valor da ref para true para indicar que o componente já foi montado.

Nas renderizações subsequentes, isMountedRef.current será true, portanto, a lógica dentro do bloco if não será executada. No entanto, qualquer lógica fora desse bloco, dentro do useEffect, será executada em todas as renderizações subsequentes.

Lembre-se de passar um array vazio [] como segundo argumento para o useEffect. Isso garante que o useEffect seja executado apenas uma vez, sem depender de quaisquer variáveis de estado ou propriedades que possam mudar durante a vida útil do componente.