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

[ReactConf Brazil 2022] 7 regras para abstrair ...

[ReactConf Brazil 2022] 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. 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
  2. Exemplos de suporte à hooks em bibliotecas - React Hooks

    - Vue Composition API - SolidJS Reactive Primitives - Svelte Stores - Lit Haunted - …
  3. 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
  4. 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
  5. 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
  6. Todo custom hook deve obedecer às regras já ditadas pela

    biblioteca usada* 1 * Cada biblioteca tem um conjunto de regras
  7. 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
  8. 2

  9. 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
  10. 3

  11. 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
  12. 4

  13. 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
  14. 5

  15. 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
  16. 6

  17. 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