Getting Started with Suspense and Concurrent Rendering in React

The instructor for the React workshop is Maurice de Bayer, also known as the Problem Solver. He is a freelance developer and instructor.

The slides for the React workshop are available on GitHub, SlideShare, and Maurice de Bayer's website.

The main goals of the React workshop are to learn about using suspense and lazy loading, bundle splitting, using data resources to load data, and exploring concurrent rendering in React.

It is recommended to avoid copying and pasting code. Instead, type out the code, make mistakes, and fix them to learn and remember better.

The prerequisites for the React workshop include having Node.js and npm installed. The workshop is designed for experienced React developers.

React.lazy is used for bundle splitting in the workshop. It allows components to be loaded asynchronously, reducing the initial load time of the application.

React Suspense works by allowing components to suspend rendering while they wait for some asynchronous operation (like data fetching) to complete. It shows a fallback UI, like a loading spinner, until the operation is done.

Using data resources with React Suspense allows you to handle data fetching more efficiently by suspending the component until the data is available, making the code simpler and more maintainable.

Concurrent mode in React is an experimental feature that allows React to interrupt rendering work to handle more urgent updates, making applications more responsive.

New features available with React's concurrent mode include SuspenseList, useTransition, and more efficient interruptible rendering, which improve user experience and application performance.