Share
Embed
Slide 1
Slide 1 text
7 regras
Para abstrair gerência de estado usando custom hooks
Slide 2
Slide 2 text
Talysson
@talyssonoc
beacons.ai/talyssonoc
Codeminer42
Slide 3
Slide 3 text
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
Slide 4
Slide 4 text
Exemplos de suporte à hooks em bibliotecas
- React Hooks
- Vue Composition API
- SolidJS Reactive Primitives
- Svelte Stores
- Lit Haunted
- …
Slide 5
Slide 5 text
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
Slide 6
Slide 6 text
Dados
Eventos/ações
UI
(Components)
Gerência de
estado
Casos de uso
Regras de
negócio
Serviços
Externos
Slide 7
Slide 7 text
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
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
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
Slide 10
Slide 10 text
As 7 regras
Slide 11
Slide 11 text
Todo custom hook deve obedecer às regras já
ditadas pela biblioteca usada*
1
* Cada biblioteca tem um conjunto de regras
Slide 12
Slide 12 text
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
Slide 13
Slide 13 text
2
Slide 14
Slide 14 text
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
Slide 15
Slide 15 text
3
Slide 16
Slide 16 text
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
Slide 17
Slide 17 text
4
Slide 18
Slide 18 text
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
Slide 19
Slide 19 text
5
Slide 20
Slide 20 text
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
Slide 21
Slide 21 text
6
Slide 22
Slide 22 text
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
Slide 23
Slide 23 text
7
¯\_(ツ)_/¯
Slide 24
Slide 24 text
Como projetar um custom hook?
Um exemplo passo-a-passo
Slide 25
Slide 25 text
Comece pela interface pública
O que queremos expor para quem usa o hook?
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
Quais outros dados são derivados ou dependentes destes podemos expor?
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
E então, crie a implementação interna
respeitando a interface pública e as 7 regras
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
Dados
Slide 35
Slide 35 text
Dados
Comandos/ações
Slide 36
Slide 36 text
Dados
Comandos/ações
Dados
pré-processados
Slide 37
Slide 37 text
Parte importante
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
E se precisarmos mudar a
tecnologia de gerência de
estado?
Slide 40
Slide 40 text
Mude apenas a implementação
interna do hook!
Slide 41
Slide 41 text
Exemplo: mudando de Redux
para Context API
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
Dados
Comandos/ações
Dados
pré-processados
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
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/
Slide 50
Slide 50 text
Obrigado! :)
@talyssonoc
beacons.ai/talyssonoc