Batching, Suspense, and Server Components

@sendilkumarn Batching, Suspense & Server Components React 18 is here…

@sendilkumarn @sendilkumarn @sendilkumarn

@sendilkumarn React 18 🎊 Welcome to adulthood React!!!

@sendilkumarn Agenda • Batching • What, Why, & How? •
Gotchas • Suspense in SSR • What, Why, & How? • Gotchas • Server Components • What, Why, & How? • Gotchas

@sendilkumarn Batching

@sendilkumarn Batching is when React groups multiple state updates into
a single re-render for a better performance Batching - What?

@sendilkumarn Batching - Why? • Better performance • No unnecessary
re-renders • Consistent User Experience • No weird intermediate state

@sendilkumarn Batching - How it works? Re-rendering happens here 17

@sendilkumarn Batching - How it works? Re-rendering happens here Re-rendering
happens here 17

@sendilkumarn Batching - How it works? Re-rendering happens here 18

@sendilkumarn Wait!! I might need to re-render

@sendilkumarn Batching - How it works? 18 Re-rendering happens here
Re-rendering happens here

@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.

@sendilkumarn Suspense (in SSR)

@sendilkumarn <Suspense /> lets you wait for code to load
& specify the load state. Suspense - What?

@sendilkumarn Server Side Rendering generates HTML from React Components in
Server. SSR - What?

@sendilkumarn Final State 17

@sendilkumarn Loading starts 17

@sendilkumarn Server Fetch Data Render HTML 17

@sendilkumarn Client receiving updates HTML First 17

@sendilkumarn No interactions possible 17

@sendilkumarn Hydrate 17

@sendilkumarn SSR - How it works? 17 Finish Fetch Finish
loading Finish Hydrate Then Interact

@sendilkumarn SSR - How it works? renderToString 17

@sendilkumarn SSR - How it works? renderToString 18 renderToPipeableStream Streaming
HTML Oh Yeah!!

@sendilkumarn SSR - How it works? 18 <Suspense />

@sendilkumarn Suspense in SSR - How it works? <Layout> <Header
/> <Main> <Post /> <Comments /> </Main> <Footer /> </Layout> Server Side Rendered 18

@sendilkumarn Suspense in SSR - How it works? <Layout> <Header
/> <Main> <Post /> <Suspense> <Comments /> </Suspense> </Main> <Footer /> </Layout> Suspend the load 18

@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

@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

@sendilkumarn Server Components

@sendilkumarn Server Components are React Components and they will run
on the server. Server Components - What?

@sendilkumarn ⚠ Not yet Production ready!!!

@sendilkumarn Server Components - How it works? *.server.js *.client.js *.js

@sendilkumarn Server Components - How it works? 🏃 Server Runs
only on Server

@sendilkumarn Server Components - How it works? Server Runs only
on Server Database FileSystem APIs Faster…

@sendilkumarn Server Components - How it works? Dependencies / libraries
are free Server rendering will remove these dependencies Only rendered HTML will go to the client

@sendilkumarn Server Components - How it works? No Interactivity 🚫
No Use State No User Events ✅ Import client.js Send in props

@sendilkumarn Server Components React-fetch React-fs React-pg

@sendilkumarn Questions

@sendilkumarn Thanks

Batching, Suspense, and Server Components

Batching, Suspense, and Server Components

More Decks by Sendil Kumar N

Other Decks in Programming

Featured

Transcript