Simulando funções de ciclo de vida com useEffect()

Pra quem estudou react antigamente e não vem acompanhando muito bem o desenrolar da lib não está muito "antenado" nas coisas mais iradas que ela tem trazido. Uma das coisas que eu pessoalmente acho mais daora no react ultimamente são os React Hooks.

Os hook são formas mais fáceis e menos verbosas de fazer coisas como manipulação de estados dos componentes, controlar ciclos de vida etc, você pode saber mais aqui https://pt-br.reactjs.org/docs/hooks-intro.html

Um hook que fez bastante diferença foi o useEffect, com useEffect podemos basicamente simular algumas funções de controle de ciclo de vida do nosso componente quando usavamos classes pra faze-los, são essas funções: componentDidMount, componentDidUpdate e componentWillUnmount.

Então Vamos ao código.

Para simularmos o componentDidMount e componentDidUpdate podemos usar o useEffect da mesma forma e ele funcionará nos dois casos:

import { useEffect } from 'react'

useEffect(() => console.log('componente montado ou teve um update'), [])

Com o array de dependencias do useEffect vazio ele vai simular o didMount e didUpdate de forma fácil. Pesquise mais sobre o useEffect e verá que ele é bastante útil quando sabemos usar mais dele, principalmente passando variáveis no array de dependências.

Para simularmos componentWillUnmount usamos da seguinte forma:

import { useEffect } from 'react'

useEffect(() => {
  return () => console.log('componente sendo desmontado :(')
}, [])

quando passamos uma função para o return do useEffect, ele executa a função quando desmontar o componente.

Enfim, fácil, não é ? Recomendo muito você pesquisar mais sobre os React Hooks em geral, será bem útil se quiser se aprofundar mais no React moderno. Te vejo na próxima.