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

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

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.

9c3d4935ec41404420633bf3e5431909?s=128

Talysson de Oliveira Cassiano

September 25, 2021
Tweet

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

  7. None
  8. None
  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
  14. None
  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
  16. None
  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
  18. None
  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
  20. None
  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
  22. None
  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?
  27. None
  28. Quais outros dados são derivados ou dependentes destes que podemos

    expor?
  29. None
  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

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

  37. None
  38. Dados Comandos/ações Dados pré-processados

  39. None
  40. Como testar?

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