React além desse mundo

Arquitetura, desempenho e cache.

Transcript

1. VIVAWORKS Arquitetura Desempenho Cache NIKOLAYEVSK404
2. VIVAWORKS Arquitetura Desempenho Cache DEV GAMER GUITAR PLAYER NIKOLAYEVSK404
3. VIVAWORKS Arquitetura Desempenho NIKOLAYEVSK404 FASE 1 Como estruturar componentes, hooks, estados e rotas de forma escalável. FASE 2 Formas de reduzir re-renderizações, lazy loading, memoização, virtualização. FASE 3 Armazenar dados para evitar fetchs repetidos, usando React Query ou SWR. Cache BOSS App React devagar e desorganizado, que recalcula e busca dados desnecessariamente
4. NIKOLAYEVSK404 VIVAWORKS Arquitetura Desempenho Cache
5. NIKOLAYEVSK404 VIVAWORKS Arquitetura Desempenho Cache
6. VIVAWORKS Arquitetura Desempenho NIKOLAYEVSK404 COMECAR Cache
7. NIKOLAYEVSK404 VIVAWORKS Arquitetura Desempenho Cache
8. Cuidam apenas do visual Cuidam de regra e dos dados. NIKOLAYEVSK404 VIVAWORKS UI COMPONENTS SMART COMPONENTS Arquitetura Desempenho Cache
9. NIKOLAYEVSK404 VIVAWORKS Arquitetura Desempenho USEFORM Hook para gerenciar estado e validação de formulários. Cache
10. NIKOLAYEVSK404 VIVAWORKS Arquitetura Desempenho USEFETCH Hook para buscar dados de APIs e gerenciar loading, erro e resultado. Cache
11. NIKOLAYEVSK404 VIVAWORKS Arquitetura Desempenho USEAUTH Hook para gerenciar a autenticação de usuário, estado logado e logout. Cache
12. NIKOLAYEVSK404 VIVAWORKS Arquitetura Desempenho Cache
13. A memoização guarda resultados entre renderizações. NIKOLAYEVSK404 VIVAWORKS MEMOIZACAO Arquitetura Desempenho Cache
14. NIKOLAYEVSK404 VIVAWORKS REACT.MEMO Arquitetura Desempenho Evita re-renders desnecessários quando props não mudam. Cache
15. NIKOLAYEVSK404 VIVAWORKS USEMEMO Arquitetura Desempenho Recalcula apenas quando dependências mudam. Cache
16. NIKOLAYEVSK404 VIVAWORKS USECALLBACK Arquitetura Desempenho Passa callbacks a componentes filhos sem recriar cada render. Cache
17. NIKOLAYEVSK404 VIVAWORKS Arquitetura Desempenho CODE SPLITTING REACT.LAZY Técnica para dividir seu bundle em pedaços menores, carregando o que precisa. Carrega componentes de forma assíncrona apenas quando forem realmente usados. Cache
18. NIKOLAYEVSK404 VIVAWORKS Arquitetura Desempenho Cache
19. NIKOLAYEVSK404 VIVAWORKS Arquitetura Desempenho CACHE Cache Hooks que armazenam dados em cache e permitem atualizar/revalidar automaticamente.
20. NIKOLAYEVSK404 VIVAWORKS Arquitetura Desempenho REACT QUERY Cache Mais controle sobre estados e manipulação de dados mutáveis.
21. NIKOLAYEVSK404 VIVAWORKS Arquitetura Desempenho SWR Cache Mais minimalista, ótimo para fetch simples.
22. NIKOLAYEVSK404 VIVAWORKS Arquitetura Desempenho Cache
23. VIVAWORKS Arquitetura Desempenho NIKOLAYEVSK404 Cache