Upgrade to Pro — share decks privately, control downloads, hide ads and more …

7 regras para abstrair gerência de estado usando custom hooks

7 regras para abstrair gerência de estado usando custom hooks

Talysson de Oliveira Cassiano

December 03, 2022
Tweet

More Decks by Talysson de Oliveira Cassiano

Other Decks in Technology

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
  8. None
  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
  13. 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
  15. 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
  17. 4

  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
  19. 5

  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
  21. 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?
  26. None
  27. Quais outros dados são derivados ou dependentes destes podemos expor?

  28. None
  29. None
  30. None
  31. None
  32. E então, crie a implementação interna respeitando a interface pública

    e as 7 regras
  33. None
  34. Dados

  35. Dados Comandos/ações

  36. Dados Comandos/ações Dados pré-processados

  37. Parte importante

  38. None
  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

  42. None
  43. None
  44. None
  45. None
  46. None
  47. Dados Comandos/ações Dados pré-processados

  48. None
  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