Utilizar useEffect

A funcionalidade de Hooks trazida a partir da versão 16.7.0 do React visa basicamente oferecer formas de trabalharmos com estado e outras API's sem a necessidade de ter uma classe (stateful component).

Antes de falarmos mais sobre as motivações por trás dessa feature ou até mostrar exemplos mais complexos de como os hooks vão ajudar no nosso dia-a-dia, vamos entender um exemplo básico com um pouco de código.

Imagine que você tenha um Modal, no clique de um botão o modal deve aparecer, no clique de outro botão esse modal deve desaparecer

Até então, a forma mais tradicional de compartilharmos funcionamento entre componentes era pelos patterns já conhecidos, os HOC's (Higher-order components) e as render props.

O grande problema desses padrões é que você precisa modificar boa parte do código do componente para que o mesmo se adapte ao funcionamento compartilhado, aumentando sua verbosidade e perdendo boa parte do isolamento de responsabilidade, ou seja, você acaba perdendo qual parte do código faz o que.

A verbosidade desse pattern torna o código praticamente ilegível, ainda mais se tivermos um crescimento de responsabilidades desse componente com o tempo.

Além disso, os dois patterns utilizados anteriormente acabavam criando muitos níveis na renderização final do React tornando impossível uma visualização de árvore para encontrar o que é o que,