Concurrent Rendering Adventures in React 18

Maurice De Beijer [MVP]
Maurice De Beijer [MVP]The Problem Solver at ABL - The Problem Solver
Concurrent Rendering
Adventures in React 18
 Maurice de Beijer
 The Problem Solver
 Microsoft MVP
 Freelance developer/instructor
 Twitter: @mauricedb
 Web: http://www.TheProblemSolver.nl
 E-mail: maurice.de.beijer@gmail.com
2
ABL - The Problem Solver
The React
Newsletter
© ABL - The Problem Solver 3
Workshop goal
 Learn about using <Suspense /> today
 Lazy loading of data
 Nest and/or parallelize <Suspense /> components as needed
 Error handling while suspended with an <ErrorBoundary />
 Learn about using concurrent mode tomorrow
 Using createRoot() to render a React 18 application
 The what and how of React concurrent mode
 Orchestrating <Suspense /> boundaries using <SuspenseList />
 Using startTransition() and/or useTransition() to defer work
Type it out
by hand?
“Typing it drills it into your brain much better than
simply copying and pasting it.You're forming new
neuron pathways.Those pathways are going to
help you in the future. Help them out now!”
© ABL - The Problem Solver 5
Prerequisites
Install Node & NPM
Install the GitHub repository
© ABL - The Problem Solver 6
Install
Node.js & NPM
© ABL - The Problem Solver 7
Clone the
GitHub
Repository
© ABL - The Problem Solver 8
Install NPM
Packages
© ABL - The Problem Solver 9
Following
Along
 Repository:
https://github.com/mauricedb/concurrent-rendering-adventures-in-react-18
 Slides:
http://www.theproblemsolver.nl/workshop-concurrent-rendering-adventures-in-react-18.pdf
© ABL - The Problem Solver 10
React 17
Photo by VisualTag Mx on Pexels
<Suspense />
<Suspense />
 Allows React to “suspend” rendering a component subtree
 Used when a (grand) child component is not ready to be rendered
 ECMAScript bundle containing the component isn’t loaded yet
 The data needed for a component to render isn’t available yet
 The “fallback” component will be rendered instead
 Replaces the complete children component tree
 Rendering is suspended when a promise is thrown
 And resumed when the promise resolves
SWR and
Suspense
 SWR is used in the application to load data
 A convenient hook to fetch data
 SWR makes it easy to start using suspense
 Add suspense: true to the <SWRConfig />
index.tsx
UserList.tsx
AccountDetails.tsx
MovieDetails.tsx
The Result
<Suspense /> & Errors
<Suspense />
& Errors
 If a suspense resource fails to load an error is thrown
 When requesting it during the render()
 Catch the error using an ErrorBoundary
 Just like other runtime errors in React lifecycle functions
 Error boundaries can be nested
 Just like suspense boundaries
index.tsx
The Result
UserDetails.tsx
The Result
Nesting <Suspense />
Nesting
<Suspense />
 Multiple suspense components can be nested
 React will use the closest parent <Suspense /> component
 Very useful to control what part of the UI is replaced by a fallback
 👉There is a behavior change in React 18 with null fallback 👈
App.tsx
The Result
MovieDetails.tsx
The Result
Parallel <Suspense />
Parallel
<Suspense />
 Multiple suspense boundaries can suspend in parallel
 React will suspend them all and show multiple fallback components
 If you want to render a component while others are still loading
 Multiple suspending components in a single <Suspense/> is also
fine
 Will resume when all resource promises are resolved
MovieDetails.tsx
The Result
Break time
Photo by Mindspace Studio on Unsplash
React 18
Photo by cottonbro on Pexels
React 18
 React 18 is still in alpha/preview version right now
 Daily publish to NPM using the @next and the @alpha tags
 npm install react@next react-dom@next --force
package.json
index.tsx
New hooks
New hooks
 useDeferredValue()
 Returns a deferred version of the value that may lag behind
 useTransition()
 Avoid undesirable states when waiting for content
 useMutableSource()
 Enables React components to safely and efficiently read from a
mutable external source in Concurrent Mode
 Avoids tearing
 useOpaqueIdentifier()
 Can be used to generate unique ID’s in an SSR-safe way
useOpaqueIdentifier()
useOpaqueIdentifier()
 Can be used to generate unique ID’s in a SSR-safe way
 👉 Still prefixed with unstable_ 👈
 👉Will be renamed to useId() in React 18! 👈
LabelInput.tsx
The Result
Using <SuspenseList />
Orchestrating <Suspense /> boundaries
Using
<SuspenseList />
 <SuspenseList /> will let you control how multiple <Suspense />
components render their fallback
 The order in which child components show when ready
 If multiple child fallbacks components are displayed
UserDetails.tsx
The Result
Concurrent Mode
React 17
rendering
components
User click
event
Event running
React 18
Concurrent
mode
Event running
with
concurrent
mode
Using startTransition()
To defer lower priority work
Using
startTransition()
 Code in a startTransition() callback is considered low
priority
 Can be interrupted by more urgent updates
 Like user events
PrimeNumbers.tsx
The Result
Using useTransition()
To defer lower priority work and know about pending updates
Using
useTransition()
 The useTransition() hook can be used to control how React
renders when components suspend
 Prevent the fallback component being rendered immediately
 The new components will be rendered when:
 Their resources are ready
 The timeout is expired
 The “old” UI can use the isPending state when rendering
PrimeNumbers.tsx
The Result
startTransition()
vs
useTransition()
startTransition()
 Can be used anywhere
 No additional renders
useTransition()
 Needs to be used in a
functional component
 One additional render with
isPending
UI state transitions
with useTransition()
More control over how UI state updates are done
UserList.tsx (1/2)
UserList.tsx (2/2)
UserDetails.tsx
The Result
Conclusion
 You can use <Suspense /> today
 Suspend when lazily loading components and/or fetching data
 Handle error with an <ErrorBoundary />
 Nest and/or parallelize as needed
 Concurrent mode
 Coming soon to a React application near you
 Can make large applications more responsive
 Render a React 18 application using createRoot()
 Use <SuspenseList /> to orchestrate <Suspense /> components
 Defer work with startTransition() and/or useTransition()
Maurice de Beijer
@mauricedb
maurice.de.beijer
@gmail.com
© ABL - The Problem Solver 72
1 of 72

Recommended

Get Started with ReactJS 18 Development Services_ New Features and Updates.pptx by
Get Started with ReactJS 18 Development Services_ New Features and Updates.pptxGet Started with ReactJS 18 Development Services_ New Features and Updates.pptx
Get Started with ReactJS 18 Development Services_ New Features and Updates.pptxConcetto Labs
216 views15 slides
Introduction to React JS for beginners | Namespace IT by
Introduction to React JS for beginners | Namespace ITIntroduction to React JS for beginners | Namespace IT
Introduction to React JS for beginners | Namespace ITnamespaceit
1.5K views17 slides
Reactjs by
Reactjs Reactjs
Reactjs Neha Sharma
10.5K views27 slides
React js by
React jsReact js
React jsOswald Campesato
3.9K views79 slides
React Hooks by
React HooksReact Hooks
React HooksJoao Marins
594 views27 slides
Introduction to React by
Introduction to ReactIntroduction to React
Introduction to ReactRob Quick
948 views29 slides

More Related Content

What's hot

React JS and why it's awesome by
React JS and why it's awesomeReact JS and why it's awesome
React JS and why it's awesomeAndrew Hull
108K views132 slides
React Architecture & Best Practices.pptx by
React Architecture & Best Practices.pptxReact Architecture & Best Practices.pptx
React Architecture & Best Practices.pptxAleksandarKondov
194 views14 slides
React-JS Component Life-cycle Methods by
React-JS Component Life-cycle MethodsReact-JS Component Life-cycle Methods
React-JS Component Life-cycle MethodsANKUSH CHAVAN
1.7K views19 slides
Its time to React.js by
Its time to React.jsIts time to React.js
Its time to React.jsRitesh Mehrotra
3.8K views19 slides
React js by
React jsReact js
React jsJai Santhosh
26.4K views33 slides
Introduction to react js by
Introduction to react jsIntroduction to react js
Introduction to react jsAeshan Wijetunge
610 views19 slides

What's hot(20)

React JS and why it's awesome by Andrew Hull
React JS and why it's awesomeReact JS and why it's awesome
React JS and why it's awesome
Andrew Hull108K views
React Architecture & Best Practices.pptx by AleksandarKondov
React Architecture & Best Practices.pptxReact Architecture & Best Practices.pptx
React Architecture & Best Practices.pptx
AleksandarKondov194 views
React-JS Component Life-cycle Methods by ANKUSH CHAVAN
React-JS Component Life-cycle MethodsReact-JS Component Life-cycle Methods
React-JS Component Life-cycle Methods
ANKUSH CHAVAN1.7K views
Introduction to ReactJS by Knoldus Inc.
Introduction to ReactJSIntroduction to ReactJS
Introduction to ReactJS
Knoldus Inc.2.3K views
React workshop by Imran Sayed
React workshopReact workshop
React workshop
Imran Sayed1.8K views
Overview of React.JS - Internship Presentation - Week 5 by Devang Garach
Overview of React.JS - Internship Presentation - Week 5Overview of React.JS - Internship Presentation - Week 5
Overview of React.JS - Internship Presentation - Week 5
Devang Garach1.8K views
React js programming concept by Tariqul islam
React js programming conceptReact js programming concept
React js programming concept
Tariqul islam1.4K views
React JS: A Secret Preview by valuebound
React JS: A Secret PreviewReact JS: A Secret Preview
React JS: A Secret Preview
valuebound3.3K views
React + Redux Introduction by Nikolaus Graf
React + Redux IntroductionReact + Redux Introduction
React + Redux Introduction
Nikolaus Graf25.6K views
Introduction to React JS for beginners by Varun Raj
Introduction to React JS for beginners Introduction to React JS for beginners
Introduction to React JS for beginners
Varun Raj4.2K views
React Context API by NodeXperts
React Context APIReact Context API
React Context API
NodeXperts1.1K views
The virtual DOM and how react uses it internally by Clóvis Neto
The virtual DOM and how react uses it internallyThe virtual DOM and how react uses it internally
The virtual DOM and how react uses it internally
Clóvis Neto631 views

Similar to Concurrent Rendering Adventures in React 18

Getting started with React Suspense and concurrent rendering by
Getting started with React Suspense and concurrent renderingGetting started with React Suspense and concurrent rendering
Getting started with React Suspense and concurrent renderingMaurice De Beijer [MVP]
137 views57 slides
RxJava@Android by
RxJava@AndroidRxJava@Android
RxJava@AndroidMaxim Volgin
713 views21 slides
Asynchronyin net by
Asynchronyin netAsynchronyin net
Asynchronyin netSoacat Blogspot
937 views15 slides
Concurrecny inf sharp by
Concurrecny inf sharpConcurrecny inf sharp
Concurrecny inf sharpRiccardo Terrell
1.8K views76 slides
DZone_RC_RxJS by
DZone_RC_RxJSDZone_RC_RxJS
DZone_RC_RxJSLuis Atencio
226 views6 slides
Android development training programme , Day 3 by
Android development training programme , Day 3Android development training programme , Day 3
Android development training programme , Day 3DHIRAJ PRAVIN
2.9K views11 slides

Similar to Concurrent Rendering Adventures in React 18(20)

Android development training programme , Day 3 by DHIRAJ PRAVIN
Android development training programme , Day 3Android development training programme , Day 3
Android development training programme , Day 3
DHIRAJ PRAVIN2.9K views
Murach : How to work with session state and cookies by MahmoudOHassouna
Murach : How to work with session state and cookiesMurach : How to work with session state and cookies
Murach : How to work with session state and cookies
MahmoudOHassouna152 views
MeetJS Summit 2016: React.js enlightenment by Artur Szott
MeetJS Summit 2016: React.js enlightenmentMeetJS Summit 2016: React.js enlightenment
MeetJS Summit 2016: React.js enlightenment
Artur Szott665 views
Introduction To Programming IP5 by Mark Simon
Introduction To Programming IP5Introduction To Programming IP5
Introduction To Programming IP5
Mark Simon154 views
Android Best Practices - Thoughts from the Trenches by Anuradha Weeraman
Android Best Practices - Thoughts from the TrenchesAndroid Best Practices - Thoughts from the Trenches
Android Best Practices - Thoughts from the Trenches
Anuradha Weeraman1.2K views
Adding a modern twist to legacy web applications by Jeff Durta
Adding a modern twist to legacy web applicationsAdding a modern twist to legacy web applications
Adding a modern twist to legacy web applications
Jeff Durta345 views
Promises, promises, and then observables by Stefan Charsley
Promises, promises, and then observablesPromises, promises, and then observables
Promises, promises, and then observables
Stefan Charsley175 views
Андрій Рева, "How to build reactive java application" by Sigma Software
Андрій Рева, "How to build reactive java application"Андрій Рева, "How to build reactive java application"
Андрій Рева, "How to build reactive java application"
Sigma Software138 views
Reactive programming with rx java by CongTrung Vnit
Reactive programming with rx javaReactive programming with rx java
Reactive programming with rx java
CongTrung Vnit707 views
27 - Panorama Necto 14 component mode & java script - visualization & data di... by Panorama Software
27 - Panorama Necto 14 component mode & java script - visualization & data di...27 - Panorama Necto 14 component mode & java script - visualization & data di...
27 - Panorama Necto 14 component mode & java script - visualization & data di...
Panorama Software474 views
Active object of Symbian in the lights of client server architecture by Somenath Mukhopadhyay
Active object of Symbian in the lights of client server architectureActive object of Symbian in the lights of client server architecture
Active object of Symbian in the lights of client server architecture

More from Maurice De Beijer [MVP]

Practice TypeScript Techniques Building React Server Components App by
Practice TypeScript Techniques Building React Server Components AppPractice TypeScript Techniques Building React Server Components App
Practice TypeScript Techniques Building React Server Components AppMaurice De Beijer [MVP]
4 views79 slides
A foolproof Way to Estimate a Software Project by
A foolproof Way to Estimate a Software ProjectA foolproof Way to Estimate a Software Project
A foolproof Way to Estimate a Software ProjectMaurice De Beijer [MVP]
36 views40 slides
Surati Tech Talks 2022 / Build reliable Svelte applications using Cypress by
Surati Tech Talks 2022 / Build reliable Svelte applications using CypressSurati Tech Talks 2022 / Build reliable Svelte applications using Cypress
Surati Tech Talks 2022 / Build reliable Svelte applications using CypressMaurice De Beijer [MVP]
124 views33 slides
Build reliable Svelte applications using Cypress by
Build reliable Svelte applications using CypressBuild reliable Svelte applications using Cypress
Build reliable Svelte applications using CypressMaurice De Beijer [MVP]
252 views26 slides
Building Reliable Applications Using React, .NET & Azure by
Building Reliable Applications Using React, .NET & AzureBuilding Reliable Applications Using React, .NET & Azure
Building Reliable Applications Using React, .NET & AzureMaurice De Beijer [MVP]
248 views63 slides
Building reliable applications with React, C#, and Azure by
Building reliable applications with React, C#, and AzureBuilding reliable applications with React, C#, and Azure
Building reliable applications with React, C#, and AzureMaurice De Beijer [MVP]
204 views48 slides

More from Maurice De Beijer [MVP](20)

Surati Tech Talks 2022 / Build reliable Svelte applications using Cypress by Maurice De Beijer [MVP]
Surati Tech Talks 2022 / Build reliable Svelte applications using CypressSurati Tech Talks 2022 / Build reliable Svelte applications using Cypress
Surati Tech Talks 2022 / Build reliable Svelte applications using Cypress
Building large and scalable mission critical applications with React by Maurice De Beijer [MVP]
Building large and scalable mission critical applications with ReactBuilding large and scalable mission critical applications with React
Building large and scalable mission critical applications with React

Recently uploaded

BushraDBR: An Automatic Approach to Retrieving Duplicate Bug Reports by
BushraDBR: An Automatic Approach to Retrieving Duplicate Bug ReportsBushraDBR: An Automatic Approach to Retrieving Duplicate Bug Reports
BushraDBR: An Automatic Approach to Retrieving Duplicate Bug ReportsRa'Fat Al-Msie'deen
5 views49 slides
Copilot Prompting Toolkit_All Resources.pdf by
Copilot Prompting Toolkit_All Resources.pdfCopilot Prompting Toolkit_All Resources.pdf
Copilot Prompting Toolkit_All Resources.pdfRiccardo Zamana
8 views4 slides
SAP FOR TYRE INDUSTRY.pdf by
SAP FOR TYRE INDUSTRY.pdfSAP FOR TYRE INDUSTRY.pdf
SAP FOR TYRE INDUSTRY.pdfVirendra Rai, PMP
24 views3 slides
ict act 1.pptx by
ict act 1.pptxict act 1.pptx
ict act 1.pptxsanjaniarun08
13 views17 slides
DSD-INT 2023 Delft3D FM Suite 2024.01 1D2D - Beta testing programme - Geertsema by
DSD-INT 2023 Delft3D FM Suite 2024.01 1D2D - Beta testing programme - GeertsemaDSD-INT 2023 Delft3D FM Suite 2024.01 1D2D - Beta testing programme - Geertsema
DSD-INT 2023 Delft3D FM Suite 2024.01 1D2D - Beta testing programme - GeertsemaDeltares
17 views13 slides
20231129 - Platform @ localhost 2023 - Application-driven infrastructure with... by
20231129 - Platform @ localhost 2023 - Application-driven infrastructure with...20231129 - Platform @ localhost 2023 - Application-driven infrastructure with...
20231129 - Platform @ localhost 2023 - Application-driven infrastructure with...sparkfabrik
5 views46 slides

Recently uploaded(20)

BushraDBR: An Automatic Approach to Retrieving Duplicate Bug Reports by Ra'Fat Al-Msie'deen
BushraDBR: An Automatic Approach to Retrieving Duplicate Bug ReportsBushraDBR: An Automatic Approach to Retrieving Duplicate Bug Reports
BushraDBR: An Automatic Approach to Retrieving Duplicate Bug Reports
Copilot Prompting Toolkit_All Resources.pdf by Riccardo Zamana
Copilot Prompting Toolkit_All Resources.pdfCopilot Prompting Toolkit_All Resources.pdf
Copilot Prompting Toolkit_All Resources.pdf
Riccardo Zamana8 views
DSD-INT 2023 Delft3D FM Suite 2024.01 1D2D - Beta testing programme - Geertsema by Deltares
DSD-INT 2023 Delft3D FM Suite 2024.01 1D2D - Beta testing programme - GeertsemaDSD-INT 2023 Delft3D FM Suite 2024.01 1D2D - Beta testing programme - Geertsema
DSD-INT 2023 Delft3D FM Suite 2024.01 1D2D - Beta testing programme - Geertsema
Deltares17 views
20231129 - Platform @ localhost 2023 - Application-driven infrastructure with... by sparkfabrik
20231129 - Platform @ localhost 2023 - Application-driven infrastructure with...20231129 - Platform @ localhost 2023 - Application-driven infrastructure with...
20231129 - Platform @ localhost 2023 - Application-driven infrastructure with...
sparkfabrik5 views
SUGCON ANZ Presentation V2.1 Final.pptx by Jack Spektor
SUGCON ANZ Presentation V2.1 Final.pptxSUGCON ANZ Presentation V2.1 Final.pptx
SUGCON ANZ Presentation V2.1 Final.pptx
Jack Spektor22 views
DSD-INT 2023 Delft3D FM Suite 2024.01 2D3D - New features + Improvements - Ge... by Deltares
DSD-INT 2023 Delft3D FM Suite 2024.01 2D3D - New features + Improvements - Ge...DSD-INT 2023 Delft3D FM Suite 2024.01 2D3D - New features + Improvements - Ge...
DSD-INT 2023 Delft3D FM Suite 2024.01 2D3D - New features + Improvements - Ge...
Deltares17 views
DSD-INT 2023 Simulation of Coastal Hydrodynamics and Water Quality in Hong Ko... by Deltares
DSD-INT 2023 Simulation of Coastal Hydrodynamics and Water Quality in Hong Ko...DSD-INT 2023 Simulation of Coastal Hydrodynamics and Water Quality in Hong Ko...
DSD-INT 2023 Simulation of Coastal Hydrodynamics and Water Quality in Hong Ko...
Deltares14 views
DSD-INT 2023 The Danube Hazardous Substances Model - Kovacs by Deltares
DSD-INT 2023 The Danube Hazardous Substances Model - KovacsDSD-INT 2023 The Danube Hazardous Substances Model - Kovacs
DSD-INT 2023 The Danube Hazardous Substances Model - Kovacs
Deltares8 views
Tridens DevOps by Tridens
Tridens DevOpsTridens DevOps
Tridens DevOps
Tridens9 views
Unmasking the Dark Art of Vectored Exception Handling: Bypassing XDR and EDR ... by Donato Onofri
Unmasking the Dark Art of Vectored Exception Handling: Bypassing XDR and EDR ...Unmasking the Dark Art of Vectored Exception Handling: Bypassing XDR and EDR ...
Unmasking the Dark Art of Vectored Exception Handling: Bypassing XDR and EDR ...
Donato Onofri795 views
DSD-INT 2023 3D hydrodynamic modelling of microplastic transport in lakes - J... by Deltares
DSD-INT 2023 3D hydrodynamic modelling of microplastic transport in lakes - J...DSD-INT 2023 3D hydrodynamic modelling of microplastic transport in lakes - J...
DSD-INT 2023 3D hydrodynamic modelling of microplastic transport in lakes - J...
Deltares9 views
Dev-Cloud Conference 2023 - Continuous Deployment Showdown: Traditionelles CI... by Marc Müller
Dev-Cloud Conference 2023 - Continuous Deployment Showdown: Traditionelles CI...Dev-Cloud Conference 2023 - Continuous Deployment Showdown: Traditionelles CI...
Dev-Cloud Conference 2023 - Continuous Deployment Showdown: Traditionelles CI...
Marc Müller37 views
Dapr Unleashed: Accelerating Microservice Development by Miroslav Janeski
Dapr Unleashed: Accelerating Microservice DevelopmentDapr Unleashed: Accelerating Microservice Development
Dapr Unleashed: Accelerating Microservice Development
Miroslav Janeski10 views
.NET Developer Conference 2023 - .NET Microservices mit Dapr – zu viel Abstra... by Marc Müller
.NET Developer Conference 2023 - .NET Microservices mit Dapr – zu viel Abstra....NET Developer Conference 2023 - .NET Microservices mit Dapr – zu viel Abstra...
.NET Developer Conference 2023 - .NET Microservices mit Dapr – zu viel Abstra...
Marc Müller38 views

Concurrent Rendering Adventures in React 18

Editor's Notes

  1. Time: 5:00
  2. Foto door Visual Tag Mx via Pexels
  3. Time: 8:00
  4. Time: 5:00
  5. Time: 5:00
  6. Time: 5:00
  7. Photo by Mindspace Studio on Unsplash
  8. Foto door cottonbro via Pexels
  9. Time: 5:00
  10. Time: 5:00
  11. Time: 5:00
  12. Time: 5:00
  13. Time: 5:00
  14. Time: 5:00