Primeiros passos com React Hooks — useState.
Nessa serie de artigos vamos falar sobre os novos hooks disponibilizados na versão 16.8 do React.
Abaixo a apresentação completa no ReactConf.
Introdução
Hoje vamos falar sobre useState o novo hook para controle de estado nos componentes React.
UseState é uma nova forma de definir e atualizar (mutar) o estado “interno ”de um componente. Mais limpo e menos verboso esse é com certeza um dos melhores hooks lançados nessa versão 16.8.
Comparações
Vamos ao exemplo clássico do componente de Login.
Nesse exemplo iremos criar um object no nosso state com duas props “username” e “password” que serão
responsáveis por guardar as informações de login do usuário.
Para facilitar as coisas, no input iremos colocar o id com o mesmo nome do state que definimos, com isso vamos conseguir reutilizar a função de handleChange para atualizar (mutar) os estados com as informações que o usuário digitar.
Pensando nas versões anteriores do React, como nosso componente necessita de um estado “interno” vamos criar nosso clássico ClassComponent.
Agora, a mesma implementação usando o hook useState.
Note que agora não se torna necessário a criação de um ClassComponent para gerenciar o estado “interno” do componente.
Vamos olhar para esse componente
Line 4: Definimos um valor inicial para nosso estado.
Line 5: Definimos duas consts, uma que será responsável por guardar o valor do estado (formData) e outra que será a function que vai atualizar (mutar) o estado (setFormData). O useState vai ser o responsável por atribuir e gerenciar essas consts.
Line 7: Na função de handleChange vamos usar a function setFormData para atualizar (mutar) o estado conforme o usuário digitar.
Notaram como ficou mais simples ?
Não precisamos mais de um class component para implementar um component stateful. Com essa implementação simples já conseguimos notar o poder desse hook.
Por debaixo do capô
Agora vamos ver um pouco de como o hook useState funciona internamente no React.
Inicialização
Primeiro é criado 2 arrays: ‘setters’ e ‘state’.
Definimos o cursor para 0.
Primeira renderização
Na primeira renderização do componente cada chamada de useState() envia uma function setter (que ficará ligada a uma posição do cursor) na matriz de setters e, em seguida, envia um estado para a matriz de state.
Próxima Renderização
Cada renderização o cursor é redefinido e os valores são recuperados de cada matriz.
Event handling
Cada function setter tem uma referencia dentro da matriz, portanto, ao chamar a function setter ela alterará o valor do state na mesma posição da matriz.
Nem tudo são flores…
Existem alguns cuidados que é preciso ter para evitar a má renderização do componente, o time do React escreveu algumas regras e cuidados que devemos tomar na hora de usar os hooks.
Uma ótima leitura também é o artigo do Rudi Yardley, que explica um pouco sobre a implementação do useState().
Conclusão
Os hooks vieram para ficar!
Com essa implementação simples, conseguimos ver o poder e a forma de usar o useState() e como ele funciona por “debaixo dos panos”.
Existem cuidados a ser tomados como qualquer outra implementação.
No próximo artigo da serie vamos falar um pouco sobre useEffect.
Referencias:
hooks-rules: https://reactjs.org/docs/hooks-rules.html
React hooks: not magic, just arrays: https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e
