Batching, Suspense, and Server Components

Transcript

1. @sendilkumarn Batching, Suspense & Server Components React 18 is here…
2. @sendilkumarn @sendilkumarn @sendilkumarn
3. @sendilkumarn React 18 🎊 Welcome to adulthood React!!!
4. @sendilkumarn Agenda • Batching • What, Why, & How? • Gotchas • Suspense in SSR • What, Why, & How? • Gotchas • Server Components • What, Why, & How? • Gotchas
5. @sendilkumarn Batching
6. @sendilkumarn Batching is when React groups multiple state updates into a single re-render for a better performance Batching - What?
7. @sendilkumarn Batching - Why? • Better performance • No unnecessary re-renders • Consistent User Experience • No weird intermediate state
8. @sendilkumarn Batching - How it works? Re-rendering happens here 17
9. @sendilkumarn Batching - How it works? Re-rendering happens here Re-rendering happens here 17
10. @sendilkumarn Batching - How it works? Re-rendering happens here 18
11. @sendilkumarn Wait!! I might need to re-render
12. @sendilkumarn Batching - How it works? 18 Re-rendering happens here Re-rendering happens here
13. @sendilkumarn Batching - Gotchas • React ensures the user initiated event (like click / keypress) is properly handled & processed before the next event. So do not worry about two submissions of a form. • React only batched updates when it is safe to do.
14. @sendilkumarn Suspense (in SSR)
15. @sendilkumarn <Suspense /> lets you wait for code to load & specify the load state. Suspense - What?
16. @sendilkumarn Server Side Rendering generates HTML from React Components in Server. SSR - What?
17. @sendilkumarn Final State 17
18. @sendilkumarn Loading starts 17
19. @sendilkumarn Server Fetch Data Render HTML 17
20. @sendilkumarn Client receiving updates HTML First 17
21. @sendilkumarn No interactions possible 17
22. @sendilkumarn Hydrate 17
23. @sendilkumarn SSR - How it works? 17 Finish Fetch Finish loading Finish Hydrate Then Interact
24. @sendilkumarn SSR - How it works? renderToString 17
25. @sendilkumarn SSR - How it works? renderToString 18 renderToPipeableStream Streaming HTML Oh Yeah!!
26. @sendilkumarn SSR - How it works? 18 <Suspense />
27. @sendilkumarn Suspense in SSR - How it works? <Layout> <Header /> <Main> <Post /> <Comments /> </Main> <Footer /> </Layout> Server Side Rendered 18
28. @sendilkumarn Suspense in SSR - How it works? <Layout> <Header /> <Main> <Post /> <Suspense> <Comments /> </Suspense> </Main> <Footer /> </Layout> Suspend the load 18
29. @sendilkumarn Suspense in SSR - What’s exciting? • Load the page before all the code is loaded • Hydrate the page before all the HTML is streamed • Interacting with the page with all the components have been hydrated
30. @sendilkumarn Suspense in SSR - Gotchas • Hydration happens within the <Suspense /> context • Always Parent- fi rst order • React holds o ff from dispatching events until the entire parent tree • Opt-in component
31. @sendilkumarn Server Components
32. @sendilkumarn Server Components are React Components and they will run on the server. Server Components - What?
33. @sendilkumarn ⚠ Not yet Production ready!!!
34. @sendilkumarn Server Components - How it works? *.server.js *.client.js *.js
35. @sendilkumarn Server Components - How it works? 🏃 Server Runs only on Server
36. @sendilkumarn Server Components - How it works? Server Runs only on Server Database FileSystem APIs Faster…
37. @sendilkumarn Server Components - How it works? Dependencies / libraries are free Server rendering will remove these dependencies Only rendered HTML will go to the client
38. @sendilkumarn Server Components - How it works? No Interactivity 🚫 No Use State No User Events ✅ Import client.js Send in props
39. @sendilkumarn Server Components React-fetch React-fs React-pg
40. @sendilkumarn Questions
41. @sendilkumarn Thanks