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

[RanchoDev 2021] Desacoplando gerência de estad...

[RanchoDev 2021] 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.

Talysson de Oliveira Cassiano

September 25, 2021
Tweet

More Decks by Talysson de Oliveira Cassiano

Other Decks in Programming

Transcript

  1. 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
  2. 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
  3. 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
  4. 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
  5. Regra #1 Todo custom hook deve obedecer às regras já

    ditadas pela biblioteca usada* * Cada biblioteca tem seu conjunto de regras
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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/