Efeitos colaterais e limpeza com useEffect

O é um Hook que permite lidar com efeitos colaterais em componentes funcionais. Efeitos colaterais incluem tarefas como buscar dados, atualizar o DOM e configurar assinaturas. Vamos explorar como usar de forma clara e eficiente.useEffectuseEffect

Entendendo o useEffect

O aceita dois argumentos. O primeiro é uma função onde colocamos o código do efeito colateral. O segundo é um array de dependências. Vamos ver um exemplo básico:useEffect

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    document.title = 'Hello, world!';
  });

  return <div>Veja o título da página!</div>;
}

Neste exemplo, o título da página muda para “Hello, world!” quando o componente é renderizado.

Dependências do useEffect

O array de dependências permite controlar quando o efeito é executado. Se você quer que o efeito seja executado apenas uma vez, passe um array vazio:

useEffect(() => {
  console.log('Componente montado');
}, []);

Se quiser que o efeito execute quando uma variável específica mudar, inclua-a no array:

const [count, setCount] = useState(0);

useEffect(() => {
  console.log(`Você clicou ${count} vezes`);
}, [count]);

Neste caso, o efeito é executado toda vez que muda.count

Limpeza com useEffect

Alguns efeitos colaterais precisam ser limpos para evitar problemas, como vazamentos de memória. A função passada ao pode retornar uma função de limpeza. Vamos ver um exemplo com um temporizador:useEffect

useEffect(() => {
  const timer = setInterval(() => {
    console.log('Tick');
  }, 1000);

  return () => clearInterval(timer);
}, []);

Aqui, o temporizador é criado quando o componente é montado e limpo quando o componente é desmontado.

Resumo

O é um Hook poderoso para lidar com efeitos colaterais em componentes funcionais. Ele ajuda a executar código após a renderização e a limpar recursos quando necessário.useEffect

Use-o para buscar dados, atualizar o DOM e configurar assinaturas, sempre prestando atenção às dependências e à limpeza dos efeitos. Com prática, você dominará o uso do em suas aplicações React.useEffect

Compartilhar

Compartilhar

Siga-me