Título: "Desvendando o useEffect: O Guia do Jedi Front-End com Código"
- #React
Introdução
Quando você está começando com React, o useEffect
pode parecer um truque de mágica que só os mestres front-end conhecem. Mas não se preocupe, vamos desmistificar esse hook poderoso com alguns exemplos de código. Imagine que o useEffect
é como o sabre de luz do seu mestre Jedi – essencial para manter seu aplicativo em sintonia com o mundo ao seu redor.
Mas o que é isso?
O useEffect
é usado para lidar com efeitos colaterais em seus componentes React. Isso inclui coisas como buscar dados de uma API, atualizar o DOM diretamente ou até mesmo definir temporizadores. Vamos dar uma olhada em um exemplo básico:
import React, { useState, useEffect } from 'react';
function Contador() {
const [contador, setContador] = useState(0);
useEffect(() => {
document.title = `Você clicou ${contador} vezes`;
}, [contador]); // Este efeito só roda quando `contador` muda
return (
<div>
<p>Você clicou {contador} vezes</p>
<button onClick={() => setContador(contador + 1)}>Clique aqui</button>
</div>
);
}
No exemplo acima, sempre que o valor do contador
muda, o título da aba do navegador é atualizado para refletir a nova contagem. O segundo argumento do useEffect
é uma lista de dependências – aqui, [contador]
– que indica que o efeito deve ser reexecutado sempre que o valor de contador
muda.
Vamos complicar um pouco com um exemplo mais avançado, onde você pode buscar dados de uma API e atualizar o estado com esses dados:
import React, { useState, useEffect } from 'react';
function DadosDaAPI() {
const [dados, setDados] = useState([]);
const [carregando, setCarregando] = useState(true);
useEffect(() => {
fetch('https://api.example.com/dados')
.then(response => response.json())
.then(data => {
setDados(data);
setCarregando(false);
});
}, []); // Efeito executado apenas uma vez após o componente ser montado
if (carregando) return <p>Carregando...</p>;
return (
<ul>
{dados.map(dado => (
<li key={dado.id}>{dado.nome}</li>
))}
</ul>
);
}
Aqui, o useEffect
é usado para buscar dados da API quando o componente é montado pela primeira vez. A lista de dependências vazia []
garante que o efeito só seja executado uma vez, como componentDidMount
em classes. Enquanto os dados são carregados, o estado carregando
é verdadeiro, e uma mensagem de carregamento é exibida.
Conclusão
Com esses exemplos, você pode ver que o useEffect
é realmente um superpoder no React. Ele ajuda a gerenciar efeitos colaterais de forma eficiente e elegante, permitindo que você mantenha seu código limpo e funcional. Então, pegue seu sabre de luz e comece a dominar o useEffect
para criar aplicações React ainda mais incríveis!