Slide 1
Slide 1 text
React States
O passado, o presente e o que vem por aí
@wmitrut
Wellington Mitrut
Slide 2
Slide 2 text
Wellington Mitrut
@wmitrut
Software Engineer
Blogueiro e Podcaster
Open Culture
Cerveja
Gatos
Javascript e seus derivados
Fora Bolsonaro Tome Vacina Tome Vacina
Slide 3
Slide 3 text
React === State;
2013
Slide 4
Slide 4 text
Uma UI que REAGE às mudanças de ESTADO;
Slide 5
Slide 5 text
O que é ESTADO?
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
Quando se trata de React, estado pode
ser muitas coisas
Slide 8
Slide 8 text
UI State
(dark mode, toggle, modal, cor, botões)
Slide 9
Slide 9 text
Mas ao longo dos anos conforme
aprendemos mais sobre web,SPAs,PWAs…
Slide 10
Slide 10 text
Server Cache State
(Chamada de API, salvar resultados, utiliza-los)
Slide 11
Slide 11 text
Form State
(Carregando, enviando, desabilitado, validação, reenviar)
Slide 12
Slide 12 text
URL State
(Rotas, query params)
Slide 13
Slide 13 text
State machines
(modelos lógicos da mudança de estado - if, else, if
ternário, etc…)
Slide 14
Slide 14 text
Cada componente sozinho tem seu estado,
mas um estado sozinho quase sempre quer
dizer NADA.
Slide 15
Slide 15 text
flux;
2014
(Muitas libs, mas muitas mesmo…)
Slide 16
Slide 16 text
Redux;
2015
Slide 17
Slide 17 text
Pessoas que sabem Redux Pessoas que sabem Redux
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
React Context;
2016
(Deus abençoe o React 16)
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
ReactContext !== state_management_library;
Slide 23
Slide 23 text
React Hooks;
2019
(useState, useEffect, useReducer e custom hooks)
Slide 24
Slide 24 text
React e Complexidade;
HOJE
Slide 25
Slide 25 text
State Machines;
HOJE
(useReducer, Redux, xState)
Slide 26
Slide 26 text
HOJE
Slide 27
Slide 27 text
State Management Libraries;
HOJE
Jotai
MobX
Akita
Hookstate
Recoil
Zustand
Valtio
Latios
Rematch
Recollect
Ridge Arceus
Particule
Slide 28
Slide 28 text
Por que tantas?
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
Estados Complexos !== 3rd Party Lib;
Slide 31
Slide 31 text
E o server-side?
Slide 32
Slide 32 text
A Vercel apresentou o SWR, existe também o
React Query, se você está utilizando
GraphQL, a melhor saída pode ser o Apollo
Slide 33
Slide 33 text
setStatesFuture(null);
Futuro
Slide 34
Slide 34 text
A tendência do React é sempre absorver as
boas práticas
Slide 35
Slide 35 text
useReducer tem um problema, ele pode
levar a muitas renderizações
simultâneas
Slide 36
Slide 36 text
useSelectedContext();
(É como um useMemo mas você não quer morrer após usá-lo)
Slide 37
Slide 37 text
Obrigado
blog.wmitrut.co
@wmitrut
Wellington Mitrut