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.