• Post category:StudyBullet-3
  • Reading time:5 mins read

What you will 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

Description

Are you building React applications that sometimes render a bit slowly? And looking at React 18 Concurrent Rendering to speed things up? Or using React 17 and looking to upgrade your applications to React 18? Not sure what is new in React 18 and what you need to change? Or maybe you are wondering what the benefits of React 18 concurrent rendering are in the first place?


Get Instant Notification of New Courses on our Telegram channel.


In this course I am going to explain you all about the new concurrent rendering features in React 18. But why stop there, after all there is more to React 18 than just concurrent rendering. I will show you the behavior changes you need to be aware of!

Join me with your laptop in this interactive course. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, <SuspenseList />, the startTransition() API, the useTransition() hook and more.

My name is Maurice de Beijer and I love React. I have been using and teaching React for quite some time. 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.

Is this course for you? Looking to upgrade your React 17 applications to React 18? Are you working with React already? Then sooner or later you will need to upgrade to React 18. New to React and curious to how React is different to libraries like Vue. This course will explain the importance of concurrent rendering to you.

English
language

Content

Introduction
Introduction
Prerequisites
<Suspense />
<Suspense /> & Errors
Nesting <Suspense />
Parallel <Suspense />
Switching to React 18
New hooks
Using <SuspenseList />
Concurrent Mode
Using startTransition()
Using useTransition()
<Suspense /> & Transitions
Using useDeferredValue()
Conclusion