React: Rendering using Concurrent Mode and Suspense
source link: https://blog.bitsrc.io/react-rendering-using-concurrent-mode-and-suspense-1600c574f996
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Understanding React’s experimental Concurrent and Suspense.
Apr 15 ·6min read
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.
Recommend
-
15
Until we have react-cache or for a different purpose.
-
30
Introduction We have been waiting for “Suspense for Data Fetching” for a long time. It is now provided as an experimental feature in the...
-
15
At React Conf 2019 we announced anexperimental release of React that supports Concurrent Mode and Suspense. In this post we’ll introduce best practices for using them that we’ve identified through the process of building...
-
19
README.md
-
9
Photo by Irvan Smith on Unsplash The React JS dev team announced some exciting changes sev...
-
16
There has been plenty of interest in React Suspense with many articles and experimental code snippets to test it out. I thought I would read more about it and give my understanding of why you might want to use it. Below i...
-
25
本文首发于我的个人博客: https://teobler.com ,转载请注明出处 自从三大框架成型之后，各个框架都为提升开发者的开发效率作出了不少努力，但是看起来技术革新都到了一个瓶颈。除了 React...
-
4
Deep dive into the new Suspense Server-side Rendering ( SSR ) architecture in React 18 Jan 20, 2022 , by Chetan Gawai 7 minute...
-
7
In this post, we will discuss the concept of concurrent rendering in React 18 and the new features that depend on this new mechanism. React 18 was released in beta in November with new features and out-of-the-box improvements to alread...
-
5
Using React Suspense for Better Server-Side RenderingImprove user experience and performance in server-side rendering with React suspenseServer-side rendering is increasingly becoming popular among web...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK