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?

Transcript

1. React States
   O passado, o presente e o que vem por aí
   @wmitrut
   Wellington Mitrut
   

   View Slide

2. Wellington Mitrut
   @wmitrut
   Software Engineer
   Blogueiro e Podcaster
   Open Culture
   Cerveja
   Gatos
   Javascript e seus derivados
   Fora Bolsonaro Tome Vacina Tome Vacina
   

   View Slide

3. React === State;
   2013
   

   View Slide

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

   View Slide

5. O que é ESTADO?
   

   View Slide

6. View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

12. URL State
    (Rotas, query params)
    

    View Slide

13. State machines
    (modelos lógicos da mudança de estado - if, else, if
    ternário, etc…)
    

    View Slide

14. Cada componente sozinho tem seu estado,
    mas um estado sozinho quase sempre quer
    dizer NADA.
    

    View Slide

15. flux;
    2014
    (Muitas libs, mas muitas mesmo…)
    

    View Slide

16. Redux;
    2015
    

    View Slide

17. Pessoas que sabem Redux Pessoas que sabem Redux
    

    View Slide

18. View Slide

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

    View Slide

20. View Slide

21. View Slide

22. ReactContext !== state_management_library;
    

    View Slide

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

    View Slide

24. React e Complexidade;
    HOJE
    

    View Slide

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

    View Slide

26. HOJE
    

    View Slide

27. State Management Libraries;
    HOJE
    Jotai
    MobX
    Akita
    Hookstate
    Recoil
    Zustand
    Valtio
    Latios
    Rematch
    Recollect
    Ridge Arceus
    Particule
    

    View Slide

28. Por que tantas?
    

    View Slide

29. View Slide

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

    View Slide

31. E o server-side?
    

    View Slide

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
    

    View Slide

33. setStatesFuture(null);
    Futuro
    

    View Slide

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

    View Slide

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

    View Slide

36. useSelectedContext();
    (É como um useMemo mas você não quer morrer após usá-lo)
    

    View Slide

37. Obrigado
    blog.wmitrut.co
    @wmitrut
    Wellington Mitrut
    

    View Slide