[ReactConf Brazil 2022] 7 regras para abstrair gerência de estado usando custom hooks

Transcript

1. 7 regras Para abstrair gerência de estado usando custom hooks
2. Talysson @talyssonoc beacons.ai/talyssonoc Codeminer42
3. O que são hooks? Uma funcionalidade* que permite que você isole, reuse e componha lógica stateful (com estado), desacoplando complexidades de UI da gerência deste estado * Não é exclusiva do React
4. Exemplos de suporte à hooks em bibliotecas - React Hooks - Vue Composition API - SolidJS Reactive Primitives - Svelte Stores - Lit Haunted - …
5. O que são custom hooks? - O suporte a hooks se dá através de uma série de primitivas - useState, computed, createSignal, writable, … - Sempre que usamos estas primitivas para criar uma abstração reusável, dizemos que é um custom hook - Existem várias aplicações para eles, inclusive abstrair gerência de estado
6. Dados Eventos/ações UI (Components) Gerência de estado Casos de uso Regras de negócio Serviços Externos
7. Dados Eventos/ações UI (Components) Gerência de estado Casos de uso Regras de negócio Serviços Externos h o o k s
9. Por que usar? - Maior composabilidade e padronização de uso do estado - Separação clara de responsabilidades entre UI e estado - Maior flexibilidade para alterar UI e estado isoladamente - Maior clareza no código
10. As 7 regras
11. Todo custom hook deve obedecer às regras já ditadas pela biblioteca usada* 1 * Cada biblioteca tem um conjunto de regras
12. Um custom hook não deve revelar qual tecnologia de gerência de estado está sendo usada internamente, exportando apenas propriedades que dizem respeito ao estado e nomeando conformemente 2
14. Quem usa um custom hook não deve se responsabilizar pelo estado inteiro, as funções exportadas não devem ser simples setters, mas sim comandos do domínio 3
16. 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 * 4 * Evitar que dois custom hooks se sobreponham
18. Um componente não deve depender do retorno de um comando exposto por um custom hook * 5 * Os dados atualizados são acessados apenas quando o componente é re-renderizado
20. Se você precisa de dados gerados a partir do processamento de regras de negócio sobre o estado, estes dados devem ser processados dentros dos custom hooks responsável por aquela parte do estado 6
22. Funções que implementam regras de negócio não necessariamente 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 7
23. 7 ¯\_(ツ)_/¯
24. Como projetar um custom hook? Um exemplo passo-a-passo
25. Comece pela interface pública O que queremos expor para quem usa o hook?
27. Quais outros dados são derivados ou dependentes destes podemos expor?
32. E então, crie a implementação interna respeitando a interface pública e as 7 regras
34. Dados
35. Dados Comandos/ações
36. Dados Comandos/ações Dados pré-processados
37. Parte importante
39. E se precisarmos mudar a tecnologia de gerência de estado?
40. Mude apenas a implementação interna do hook!
41. Exemplo: mudando de Redux para Context API
47. Dados Comandos/ações Dados pré-processados
49. Links - https://blog.codeminer42.com/scalable-frontend-1-architecture- 9b80a16b8ec7/ - https://beta.reactjs.org/learn/reusing-logic-with-custom-hooks - https://react-redux.js.org/api/hooks - https://vuejs.org/guide/extras/composition-api-faq.html - https://www.solidjs.com/docs - https://svelte.dev/docs#run-time-svelte-store - https://hauntedhooks.netlify.app/
50. Obrigado! :) @talyssonoc beacons.ai/talyssonoc