# Hooks de efeito no Reat > [!NOTE] Hooks de efeito no Reat > Hooks de efeito no [[React]], representados principalmente pelo `useEffect()`, são funções que permitem que componentes de função realizem "efeitos colaterais" após a renderização, como buscar dados de uma [[Interface de Programação de Aplicações|API]], manipular diretamente o [[Document Object Model|DOM]], configurar assinaturas ou timers. Eles servem como um substituto unificado para os métodos de ciclo de vida de componentes de classe, como `componentDidMount`, `componentDidUpdate` e `componentWillUnmount`, permitindo que você agrupe lógica relacionada a um efeito em um único lugar e defina quando esse efeito deve ser re-executado ou limpo, tornando o gerenciamento de efeitos mais claro e conciso em componentes funcionais. **:: Referência ::** [Built-in React Hooks – React](https://react.dev/reference/react/hooks) # Notas `useEffect()`: Permite executar efeitos colaterais em componentes de função. É um substituto para `componentDidMount`, `componentDidUpdate` e `componentWillUnmount` combinados. ```jsx import React, { useState, useEffect } from 'react'; function TitleUpdater() { const [count, setCount] = useState(0); useEffect(() => { // Este efeito será executado após cada renderização document.title = `Você clicou ${count} vezes`; // Opcional: função de limpeza (como componentWillUnmount) return () => { console.log('Componente desmontado ou efeito re-executado'); }; }, [count]); // O efeito só será re-executado se 'count' mudar return ( <div> <p>Você clicou {count} vezes</p> <button onClick={() => setCount(count + 1)}> Clique aqui </button> </div> ); } ```