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

React States - Passado, presente e o que vem por aí

React States - Passado, presente e o que vem por aí

States são a base do React, a biblioteca que tomou o mundo do front-end. Mas o que necessariamente é estado e qual a melhor maneira de gerenciar este tipo de propriedade?

278d0b5b8f680ac2a39bb3d8a6e21be3?s=128

Wellington Mitrut

January 13, 2022
Tweet

Transcript

  1. React States O passado, o presente e o que vem

    por aí @wmitrut Wellington Mitrut
  2. Wellington Mitrut @wmitrut Software Engineer Blogueiro e Podcaster Open Culture

    Cerveja Gatos Javascript e seus derivados Fora Bolsonaro Tome Vacina Tome Vacina
  3. React === State; 2013

  4. Uma UI que REAGE às mudanças de ESTADO;

  5. O que é ESTADO?

  6. None
  7. Quando se trata de React, estado pode ser muitas coisas

  8. UI State (dark mode, toggle, modal, cor, botões)

  9. Mas ao longo dos anos conforme aprendemos mais sobre web,SPAs,PWAs…

  10. Server Cache State (Chamada de API, salvar resultados, utiliza-los)

  11. Form State (Carregando, enviando, desabilitado, validação, reenviar)

  12. URL State (Rotas, query params)

  13. State machines (modelos lógicos da mudança de estado - if,

    else, if ternário, etc…)
  14. Cada componente sozinho tem seu estado, mas um estado sozinho

    quase sempre quer dizer NADA.
  15. flux; 2014 (Muitas libs, mas muitas mesmo…)

  16. Redux; 2015

  17. Pessoas que sabem Redux Pessoas que sabem Redux

  18. None
  19. React Context; 2016 (Deus abençoe o React 16)

  20. None
  21. None
  22. ReactContext !== state_management_library;

  23. React Hooks; 2019 (useState, useEffect, useReducer e custom hooks)

  24. React e Complexidade; HOJE

  25. State Machines; HOJE (useReducer, Redux, xState)

  26. HOJE

  27. State Management Libraries; HOJE Jotai MobX Akita Hookstate Recoil Zustand

    Valtio Latios Rematch Recollect Ridge Arceus Particule
  28. Por que tantas?

  29. None
  30. Estados Complexos !== 3rd Party Lib;

  31. E o server-side?

  32. A Vercel apresentou o SWR, existe também o React Query,

    se você está utilizando GraphQL, a melhor saída pode ser o Apollo
  33. setStatesFuture(null); Futuro

  34. A tendência do React é sempre absorver as boas práticas

  35. useReducer tem um problema, ele pode levar a muitas renderizações

    simultâneas
  36. useSelectedContext(); (É como um useMemo mas você não quer morrer

    após usá-lo)
  37. Obrigado blog.wmitrut.co @wmitrut Wellington Mitrut