{"id":60398,"date":"2023-08-22T04:57:30","date_gmt":"2023-08-22T07:57:30","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=60398&post_type=knowledgebase&preview_id=60398"},"modified":"2025-10-01T17:01:48","modified_gmt":"2025-10-01T20:01:48","slug":"react-useeffect","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/react-useeffect\/","title":{"rendered":"Desmistificando o Hook useEffect do React"},"content":{"rendered":"

O React<\/a> \u00e9 uma das bibliotecas JavaScript<\/a> mais populares para a cria\u00e7\u00e3o de interfaces de usu\u00e1rio. Ao criar essas interfaces, voc\u00ea pode precisar executar efeitos colaterais, como buscar dados de uma API<\/a>, assinar eventos ou manipular o DOM.<\/p>\n

\u00c9 aqui que entra o poderoso Hook useEffect<\/code>. Ele permite que voc\u00ea lide com esses efeitos colaterais de forma declarativa e eficiente, garantindo que sua interface de usu\u00e1rio permane\u00e7a responsiva e atualizada.<\/p>\n

Quer voc\u00ea seja novo no React ou um desenvolvedor<\/a> experiente, entender e dominar o useEffect<\/code> \u00e9 essencial para criar aplicativos robustos e din\u00e2micos. Neste artigo, voc\u00ea aprender\u00e1 como o Hook useEffect<\/code> funciona e como us\u00e1-lo em seu projeto React.
\n

<\/div><\/kinsta-auto-toc><\/p>\n

O que \u00e9 efeito colateral no React?<\/h2>\n

Ao trabalhar com componentes React, h\u00e1 momentos em que precisamos interagir com entidades ou executar a\u00e7\u00f5es fora do escopo do React. Essas intera\u00e7\u00f5es externas s\u00e3o conhecidas como efeitos colaterais<\/strong>.<\/p>\n

No React, a maioria dos componentes s\u00e3o fun\u00e7\u00f5es puras, o que significa que eles recebem entradas (props) e produzem uma sa\u00edda previs\u00edvel (JSX), como visto no exemplo abaixo:<\/p>\n

export default function App() {\n  return <User userName=\"JaneDoe\" \/>   \n}\n  \nfunction User(props) {\n  return <h1>{props.userName}<\/h1>; \/\/ John Doe\n}<\/code><\/pre>\n
No entanto, os efeitos colaterais n\u00e3o s\u00e3o previs\u00edveis porque envolvem intera\u00e7\u00f5es fora do escopo normal do React.<\/p>\n
Considere um exemplo em que voc\u00ea deseja alterar dinamicamente o t\u00edtulo da aba do navegador para exibir o endere\u00e7o userName<\/code> do usu\u00e1rio. Embora possa ser tentador fazer isso diretamente no componente, n\u00e3o \u00e9 a abordagem recomendada porque isso \u00e9 considerado um efeito colateral:<\/p>\n
const User = ({ userName }) => {\n  document.title = `Hello ${userName}`; \/\/ \u274cNever do this in the component body \u2014 It is a side effect.\n\n  return <h1>{userName}<\/h1>;\n}<\/code><\/pre>\n
A execu\u00e7\u00e3o de efeitos colaterais diretamente no corpo do componente pode interferir no processo de renderiza\u00e7\u00e3o do nosso componente React.<\/p>\n
Para evitar interfer\u00eancia, voc\u00ea deve separar os efeitos colaterais para que eles sejam renderizados ou funcionem somente ap\u00f3s a renderiza\u00e7\u00e3o do nosso componente, garantindo uma separa\u00e7\u00e3o clara entre o processo de renderiza\u00e7\u00e3o e quaisquer intera\u00e7\u00f5es externas necess\u00e1rias. Essa separa\u00e7\u00e3o \u00e9 feita com o Hook useEffect<\/code>.<\/p>\n
Entendendo os princ\u00edpios b\u00e1sicos do useEffect<\/h2>\n
O hook useEffect<\/code> foi projetado para imitar m\u00e9todos de ciclo de vida como componentDidMount<\/code>, componentDidUpdate<\/code> e componentWillUnmount<\/code> encontrados em componentes de classe.<\/p>\n
Para usar o useEffect<\/code>, voc\u00ea precisar\u00e1 import\u00e1-lo do “react” e, em seguida, cham\u00e1-lo em um componente<\/a> de fun\u00e7\u00e3o (no n\u00edvel superior do componente). Ele recebe dois argumentos: uma fun\u00e7\u00e3o de callback e um array de depend\u00eancia opcional.<\/p>\n
useEffect(callbackFn, [dependencies]);<\/code><\/pre>\n
Isso pode ser melhor escrito como:<\/p>\n
useEffect(() => {\n  \/\/ code to run when the effect is triggered\n}, [dependencies]);<\/code><\/pre>\n