React: Rendering using Concurrent Mode and Suspense

Understanding React’s experimental Concurrent and Suspense.

Front-end frameworks enable developers to build apps with better UI and UX. Well-known frameworks like React, Vue, and Angular are commonly used to build responsive applications with high performance and native experience. Users have a similar experience with apps created with each of these frameworks. However, there are some inherent problems common to all of them:

1) Race Conditions: Race conditions occur when a page requires multiple inputs and is unable to fully load as some of the inputs are delayed or not available. This delay is common when fetching data from APIs. If some API calls depend on others, then it is vital that they are sequenced correctly. Wrong assumptions regarding the priority of such API calls can cause Race conditions due to inaccurate timing.

2) Lots of Spinners: It is common to load the full structure of a page with temporary placeholders instead of the actual content. Such pages sometimes will display multiple spinners until data is available to load. However, having to display too many spinners on a web page can lead to bad user experience.

3) Blocking rendering: Most front-end frameworks work by updating changes to the Virtual DOM and then repainting the screen accordingly. Some apps do this before all data has been fetched. So each time data is received, the Virtual DOM is updated, and the screen is repainted, causing other threads to wait unnecessarily.

Waiting for multiple repaints can lead to bad user experience. Other threads continue to wait unnecessarily while the main thread loads. Another negative impact is that a higher number of API calls leads to a bigger package size.