Concurrent Mode in React is a feature that can enhance the user experience by improving the responsiveness and performance of applications. In simple words, user experience means a person’s emotions and perceptions about using a product or service. Incorporating features like colour scheme, typography, user-friendly layout and navigation in your website will positively impact user experience as well as the website’s performance. Apart from these features react concurrent mode promises to better alternatives to improve user experience that we are going to discuss in this article.

Prerequisites

• JavaScript and JSX
• Node and npm
• React fundamentals

React Concurrent Mode

React Concurrent Mode was introduced with the release of version 18 to optimize the performance of React apps. It is a set of new features that help React to interrupt a long-running rendering process to handle more urgent tasks, like responding to user inputs, and then continuing rendering in the background. This results in a smoother, more responsive user interaction, as the UI doesn’t get blocked by tasks that can wait.

The term “Concurrent” comes from the word “Concurrency”, which is an optimization technique that works by breaking a large program into smaller pieces to execute it independently. It helps in working on multiple tasks simultaneously. This is how we can optimize applications built using single-threaded language like JavaScript.

Improving User Experience with Concurrent Mode

There are several problems that most UI Libraries are unable to handle. However, with concurrent mode, React promises to solve them to enhance user experience. The list of the problems are:

• Once the render phase of UI components starts, nothing can stop or interrupt them until it finishes. The rendering process must be completed before moving to any other tasks. Due to which, users might experience performance lag that can frustrate them.
• If concurrent mode is not enabled in your React application, you cannot control which UI component should be rendered and when. While non-concurrent mode can be suitable for a single component but if the UI layout depends on multiple components, then it might cause problems.
• To display data within React components, the data must be retrieved beforehand. If a parent-child relation exists between components, fetching child components’s data will not start until the parent’s data is fetched. Hence, both parent’s data and child’s data must be fetched before rendering. This is also a problem as it may increase the time to load full application.

Now, let’s discuss how concurrent mode in React will solve these problems to improve user experience:

• If you enable concurrent mode in your React application, you can easily interrupt the rendering process. Interrupting will temporarily halt the rendering of one component in the middle and allow React to render another component. Once the new component is successfully loaded, it resumes rendering the old component and completes the process. This will be done based on priority.
• In this mode, React delays the DOM update until sufficient data has been retrieved. This process can improve the user experience by keeping the current screen stable for a bit longer. If the DOM will get updated without enough data, it may result in blank component or an empty loading state.

Fixing performance problems is not the main focus of improving user experience, you also need to think about what users will consider a better experience. The concurrent mode can be used to build user-centric web applications as it has changed how UI components are rendered in React.

Enabling Concurrent Mode

To enable concurrent mode in your React application, first upgrade your React and ReactDOM npm packages to React 18. Then, instead of using the ReactDOM.render() method, use the createRoot() method. This simple process will automatically enable concurrent rendering in your application.

Example

We will create a React application with two buttons: one to increase a counter and another to change the text after a short delay. While the text is being updated, the counter can be increased, which demonstrates that the concurrent mode allows one to switch between executing different tasks.

Steps to be followed:

Step 1: Open the terminal in your system and navigate to the folder where you want to create React application.

Step 2: Create a new React application named “concurrentapp”. You can use any name as per your requirement.

npx create-react-app concurrentapp

Step 3: Navigate to the application folder using the below command.

cd concurrentapp

Step 4: You can see your application with the following folder structure. From “src” folder delete the “logo.svg” file.

Folder Structure

Step 5: Now, open “package.json” folder where you can see the following dependencies which are created automatically.

"dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
 }

Step 6: Navigate to “App.js” and “index.js” file and add the code mentioned below.

//App.js

import React, { useState } from 'react';

function App() {
    const [count, setCount] = useState(0);
    const [text, setText] = useState('Initial Text');
    return (
        <><button onClick={() => setCount(count + 1)}>
            Press to Increase Counter
        </button>
            <p>Counter: {count}</p>

            <button onClick={() => setTimeout(() => setText('Text Updated'), 2000)}>
                Press to Change Text
            </button>
            <p>{text}</p></>
    );
}

export default App;

//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);

Step 7: Go to the terminal and run the following command to start your React application.

npm start

Output:

concurrent mode in react