@sendilkumarn
Batching is when React groups multiple state updates into
a single re-render for a better performance
Batching - What?
Slide 7
Slide 7 text
@sendilkumarn
Batching - Why?
• Better performance
• No unnecessary re-renders
• Consistent User Experience
• No weird intermediate state
Slide 8
Slide 8 text
@sendilkumarn
Batching - How it works?
Re-rendering happens here
17
Slide 9
Slide 9 text
@sendilkumarn
Batching - How it works?
Re-rendering happens here
Re-rendering happens here
17
Slide 10
Slide 10 text
@sendilkumarn
Batching - How it works?
Re-rendering happens here
18
Slide 11
Slide 11 text
@sendilkumarn
Wait!! I might need to re-render
Slide 12
Slide 12 text
@sendilkumarn
Batching - How it works?
18
Re-rendering happens here
Re-rendering happens here
Slide 13
Slide 13 text
@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.
Slide 14
Slide 14 text
@sendilkumarn
Suspense (in SSR)
Slide 15
Slide 15 text
@sendilkumarn
lets you wait for code to load & specify the
load state.
Suspense - What?
Slide 16
Slide 16 text
@sendilkumarn
Server Side Rendering generates HTML from React
Components in Server.
SSR - What?
Slide 17
Slide 17 text
@sendilkumarn
Final State
17
Slide 18
Slide 18 text
@sendilkumarn
Loading starts
17
Slide 19
Slide 19 text
@sendilkumarn
Server
Fetch Data
Render HTML
17
Slide 20
Slide 20 text
@sendilkumarn
Client receiving
updates
HTML First
17
Slide 21
Slide 21 text
@sendilkumarn
No interactions
possible
17
Slide 22
Slide 22 text
@sendilkumarn
Hydrate
17
Slide 23
Slide 23 text
@sendilkumarn
SSR - How it works?
17
Finish Fetch
Finish loading
Finish Hydrate
Then Interact
Slide 24
Slide 24 text
@sendilkumarn
SSR - How it works?
renderToString
17
Slide 25
Slide 25 text
@sendilkumarn
SSR - How it works?
renderToString
18
renderToPipeableStream
Streaming HTML
Oh Yeah!!
Slide 26
Slide 26 text
@sendilkumarn
SSR - How it works?
18
Slide 27
Slide 27 text
@sendilkumarn
Suspense in SSR - How it works?
Server Side
Rendered
18
Slide 28
Slide 28 text
@sendilkumarn
Suspense in SSR - How it works?
Suspend the load
18
Slide 29
Slide 29 text
@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
Slide 30
Slide 30 text
@sendilkumarn
Suspense in SSR - Gotchas
• Hydration happens within the context
• Always Parent-
fi
rst order
• React holds o
ff
from dispatching events until the entire parent tree
• Opt-in component
Slide 31
Slide 31 text
@sendilkumarn
Server Components
Slide 32
Slide 32 text
@sendilkumarn
Server Components are React Components and they will run
on the server.
Server Components - What?
Slide 33
Slide 33 text
@sendilkumarn
⚠
Not yet
Production ready!!!
Slide 34
Slide 34 text
@sendilkumarn
Server Components - How it works?
*.server.js *.client.js
*.js
Slide 35
Slide 35 text
@sendilkumarn
Server Components - How it works?
🏃
Server
Runs only on Server
Slide 36
Slide 36 text
@sendilkumarn
Server Components - How it works?
Server
Runs only on Server
Database
FileSystem
APIs
Faster…
Slide 37
Slide 37 text
@sendilkumarn
Server Components - How it works?
Dependencies / libraries are free
Server rendering will
remove these dependencies
Only rendered HTML will
go to the client
Slide 38
Slide 38 text
@sendilkumarn
Server Components - How it works?
No Interactivity
🚫
No Use State
No User Events
✅
Import client.js
Send in props
Slide 39
Slide 39 text
@sendilkumarn
Server Components
React-fetch
React-fs
React-pg