React Hooks

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. Utilizando a abordagem tradicional do React teríamos algo assim:

Essa seria a abordagem mínima para conseguirmos controlar a aparição do modal em tela utilizando o estado do React. Quando utilizamos os hooks nós simplesmente evitamos a verbosidade desnecessária que toda essa criação do state nos dá, ficando com um código como o seguinte:

Veja que utilizamos o hook useState para declarar um estado em um componente criado em formato de função. A função useState recebe por parâmetro o valor padrão do nosso estado e retorna o valor do estado em si e uma função que altera esse valor.

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.

Veja um exemplo de utilização de dois render props em um único componente:

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, veja um exemplo do site da Netflix que utiliza React ainda sem os hooks:

Veja que os elementos AppContextProvider, ConnectToApps, LayoutContext, DetectFonts são tudo fruto de contextos criados através dos patterns de HOC's e Render Props (com o hooks não precisaríamos de nenhum deles).