Share
Embed
Slide 1
Slide 1 text
Desacoplando
gerência de estado do
resto da aplicação
com custom hooks
Slide 2
Slide 2 text
Talysson / @talyssonoc.
beacons.page/talyssonoc.
Webdev na Codeminer42.
Slide 3
Slide 3 text
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
Slide 4
Slide 4 text
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
Slide 5
Slide 5 text
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
Slide 6
Slide 6 text
h
o
o
k
s
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
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
Slide 10
Slide 10 text
Ok,mas como?
Slide 11
Slide 11 text
As 7 regras
Slide 12
Slide 12 text
Regra #1
Todo custom hook deve obedecer às regras já
ditadas pela biblioteca usada*
* Cada biblioteca tem seu conjunto de regras
Slide 13
Slide 13 text
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
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
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
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
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
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
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
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
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
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
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
Slide 24
Slide 24 text
¯\_(ツ)_/¯
Slide 25
Slide 25 text
Um exemplo em passo-a-passo
* Faremos o hook useArticles como exemplo
Slide 26
Slide 26 text
Comece pela interface pública
O que queremos expor para quem usar o hook?
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
Quais outros dados são derivados ou
dependentes destes que podemos expor?
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
E então crie a implementação
interna respeitando
a interface pública
Slide 31
Slide 31 text
Dados
Comandos/ações
Dados
pré-processados
Slide 32
Slide 32 text
Parte importante
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
E se precisarmos mudar a
tecnologia de gerência de estado?
Slide 35
Slide 35 text
Mude apenas a implementação
interna do hook!
Slide 36
Slide 36 text
Exemplo: mudando de Redux
para Context API
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
Dados
Comandos/ações
Dados
pré-processados
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
Como testar?
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
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/
Slide 43
Slide 43 text
Perguntas?.
Talysson / @talyssonoc.
beacons.page/talyssonoc.
Slide 44
Slide 44 text
Obrigado!.
Talysson / @talyssonoc.
beacons.page/talyssonoc.