Code Splitting na era do Concurrent Rendering

Transcript

2. Code Splitting na era do Concurrent Rendering Ou, como o React Fiber vai deixar o carregamento da sua página mais rápido
3. Cesar de Barros Front End @ Concrete Cachorro > Gente https://github.com/cbsorrilha https://www.linkedin.com/in/cbsorrilha/
4. Índice ◦ Performance & Code Splitting ◦ React.lazy & React.Suspense ◦ Mas e a parte do Concurrent Rendering? ◦ Conclusão
5. Performance & Code Splitting
6. Boa Perfomance == Boa UX
7. Usuarios ficam tristes com páginas lentas :(
9. Code Splitting == Boa Perfomance
11. Importando módulos dinamicamente import(‘module.js’).then((module) => { module.default(); });
12. React.lazy & React.Suspense
13. A função React.lazy permite que você renderize um componente importado dinamicamente como um componente comum.
14. React.lazy() em ação // importando um componente num dia comum. import NormalComponent from './NormalComponent'; function MyComponent() { return ( <div> <NormalComponent /> </div> ); } // importando um componente num dia ‘preguiçoso’ :o const LazyComponent = React.lazy(() => import('./LazyComponent')); function MyComponent() { return ( <div> <LazyComponent /> </div> ); }
15. EITA :(
16. O Componente React.Suspense vai suspender (duh) seu componente dinâmico até que ele termine de ser importado.
17. <React.Suspense /> import MyErrorBoundary from './MyErrorBoundary'; const LazyComponent = React.lazy(() => import('./LazyComponent')); function MyComponent() { return ( <div> <MyErrorBoundary> <React.Suspense fallback={<div>Loading...</div>}> <LazyComponent /> </React.Suspense> </MyErrorBoundary> </div> ); }
18. Mas e a parte do Concurrent Rendering?
19. React Fiber.
20. Concurrent Rendering ◦ Não bloqueia a main thread! ◦ Consegue trabalhar em multiplas tarefas alocando dinamicamente as prioridades ◦ Ações do usuário não bloqueiam o carregamento do componente.
21. Pois é. Só isso mesmo. import MyErrorBoundary from './MyErrorBoundary'; const LazyComponent = React.lazy(() => import('./LazyComponent')); function MyComponent() { return ( <div> <MyErrorBoundary> <React.Suspense maxDuration={1500} fallback={<div>Loading...</div>}> <LazyComponent /> </React.Suspense> </MyErrorBoundary> </div> ); } // A mágica acontece aqui. ReactDOM.unstable_createRoot(rootElement).render(<App />);
22. “Concurrent React promises to be high performance and deliver smooth UX, which primarily entails less transitions when loading or fetching content. All this functionality is opt-in, meaning developers do not have to adopt any of it, and adopting it will not break your current codebase.” Ross Bulat Fonte: https://medium.com/@rossbulat/react-lazy-suspense-and-concorrent-react-breakdown-with-examples-2758de98cb1c
23. Valeu, rapeize.
24. NÓS MOVEMOS O MUNDO. Centro Av. Presidente Wilson, 231 29º andar (21) 2240-2030 Cidade Monções Av. Nações Unidas, 11.541 3º andar (11) 4119-0449 Savassi Av. Getúlio Vargas, 671 Sala 800 - 8º andar (31) 3360-8900 Ilha do Leite Rua Sen. José Henrique, 199 2º andar (81) 3018-6299 WWW.CONCRETE.COM.BR