[RanchoDev 2021] Desacoplando gerência de estado do resto da aplicação com custom hooks

Gerência de estado é uma parte fundamental em qualquer aplicação frontend, independente de qual biblioteca de UI (React, Vue, Angular, ...) ou da escala do projeto. Uma parte ainda mais importante é fazer com que esta gerência de estado não cause acoplamento com as outras partes do código, tornando difícil mudar de abordagem caso o projeto cresça. Nesta talk falaremos como o uso de custom hooks (não só com React) pode promover este desacoplamento, deixando o resto da sua aplicação crescer de maneira independente da gerência de estado.

Transcript

1. Desacoplando gerência de estado do resto da aplicação com custom hooks
2. Talysson / @talyssonoc. beacons.page/talyssonoc. Webdev na Codeminer42.
3. O que são hooks? Uma funcionalidade* que permite que você isole, reuse e componha lógica stateful, desacoplando complexidades de UI da gerência do estado * Não é exclusiva do React
4. Não é exclusivo de uma única biblioteca ➔ React: Hooks ➔ Vue: Composition API ➔ Qualquer outra biblioteca que tenha alguma funcionalidade que se encaixa na descrição
5. O que são custom hooks? ➔ Para suportar hooks, as bibliotecas precisam disponibilizar uma série de primitivas (useState, computed, …) ➔ Sempre que você usa estas primitivas para criar um novo hook reusável, dizemos que é um custom hook ➔ Tem várias utilidades, inclusive abstrair o estado
6. h o o k s
9. Porque usar? ➔ Maior composibilidade e padronização no uso do estado ➔ Separação clara de responsabilidades entre UI e estado ➔ Ganhando em clareza e manutenibilidade do código
10. Ok,mas como?
11. As 7 regras
12. Regra #1 Todo custom hook deve obedecer às regras já ditadas pela biblioteca usada* * Cada biblioteca tem seu conjunto de regras
13. Regra #2 Um custom hook não deve revelar qual tecnologia de gerência de estado está sendo usada internamente, exportando apenas atributos que dizem respeito ao estado e nomeando conformemente
15. Regra #3 Quem usa um custom hook não deve saber detalhes sobre o formato do estado como um todo, as funções exportadas não devem ser simples setters, mas sim comandos do domínio
17. Regra #4 Custom hooks não devem ser responsáveis por uma parte muito grande do estado, devem ser focados em uma parte específica e o mais ortogonais o possível entre si* * Evitar que dois custom hooks se sobreponham
19. Regra #5 Um componente não deve depender do retorno de um comando exposto por um custom hook* * Os dados atualizados são acessados apenas quando o componente é re-renderizado
21. Regra #6 Se você precisa de dados pré-processados resultados de lógicas de negócio, estes dados devem processados em um custom hook que lida com aquela parte do estado
23. Regra #7 Funções que implementam regras de negócio não precisam ser expostas através de um custom hook, é permitido aos componentes importar funções do domínio, mantendo os custom hooks focados em expor dados e comandos
24. ¯\_(ツ)_/¯
25. Um exemplo em passo-a-passo * Faremos o hook useArticles como exemplo
26. Comece pela interface pública O que queremos expor para quem usar o hook?
28. Quais outros dados são derivados ou dependentes destes que podemos expor?
30. E então crie a implementação interna respeitando a interface pública
31. Dados Comandos/ações Dados pré-processados
32. Parte importante
34. E se precisarmos mudar a tecnologia de gerência de estado?
35. Mude apenas a implementação interna do hook!
36. Exemplo: mudando de Redux para Context API
38. Dados Comandos/ações Dados pré-processados
40. Como testar?
42. Links ➔ Introduction to hooks: reactjs.org/docs/hooks-intro.html ➔ React-redux hooks: react-redux.js.org/api/hooks ➔ Vue Composition API: v3.vuejs.org/guide/composition-api-introduction.html ➔ Scalable Frontend: blog.codeminer42.com/category/scalable-frontend/
43. Perguntas?. Talysson / @talyssonoc. beacons.page/talyssonoc.
44. Obrigado!. Talysson / @talyssonoc. beacons.page/talyssonoc.