Com a chegada dos Hooks adicionado no React 16.8, bastante coisa mudou na forma de escrever nossos componentes em React. Por exemplo, podemos criar um componente funcional com estado, sendo que antes apenas componentes de Classe poderiam ter estado. Para saber mais sobre os hooks acesse a documentação oficial, o melhor é que agora está traduzida em PT-BR !!!

Ciclo de vida

Todo componente React tem um ciclo de vida, ou seja ele é:

• Inicializado
• Montado
• Atualizado
• Desmontado

Podemos então interceptar cada um desses momentos para realizar determinadas ações em nosso componente e alterar o meio como ele é renderizado ou captar informações desse ciclo.

Podemos ver melhor essa representação na imagem abaixo:

Montagem

Esse método é executado após nosso componente ter sido criado e inserido no DOM. É muito utilizado quando precisamos pegar um dado em nossa API, por exemplo.

  //sem hooks
  componentDidMount () {
   //...
  }

  //com hooks
  useEffect(() => {
  //..
  }, []);

Atualização

Esse método é executado após uma atualização em componente. Utilizamos muito, para verificar se determinada informação foi alterada e ter alguma reação para isso.

//sem hooks
componentDidUpdate(prevProps) {
  if (this.props.name !== prevProps.name) {
    console.log("Name has changed!");
  }
}

//com hooks
useEffect(() => {
  console.log("Name has changed!");
}, [name])

Desmontagem

Esse método é executado quando o componente é desmontado da arvore do DOM. Utilizamos ele para por exemplo remover um eventListener.

//sem hooks
componentWillUnmount () {
  console.log("Component unmounted!");
}

//com hooks
useEffect(() => {
  return () => {
    console.log("Component unmounted!")
  }
}, []);

Métodos Descontinuados

Devido mal entendimento e uso, alguns métodos do ciclo de vida do React foram descontinuados, ou seja, quando o React for atualizado para a versão 17 esses métodos já não vão mais existir.

Os métodos descontinuados são:

componentWillMount () {
 //Executado antes do componente ser montado na tela
}

componentWillReceiveProps () {
 //Executado antes do componente receber novas propriedades
}

componentWillUpdate () {
 //Executado antes do componente ser atualizado
}

Conclusão

Com a chegada dos hooks vimos que muita coisa mudou e ficou muito mais simples na escrita. E esse artigo foi apenas para ajudar a conseguir entender "substituir" os ciclos de vida de componentes de classes e usar o useEffect para reproduzi-los em componentes funcionais. Para saber mais detalhes sobre o hook useEffect, recomendo acessar ao Um guia completo para useEffect de Dan Abramov.

Deixe no comentário suas dúvidas, críticas construtivas e possíveis temas para os próximos artigos!

Até a próxima !!!!