React concurrent function experience – the concurrent mode of the front end has come.

Time:2021-7-16

React is an open source JavaScript library, which is used by developers to create web-based and mobile applications, and supports the construction of interactive user interfaces and UI components. React was created by Jordan walker, a Facebook software engineer. The first version of react came out seven years ago, and now Facebook is responsible for maintaining it. Since the release of react framework for the first time, the popularity of react has skyrocketed.
In October 2020, react 17 was released, but surprisingly, “zero new features.”. Of course, this does not really mean that there is no new added function, which makes the majority of programmers and users excited. In fact, this version has brought us a lot of major function upgrades and bug fixes of version 16, and launched concurrent mode and suspend.
Although these two functions have not been officially released, they have been provided to developers for testing. Once released, they will change the way react presents its UI, doubling performance and user experience.

In brief, concurrent mode and suspend enable users to seamlessly handle data loading, loading status and user interface operation, making it more smooth and seamless switching. In concurrent mode, react can pause the rendering of high consumption, non urgent components, and focus on more urgent tasks, such as UI rendering. It always keeps the application responsive, avoiding white screen, stuck and other phenomena.

This article mainly shares in-depth understanding of the data extraction function in concurrent mode and suspend mode.

Why do you need concurrent mode?

As we all know, JavaScript frameworks or libraries are single threaded. Therefore, when a block of code runs, the rest of the block must wait for execution. Multithreaded work cannot be performed concurrently. Interface rendering is the same.
Once react starts rendering something, it cannot be interrupted until the run is complete. React developers call this rendering “blocking rendering.”. This blocking rendering creates an unstable user interface and may stop responding at any time.

concrete problems

Let’s say we need to display a long list of options for filtering the product application. 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 associated data.

If the list is too long and the data is too much, the UI will “jam”, that is, the rendering will be visible to the user. This kind of carton will also greatly reduce the performance of the product. Developers can use some technologies, such as throttling and anti shake. These technologies will help, but they are not perfect solutions.
Throttling limits the number of times a specific function is called. With throttling, we can avoid repeatedly calling expensive and time-consuming APIs or functions. This process can improve performance, especially the presentation of information on the user interface.

Anti shake will ignore the function call for a predetermined period of time. Function calls are only made after a predetermined time.

The figure below describes the Caton phenomenon
While waiting for the non urgent API call to complete, the UI gets stuck, preventing the rendering of the user interface. The solution is to use concurrent mode for interruptible rendering.

React concurrent function experience - the concurrent mode of the front end has come.

Non disruptive rendering

With interruptible rendering, react.js does not block the UI when processing and re rendering lists. It makes react.js more refined by pausing trivial work, updating the DOM, and ensuring that the UI doesn’t get stuck. React uses user input to update or redraw input boxes in parallel. React uses user input and redraws input boxes in parallel. It also updates the list in memory. After react completes the update, it updates the DOM and re presents the list on the user’s display. Essentially, non disruptive rendering enables react to “multitask.”. This feature provides a smoother UI experience.

Concurrent mode

Concurrency mode is a set of functions that help react applications remain responsive and smoothly adapt to the user’s device and network speed capabilities. The concurrency pattern divides the tasks it owns into smaller blocks. React’s scheduler can pick and select 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 user interface update and rendering in the first place.

Using concurrency mode, we can:

  • Control the first render pass
  • Prioritizes rendering passes
  • Pause and resume rendering of components
  • Caching and optimizing runtime rendering of components
  • Hide the display until it needs to be displayed

With UI rendering, concurrent mode improves the response to incoming data, lazy loading of controls, and asynchronous processing. The concurrency mode ensures that the user interface is always activated and the data is updated in the background. The concurrency mode also always uses two hooks of reactuseTransitionanduseDeferredValue

useuseDeferredValue Hook

useDeferredValue HookIt is defined as follows:

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

This command sets the value in timeoutMs “Lag” after the time set in. Whether the user interface must be updated immediately or waiting for data, the command keeps the user interface active and responsive. The hook avoids UI jam and always keeps the user interface responsive, so as to keep the low cost of data acquisition lag.

Using transition hook

useTransition Hook yesReactIs mainly used for suspendedHookSuppose there is a web page with a user name button. Just click a button and the web page will display the user’s details on the screen.
Suppose the user clicks one button first and then the next. The screen either goes blank, or we see a spinner on the screen. If it takes too long to get the details, the user interface may freeze.
useTransition Method returns twoHookValue of:startTransition and isPending。 The syntax of the definition is as follows:

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

startTransition Syntax of definition:

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

useuseTransition Hook,React.jsContinue to display the user interface without user details until the user details are ready, but the UI is responsive.ReactGive priority to the user interface to keep the response while getting data in parallel.

Suspend for getting data

SuspenseyesReactAnother experimental feature introduced with concurrent mode.SuspenseEnables components to wait for a predetermined period of time before rendering.
SuspenseThe main function of is to read data asynchronously from components without worrying about the source of the data.SuspenseMost suitable for the concept of delayed loading.SuspenseAllow data access to library notificationReactWhether the data component can be used. Before the necessary components are ready,ReactThe UI is not updated.

useSuspenseThe benefits of

1. Data acquisition database andReactIntegration between components

2. Control the visual loading state

3. Avoid competitive conditions

SpinnerThe basic syntax of the component is as follows:


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

Concurrent ModeUsed inSuspenseAllows time-consuming components to start rendering while waiting for data. The placeholder is also displayed. This combination produces a smoother UI experience.

Suspend and lazy load components

React.lazyIs a new feature that makesReact.jsAbility to delay loading components. Lazy loading means loading components (the code that retrieves and renders them) only when needed. They give priority to the most critical user interface components.ReactDevelopers recommend wrapping lazy loading components inSuspenseComponent.
This ensures that the component does not appear “bad state” when rendering. The user interface remains responsive throughout the process and brings a smoother user experience.

Enable concurrency mode

To enable concurrency mode, install the latest test version. The prerequisite for installing react is the node packet manager (NPM). To install the test version, execute the following command:


npm install [email protected] [email protected]

To test whether the test version is set, create a sample react application. The rendering code without test function is as follows:

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

The specific code of concurrent mode is as follows:


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

This will enable concurrency mode for the entire application. React divides the rendering call into two parts

  1. Create root element
  2. Using render calls

At present, react plans to maintain three modes:

  1. Traditional mode is a backward compatible traditional or current mode
  2. Blocking mode is the middle stage of concurrent mode development
  3. Concurrent mode

Blocking mode is to use the call of createblockingroot to replace the call of createroot. In the case of concurrent mode, blocking mode provides developers with the opportunity to fix bugs or solve problems.

The official document of react also describes the functions supported by each mode

React concurrent function experience - the concurrent mode of the front end has come.

Example application:

This paper also creates a test program to verify the usage and effect of concurrency mode and other modes. This paper takes the pixel application as an example, randomly distributes pixels on a 150 * 150 canvas and contains a search box. Every time the user clicks the search box, the canvas will render itself again.
Even if the UI cannot be rendered in concurrent mode, user input does not stop updating. The pixel canvas is re rendered after processing. In traditional mode, when typing quickly, the UI stops, 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 in which users can input anything. Each time you press a key, the pixel canvas is re rendered.

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" />  
      <title>React App Concurrent Mode</title>  
    </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 examples

Let’s look at our code. The first screen we see is the initial screen. Using traditional or block rendering is what react does now. Interruptible rendering is a test function of concurrent mode. Let’s start with the traditional rendering work.

React concurrent function experience - the concurrent mode of the front end has come.

The pixel canvas is re rendered at each keystroke. In traditional rendering, the entire UI pauses on each keystroke until it can re render the screen. In the meantime, even if we continue typing, user input will not be updated.

The following image shows interruptible rendering. In interruptible rendering, the user can continue to input. The UI does not stop or stop when the canvas is re rendered in parallel for each keystroke.

React concurrent function experience - the concurrent mode of the front end has come.

After the re rendering is complete, react updates the UI. Although it’s hard to see in the static screenshot, we can see that the grid is changing, but users can still type without UI jamming.

React concurrent function experience - the concurrent mode of the front end has come.

summary

In this paper, we study the test concurrency function and suspend of react. With concurrent mode, react.js always keeps the user interface responsive. It breaks down the tasks of the application into smaller blocks and allows prioritization of user interface tasks. Therefore, this mode can provide a smoother and seamless user experience and improve the overall performance of the application.

Combined with concurrency mode, suspend allows the user interface to remain responsive. At the same time, data acquisition and other heavy and time-consuming tasks can be completed in parallel, thus providing the overall seamless experience.

Full details about the concurrency mode can be found in the official react documentation.

With the improvement of react version, react framework is more and more familiar to Chinese front-end developers and widely used in their project development. Vue.js is another popular front-end mainstream framework after vue.js. Now, it also derives many functional tools that support the integration with react framework, such as front-end report activereportsjs control, spreadjs pure front-end report control, etc. it provides online editor and report design tool directly integrated with react to improve the front-end data display function.

Spreadjs pure front end table control

Spreadjs is a pure front-end table control based on HTML5, which can be embedded in various applications in a native way and combined with the front-end and back-end technical framework. By integrating spreadjs with react, excel like spreadsheet functions can be realized in react framework, including supporting more than 450 calculation formulas, online importing and exporting EXCEL documents, PivotTable and various data visualization effects, so that the application program has high data processing performance and response speed.

Recommended Today

Build HTTP service with C + + Mongoose

Mongoose source code address:https://github.com/cesanta/mo… Mongoose user manual:https://www.cesanta.com/devel… Mngoose set up HTTP service #include <string> #include “mongoose.h” using namespace std; static const char *s_http_port = “8000”; static void ev_handler(mg_connection *nc, int ev, void *ev_data) { struct http_message *hm = (struct http_message *) ev_data; if (ev == MG_EV_HTTP_REQUEST) { std::string uri; if (hm->uri.p && hm->uri.p[0] == ‘/’) […]