Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Concurrent Rendering Adventures in React 18
Rating: 4.6 out of 5(33 ratings)
448 students

Concurrent Rendering Adventures in React 18

Learn all about the how and why of concurrent rendering in React 18
Created byMaurice de Beijer
Last updated 11/2021
English
English

What you'll learn

  • The how and why of concurrent rendering in React 18
  • Coordinating suspense boundaries with the <SuspenseList /> component
  • Using the startTransition() API
  • Using the useTransition() hook

Course content

1 section • 15 lectures • 1h 16m total length

  • Introduction2:24

    Explore concurrent rendering in React 18, starting with a Suspense refresher, then learn how and why to use concurrent mode, transitions with startTransition and useTransition, and SuspenseList coordination.

  • Prerequisites7:24

    Install node and npm, clone the GitHub starter, and run npm install to set up a React 18 app; explore concurrent rendering, Suspense, and TypeScript in a practical starter.

  • <Suspense />8:15

    Explore the Suspense component in React to suspend rendering while data loads, using SWR with suspense enabled and a fallback loading spinner via a Suspense boundary.

  • <Suspense /> & Errors5:07

    Learn how suspense and error boundaries in React 18 work together, nest boundaries to catch errors like 404 not found without unloading the app.

  • Nesting <Suspense />5:11

    Nest suspense boundaries in React 18 to suspend specific parts while keeping the navigation bar visible, and learn how null fallbacks render nothing and affect boundary selection.

  • Parallel <Suspense />3:14

    Learn to parallelize suspense with multiple Suspense components and coordinate their boundaries using SuspenseList in React 18, delivering flexible loading states and separate spinners.

  • Switching to React 186:39

    Switch to React 18 by updating npm packages to react@next and react-dom@next, replacing ReactDOM.render with createRoot, and embracing concurrent rendering to improve app behavior.

  • New hooks5:25

    Explore the new hooks in React 18, including useDeferredValue, useTransition, useMutableSource, and useOpaqueIdentifier, to optimize concurrent rendering and server-side id consistency.

  • Using <SuspenseList />6:02

    Explore the SuspenseList component to orchestrate multiple suspense boundaries, control reveal order (together, forwards, backwards), and use tail options (collapsed or hidden) to improve concurrent rendering UI.

  • Concurrent Mode4:40

    Explore how React 18's concurrent mode chunks rendering, pauses, and resumes, enabling earlier event handling and preventing tearing with new hooks for custom state management libraries.

  • Using startTransition()6:19

    Demonstrate startTransition() to defer low priority work and keep the UI responsive. Show how slider interactions stay fast while the prime numbers update only after available time.

  • Using useTransition()4:56

    Learn how to use the useTransition() hook to defer low-priority work, track pending updates with isPending, and compare it with startTransition() for UI responsiveness in React 18.

  • <Suspense /> & Transitions4:46

    Explore how Suspense and transitions work together in React 18 using useTransition and SuspenseList to control UI rendering and show targeted loading indicators like an hourglass.

  • Using useDeferredValue()4:39

    Explore how the useDeferredValue() hook can optimize React 18 rendering by deferring updates and reducing re-renders, with a practical prime-number slider example and performance trade-offs.

  • Conclusion1:31

    Discover how suspense, suspense list, error boundaries, and concurrent mode in React 18 enable asynchronous work, data fetching and lazy loading with startTransition and useTransition.

Requirements

  • A basic understanding of React

Description

Are you building React applications that sometimes render a bit slowly? And looking at React 18 Concurrent Rendering to speed things up? If so, you're in the right place. In this course, I will guide you through the exciting new world of concurrent rendering and all the other changes that come with React 18.


My name is Maurice de Beijer and I am a seasoned React developer with years of experience using and teaching React. I have seen quite a few transitions in the React API, from React.createClass() to the ECMAScript 2015 React.Component, from there to functional React components, and then to hooks. And now, I am excited to share my knowledge of the latest features in React 18 with you.


In this course, we will cover everything you need to know about concurrent rendering in React 18. We will start with an overview of what concurrent rendering is and why it's important. From there, we will dive into the different features of concurrent rendering, including <SuspenseList />, the startTransition() API, and the useTransition() hook. You will see how easy it is to switch to concurrent rendering in your React application and you will learn how to use these new features to improve the performance of your application.


But that's not all, we will also cover the behavior changes you need to be aware of when upgrading your application to React 18. Whether you're new to React or an experienced developer, this course will provide you with all the knowledge you need to take advantage of the latest features in React 18.


So, if you're ready to take your React skills to the next level and upgrade your applications to React 18, join me in this interactive course. With my guidance, you will learn how to use concurrent rendering to improve the performance of your application and take advantage of all the other new features in React 18.

Who this course is for:

  • React developers looking to upgrade their applications to React 18
  • Developers wanting to understand how concurrent rendering can help fix performance problems

Report abuse