React concurrent function experience (front-end concurrent mode)

React is an open-source JavaScript library used by developers to create web and mobile-based applications and supports building interactive user interfaces and UI components. React was created by Facebook software engineer Jordan Walke. The first version of React was released seven years ago and is now maintained by Facebook. Since the initial release of the React framework, React's popularity has skyrocketed and continues to grow.
In October 2020, React 17 was released, but surprisingly - with “zero new features”. Of course, this doesn't really mean that there aren't any new features added to excite the programmer community. In fact, this version brings us many major feature upgrades and bug fixes for version 16, and introduces: Concurrent Mode and Suspense.
Although these two features have not yet been officially released, they have been made available to developers for testing. Once released, they will change the way React renders its UI, doubling down on performance and user experience.

Briefly, Concurrent Mode and Suspense allow users to seamlessly handle data loading, loading status, and user interface operations more smoothly and seamlessly. In Concurrent Mode, React can pause the rendering of high-cost, non-urgent components and focus on more urgent tasks, such as UI rendering, to always keep the application responsive and avoid white screen, freeze and other phenomena.

This article mainly shares an in-depth understanding of the data extraction function in Concurrent Mode and Suspense mode.

Why do we need Concurrent Mode?

As we all know, JavaScript frameworks or libraries are single-threaded workers. Therefore, when one block of code runs, the remaining blocks must wait to be executed. Unable to execute multiple threads of work concurrently. The same is true for interface rendering.
Once React starts rendering something, there is no way to interrupt it until it finishes. React developers call this kind of rendering "blocking rendering". This rendering blocking creates an unstable user interface that may stop responding at any time.

Specific issues

Suppose, we need to display a long selectable list for filtering product applications. We use the search box to filter records. The design is that when the user clicks the search button, the user interface needs to refresh and list the related data.

If the list is too long and has too much data, the UI will "stutter", i.e. the rendering will be visible to the user. This lag will also greatly reduce product performance. Developers can use techniques such as throttling and de-shaking that can help but are not perfect solutions.
Throttling limits the number of times a specific function can be called. Using throttling, we can avoid repeated calls to expensive and time-consuming APIs or functions. This process can improve performance, especially when presenting information in the user interface.

Debouncing ignores calls to a function for a predetermined amount of time. The function call is made only after a predetermined time has passed.

The following figure describes the jamming phenomenon:
While waiting for non-urgent API calls to complete, the UI freezes, preventing the user interface from rendering. The solution is to use concurrent mode for interruptible rendering.

Uninterrupted rendering

With interruptible rendering, React.js doesn’t block the UI while processing and re-rendering the list. It makes React.js more granular by pausing menial work, updating the DOM, and ensuring the UI doesn't lag. React updates or redraws the input box in parallel with the user input. React consumes the user input and redraws the input box in parallel. It also updates the in-memory list. Once React has finished updating, it updates the DOM and re-renders the list on the user's display. Essentially, uninterrupted rendering allows React to “multitask”. This feature provides a smoother UI experience.

Concurrency Mode

Concurrent Mode is a set of features that helps React applications remain responsive and adapt smoothly to the user's device and network speed capabilities. Concurrent mode divides the tasks it has into smaller chunks. React's scheduler can pick and choose jobs to execute. The scheduling of jobs depends on their priority. By prioritizing tasks, it can stop trivial or non-urgent things, or push them further. React always puts UI updates and rendering first.

Using concurrent mode, we can:

• Controlling the first rendering process
• Prioritize rendering processes
• Pause and resume rendering of components
• Caching and optimizing runtime rendering of components
• Hide the displayed content until it is needed

Along with UI rendering, Concurrent Mode improves responsiveness to incoming data, lazy loading of controls, and asynchronous processing. Concurrent mode ensures that the user interface is always active and continues to update data in the background. Concurrent mode also always uses two hooks of React: useTransition and useDeferredValue

Using useDeferredValue Hook

The definition of useDeferredValue Hook is as follows:

const deferredValue = useDeferredValue(value, { timeoutMs: <some value> });

This command sets the value to "lag" after the time set in timeoutMs . Whether the UI must be updated immediately or must wait for data, this command keeps the UI active and responsive. This Hook avoids UI freezes and always keeps the UI responsive to keep the cost of fetching data lag small.

Using the Transition Hook

useTransition Hook is the main Hook used for suspension in React . Suppose there is a web page with a username button. Just click on a button and the web page will display the user's details on the screen.
Suppose the user first clicks one button and then clicks the next. The screen either goes blank or we see a spinner on the screen. If fetching detailed information takes too long, the UI may freeze.
The useTransition method returns the values ​​of two Hook : startTransition and isPending . The syntax for the definition is as follows:

const [startTransition, isPending] = useTransition({ timeoutMs: 3000 });

The syntax of startTransition definition is:

<button disabled={isPending}  
  startTransition(() => {  
        <fetch Calls>  
  });  
  </button>  
  {isPending? " Loading...": null}

Using useTransition hook, React.js continues to show the UI without user details until the user details are ready, but the UI is responsive. React prioritizes the user interface to remain responsive while fetching data in parallel.

Suspense for fetching data

Suspense is another experimental feature introduced by React along with Concurrent Mode. Suspense enables components to wait for a predetermined amount of time before rendering.
The main purpose of Suspense is to read data asynchronously from a component without worrying about where the data comes from. Suspense works best with the concept of lazy loading. Suspense allows data fetching libraries to notify React components whether data is available. React won't update the UI until the necessary components are ready.

Benefits of using Suspense :

1. Integration between data fetching libraries and React components

2. Control the visual loading state

3. Avoid race conditions

The basic syntax of Spinner component is as follows:

import Spinner from './Spinner';  
    <Suspense fallback={<Spinner />}>  
      <SomeComponent />  
</Suspense>

Suspense used in Concurrent Mode allows time-consuming components to start rendering while waiting for data. Also displays placeholders. This combination produces a smoother UI experience.

Suspense and lazy loading components

React.lazy is a new feature that enables React.js to lazy load components. Lazy loading means loading components (the code that retrieves and renders them) only when they are needed. They prioritize the most critical UI components. React developers recommend wrapping lazy loaded components in a Suspense component.
Doing this ensures that the component does not end up in a "bad state" when it renders. The UI remains responsive throughout the process and results in a smoother user experience.

Enable concurrent mode

To enable concurrent mode, install the latest beta version. The prerequisite for installing React is Node Package Manager (npm). To install the test version, execute the following command:

npm install react@experimental react-dom@experimental

To test that the test build is set up, create a sample React application. The rendering code without the test function is as follows:

import * as React from 'react';  
  import { render } from 'react-dom';  
  render(<App />, document.getElementById('root'));

The specific code for concurrent mode is as follows:

import * as React from 'react';  
    import { createRoot } from 'react-dom';  
createRoot(document.getElementById('root')).render(<App />);

This will enable concurrent mode for the entire application. React splits the render call into two parts:

1. Creating the root element
2. Using Render Calls

Currently, React plans to maintain three modes:

1. Legacy mode is backward compatible with the legacy or current mode
2. Blocking mode is an intermediate stage in concurrent mode development
3. Concurrency Mode

Blocking mode replaces the createRoot call with a createBlockingRoot call. In the case of concurrent development, blocking mode provides developers with an opportunity to fix bugs or resolve issues.

The React official documentation also explains the functions supported by each mode:

Sample Application:

This article also creates a test program to verify the usage and effects of concurrent mode and other modes. This article takes the pixel application as an example to randomly distribute pixels on a 150*150 canvas and include a search box. Every time the user clicks the search box, the canvas will re-render itself.
Even though the UI cannot be rendered in concurrent mode, user input does not stop updating. The pixel canvas is re-rendered after processing is complete. In legacy mode, when typing quickly, the UI would freeze, sometimes before rendering the canvas again. User input also stops and does not update.

The main file for building pixel applications is canvas.js. We also made an input box where the user can enter anything. The pixel canvas is re-rendered every time a key is pressed.

Code example: Index.js

import React from "react";  
    import ReactDOM from "react-dom";  
    import App from "./App";  
    // Traditional or non-Concurrent Mode react  
    const rootTraditional = document.getElementById("root");  
    ReactDOM.render(<App caption="Traditional or Block Rendering" />,  
    rootTraditional);  
    // Concurrent Mode enabled  
    const rootConcurrent = document.getElementById("root-concurrent");  
    ReactDOM.createRoot(rootConcurrent).render(<App caption="Interruptible  
Rendering" />);

App.js

import React, { useState, useDeferredValue } from "react";  
  import "./App.css";  
  import { Canvas } from "./Canvas";  
  export default function App(props)  
  { const [value, setValue] = useState("");  

 //This is available only in the Concurrent mode.

    const deferredValue = useDeferredValue(value, {  
      timeoutMs: 5000  
    });  

    const keyPressHandler = e => {  
      setValue(e.target.value);  
    };  

    return (  
      <div className="App">  
        <h1>{props.caption}</h1>  
        <input onKeyUp={keyPressHandler} />  
        <Canvas value={deferredValue} />  
      </div>  
    );  
  }

Canvas.js

import React from "react";  
   const CANVAS_SIZE = 70;  
   const generateRandomColor = () => {  
    var letters = "0123456789ABCDEF";  
    var color = "#";  
    for (var i = 0; i < 6; i++) {  
      color += letters[Math.floor(Math.random() * 16)];  
    }  
    return color;  
  };  
   const createCanvas = (rows, columns) => {  
    let array = [];  
    for (let i = 0; i < rows; i++) {  
      let row = [];  
      for (let j = 0; j < columns; j++) {  
        row.push(0);  
      }  
      array.push(row);  
    }  
    return array;  
  };  
   //This is the square with the pixels  
  const drawCanvas = value => {  
    const canvas = createCanvas(CANVAS_SIZE, CANVAS_SIZE);  
    return canvas.map((row, rowIndex) => {  
      let cellsArrJSX = row.map((cell, cellIndex) => {  
        let key = rowIndex + "-" + cellIndex;  
        return (  
         <div  
            style={{ backgroundColor: generateRandomColor() }}  
            className="cell"  
            key={"cell-" + key}  
          />  
        );  
      });  
      return (  
        <div key={"row-" + rowIndex} className="canvas-row">  
          {cellsArrJSX}  
        </div>  
      );  
    });  
  };  
  export const Canvas = ({ value }) => {  
    return (  
     <div>  
        <h2 style={{ minHeight: 30 }}>{value}</h2>  
       <div className="canvas">{drawCanvas(value)}</div>  
     </div>  
   );  
 };

Index.html

<!DOCTYPE html>  
  <html lang="en">  
    <head>  
      <meta charset="utf-8" />  
      <meta  
        name="viewport"  
        content="width=device-width, initial-scale=1, shrink-to-fit=no"  
      />  
      <meta name="theme-color" content="#000000" />  
      React App Concurrent Mode  
    </head>  
    <body>  
      <noscript>  
     You need to enable JavaScript to run this app.  
      </noscript>  
      <div id="container">  
        <div id="root" class="column"></div>  
        <div id="root-concurrent" class="column"></div>  
      </div>  
    </body>  
  </html>

Running the Example

Let's take a look at our code. The first screen we see is the splash screen. Using traditional or block rendering is the current way of doing things in React. Interruptible rendering is a beta feature of concurrent mode. Let's first look at traditional rendering work.

The pixel canvas is re-rendered on every keystroke. In traditional rendering, the entire UI pauses on every keystroke until it can re-render the screen. During this time, the user input will not update, even if we continue typing.

The following image shows interruptible rendering. During interruptible rendering, the user can continue typing. The UI does not stall or stop while the canvas is being re-rendered in parallel for each keystroke.

After the re-rendering is complete, React will update the UI. While it’s hard to see in the static screenshot, we can see that the grid is changing but the user can still type without the UI lag.

Summarize

In this article, we looked at testing concurrency in React and Suspense. Using Concurrent Mode, React.js keeps the user interface responsive at all times. It breaks down the application's tasks into smaller chunks and allows prioritization of user interface tasks. Therefore, this mode provides a smoother and seamless user experience and improves the overall performance of the application.

Combined with Concurrent Mode, Suspense allows the user interface to remain responsive. At the same time, heavy and time-consuming tasks such as data fetching can be completed in parallel, providing an overall seamless experience.

Full details about Concurrent Mode are available in the official React documentation.
With the improvement of React versions, the React framework is becoming more and more well-known to more and more Chinese front-end developers and is widely used in their project development. It is another popular front-end mainstream framework after Vue.js. Now, many functional tools that support integration with the React framework have been derived from it, such as the front-end report ActiveReportsJS control, which provides an online editor and report display tool directly integrated with React to improve the front-end data display function.

This is the end of this article about React Concurrency Experience - The front-end concurrent mode has arrived. For more relevant React concurrency content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!