Introdução aos React Hooks — parte 1/3
Todos componentes do React são simplesmente funções. Alguns são criados com classes, mais conhecidos como stateful e/ou class components, e os outros são criados apenas com funções, também conhecidos como stateless e/ou functional components.
Além de terem sintaxes diferentes, os stateful components possuem algumas funcionalidades a mais, como state, lifecicles, constructor, this e etc, enquanto os stateless components sempre foram mais usados para criarem ‘dumbs components’, apenas pra exibição, sem muita lógica envolvida.
Mas isso está perto de mudar com a chegada dos React Hooks, que é uma nova proposta para facilitar e tornar mais flexível o desenvolvimento com o React, diminuindo a diferença entre os stateful e stateless components.
A primeira parte desse artigo se destina a explicar o conceito dos hooks e demostrar o uso de alguns deles, como;
- useState
- useEffect
- useLayoutEffect
- useReducer
O que são React Hooks
Resumindo: React Hooks são alguns métodos que dão mais poder para seus stateless components, como states próprios e independentes, alguns lifecicles, subscription, compartilhamento de lógica, reducers e etc, como mágica.
Mas dando um passo pra trás para você entender qual problema ele resolve, quando aprendemos a desenvolver com o React, nós entendemos como os componentes e seu fluxo de dados em cascata, de cima pra baixo, nos ajuda a organizar grandes telas em pequenas, independentes e reutilizáveis partes. Porém, nós não podemos podemos quebrar a complexidade dos componentes quando sua lógica depende de States e lifecicles. Simplesmente não podemos abstrair isso para uma função ou outro componente.
Esse é o caso mais comum, mas também existem animações, tratamento de formulário, consulta de uma API externa, etc. Quando tentamos resolver esses problemas, geralmente acabamos com:
- Grandes componentes, difíceis de testar e manter.
- Lógicas duplicadas entre componentes e lifecicles.
- Complexos padrões como render props e higher-order-component.
É exatamente com isso que os React Hooks podem te ajudar. A quantidade de conceitos que você precisa para criar suas aplicações irão diminuir, sendo possível usar apenas funções ao invés de intercalar entre funções, stateful components, higher-order-components e render props.
Como usar os React Hooks hoje
Antes de qualquer coisa, certifique-se que você tenha uma versão além da 16.8 do React e React DOM ou simplesmente atualize a versão do seu projeto.
npm i react react-domuseState
A função mais básica dos React Hooks é o useState. Com ele você pode adicionar states em um functional stateless component (Não sei nem sei continuaram usando esse nome agora). O método useState recebe um parâmetro, que é o valor inicial do State, e devolve duas propriedades num array, o primeiro é o State em si e o segundo é o método utilizado para atualiza-lo.
useEffects
O método useEffects é sempre chamado quando o componente é montado e atualizado. Com ele você pode substituir os lifecicles componentDidMount, componentDidUpdate e componentWillUnmount. Ele executa a função que estiver dentro dele e tem um segundo parâmetro, opcional, que é um array de propriedades a serem observadas dentro do escopo do stateless component. Sempre que alguma delas é atualizada, a função é executada novamente.
Para executa-la apenas uma vez, coloque um array vazio.
Retornando uma função, ela é executada sempre quando o componente é desmontado.
useLayoutEffect
O método useLayoutEffect é idêntico ao useEffect porém funciona de forma síncrona, ele é executado sempre depois que o navegador terminar o paint do componente na tela. Você pode utilizá-lo para ler uma propriedade do DOM, mas se possível, prefira usar o useEffect para evitar de bloquear alterações visuais na tela.
useReducer
O hook useReducer é um pouco mais complexo pra explicar mas funciona exatamente igual ao reducer do Redux, com um state, swtich, dispatch, type. Caso você já tenha utilizado o Redux, irá se familiarizar. Veja no exemplo a baixo.
Demo
Você pode ver o caso de estudo que eu fiz usando React Hooks aqui e consultar o código nesse repositório.
Essa foi a primeira parte da introdução aos React Hooks, nas próximas eu irei falar mais sobre os outros métodos e conceitos, como;
- useContext.
- useCallback.
- useImperativeMethods.
- useMemo.
- useRef.
- Regras dos hooks.
- Criando seu próprio hook.
- TDD com React Hooks.
Até a próxima!
