React lazy, Suspense and Concurrent React Breakdown with Examples

Exploring lazy() and <Suspense /> within the context of concurrent React

There are some major new features and enhancements coming up for the React framework; exciting for us developers, rewarding for the end user. In this article we will be exploring the usage of lazy() and <Suspense />, but for these features to be fully beneficial we also need to understand concurrent React and the benefits of its support for multi threading.

Let’s start with what these terms mean:

• Concurrent React: An update to the underlying React framework that allows it to work on multiple tasks (renders) at the same time. Not only this, these tasks can be switched between according on their priority, on a real-time basis.
• lazy(): lazy is a new API in React to aid in code splitting and importing components into your scripts — very easily.
• <Suspense />: Suspense is like an error catcher, which allows us to define fallback JSX if part of the content it is wrapping has not loaded. If you think of a try catch block, the catch block is our Suspense fallback, and everything within <Suspense></Suspense> is our try block. This example feels a bit contrived as catch blocks should generally not execute business logic, but…