A article will help you understand the concurrency mechanism in React

1. Automatic batch processing

React can now automatically batch multiple state update operations to reduce unnecessary rendering and improve performance. This means that when you call multiple state update functions in a single event handler, React merges them into one update, reducing the number of renders.

counter

In the following case, when the user clicks a button,handleClickThe function will be called three times in a row.setCount. Due to React's automatic batch processing, these three updates are merged into one update, reducing the number of renders.

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
    setCount(count + 2);
    setCount(count + 3);
  };

  return (
    <div>
      <p>Count: {count}</p>
     <button onClick={handleClick}>Increment by 3</button>
    </div>
  );
}

2. Asynchronous rendering

React can now support asynchronous rendering, which means React can pause and resume during the rendering process, allowing other tasks, such as user input or animations, to be performed first. This helps improve application responsiveness and performance.

Asynchronous data acquisition

In the following case,AsyncComponentThe component will obtain data asynchronously when mounted. Due to React's asynchronous rendering, when the data has not been retrieved, the component will display "Loading..." without blocking the execution of other tasks.

import { useState, useEffect } from 'react';

function AsyncComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchData().then((fetchedData) => {
      setData(fetchedData);
    });
  }, []);

  if (data === null) {
    return <p>Loading...</p>;
  }

  return <div>{data}</div>;
}

async function fetchData() {
  // Simulate asynchronous data acquisition  await new Promise((resolve) => setTimeout(resolve, 1000));
  return 'Async data';
}

3. useDeferredValue: delayed value update

useDeferredValueis a new Hook that allows you to delay the update of certain values ​​during rendering until the next rendering. This is very useful for implementing responsive UI and avoiding unnecessary rendering.

Input box anti-shake

In the following example, when the user enters text in the input box,useDeferredValueWill delay updatedeferredText, until the next render after 500 milliseconds. This helps improve application responsiveness and performance.

import { useState, useDeferredValue } from 'react';

function DebounceInput() {
  const [text, setText] = useState('');
  const deferredText = useDeferredValue(text, { timeoutMs: 500 });

  const handleChange = (e) => {
    setText();
  };

  return (
    <div>
     <input type="text" value={text} onChange={handleChange} />
      <p>Debounced value: {deferredText}</p>
    </div>
  );
}

4. useTransition: Create a transition state

useTransitionis a new Hook that allows you to create a transition during the status update process, thereby achieving finer-grained update control. You can use this Hook to delay certain status updates until the transition is complete. This is very useful for better user experience and performance optimization.

Loading status and transition effects

In the following example, when the user clicks a button,handleClickThe function will be usedstartTransitionCreate a transition and delay updates during transitioncount。isPendingA variable indicates whether the transition is in progress. When the transition is in progress, "Loading..." will be displayed.

import { useState, useTransition } from 'react';

function TransitionExample() {
  const [count, setCount] = useState(0);
  const [isPending, startTransition] = useTransition();

  const handleClick = () => {
    startTransition(() => {
      setCount(count + 1);
    });
  };

  return (
    <div>
      <p>Count: {count}</p>
     <button onClick={handleClick}>Increment</button>
      {isPending && <p>Loading...</p>}
    </div>
  );
}

5. Suspense configuration optimization

React's new version introduces new Suspense configuration options, such astimeoutMsandfallbackAfterSuspense. These options allow you to more granularly control Suspense's behavior, such as setting the suspend time and displaying alternate content after suspend.

Pagination loading and error handling

In the following example,AppComponent usageSuspenseWrapped two asynchronously loaded page componentsPage1andPage2. By settingtimeoutMsTo 1000 milliseconds, we can display it in 1 secondfallbackAfterSuspenseAlternate content specified by the attribute "Loading with suspension...". At the same time, whenPage2When loading fails, Suspense will catch the error and display the default error boundary content.

import { Suspense } from 'react';

function App() {
  return (
    <Suspense
      fallback={<div>Loading...</div>}
      timeoutMs={1000}
      fallbackAfterSuspense={<div>Loading with suspense...</div>}
    >
      <Page1 />
      <Page2 />
    </Suspense>
  );
}

function Page1() {
  // Simulate asynchronous data acquisition  return new Promise((resolve) => setTimeout(() => resolve(<div>Page 1</div>), 2000));
}

function Page2() {
  // Simulated asynchronous data acquisition failed  return new Promise((_, reject) => setTimeout(() => reject(new Error('Error loading Page 2')), 2000));
}

6. startTransition: create transition manually

startTransitionis a new function that allows you to create a transition during the state update process. You can use this function to delay certain state updates until the transition is complete. This is very useful for better user experience and performance optimization.

The synergy between animation and transition

In the following example, when the user clicks a button,handleClickThe function will be usedstartTransitionCreate a transition and smoothly move the box during the transition. By combining CSS animation and React transitions, a more natural and smoother interactive experience can be achieved.

import { useState, startTransition } from 'react';

function AnimationTransitionExample() {
  const [position, setPosition] = useState(0);

  const handleClick = () => {
    // Create a transition using startTransition    startTransition(() => {
      setPosition(position + 100);
    });
  };

  return (
    <div style={{ position: 'relative' }}>
      <div
        style={{
          position: 'absolute',
          left: position,
          transition: 'left 0.5s ease-out',
        }}
      >
        Box
      </div>
     <button onClick={handleClick}>Move box</button>
    </div>
  );
}

7. UseId and useSyncExternalStore: Synchronize with external data sources

These two new Hooks provide better support to synchronize data between React components and external data sources.useIdUsed to generate a unique ID, anduseSyncExternalStoreUsed to synchronize data between components and external data sources.

Live chat application

In the following example,ChatRoomComponent usageuseSyncExternalStoreFrom an external data source (chatStore) Get the chat message list. The component will automatically re-render when the data from an external data source changes. At the same time, eachChatMessageAll components are useduseIdA unique ID is generated so that they are correctly referenced in the DOM.

import { useId, useSyncExternalStore } from 'react';

function ChatMessage({ message }) {
  const id = useId();
  return <div id={`message-${id}`}>{message}</div>;
}

function ChatRoom() {
  const messages = useSyncExternalStore(
    () => ,
    () => ()
  );

  return (
    <div>
      {((message) => (
        <ChatMessage key={} message={} />
      ))}
    </div>
  );
}

const chatStore = {
  messages: [],
  subscribers: new Set(),

  subscribe(callback) {
    (callback);
    return () => {
      (callback);
    };
  },

  getMessages() {
    return ;
  },

  addMessage(message) {
    (message);
    ((callback) => callback());
  },
};

Summary and prediction

The new version of React's concurrency mechanism provides a series of new features, including automatic batch processing, asynchronous rendering, new Hooks and Suspense configurations, etc. These features are designed to help developers better control and optimize the performance and user experience of their applications. Through these new features I see great potential for React in performance optimization and user experience.

Below are some predictions from the head of the React concurrency mechanism. If everyone has different ideas from me, please be merciful.

• Fine-grained concurrency control: Future React may provide finer granular concurrency control, allowing developers to customize rendering strategies based on specific scenarios to achieve higher performance and lower overhead.
• Integrate Web Workers: Web Workers provide JavaScript with the ability to run code in a separate thread, thus avoiding blocking of the main thread. In the future, React may better integrate Web Workers for more efficient concurrent processing.
• More powerful Suspense features:Suspense is one of the core components of the React concurrency mechanism, and future versions may enhance its functionality, such as supporting multiple wait states, finer-grained error handling, etc.
• Optimized data flow management: React's context API and data flow management have always been the focus of developers. Future React may further optimize these aspects to provide more efficient and concise data flow solutions.
• Better server-side rendering support: As server-side rendering (SSR) is increasing in modern web applications, React may provide better SSR support, including faster first-screen loading times, better SEO optimization, and more.

In the long run, React's development will focus more on performance, maintainability and developer experience. React's current development trend should be to build itself into a base base of a full stack. At the same time, with the popularity of IoT devices, React may also expand its applications in this field.

This is the article about this article about how to learn about the concurrency mechanism in React. For more related content on React, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!