Unlock the Power of Responsive React Apps

The Frustration of Slow UI Renders

Imagine typing in a search bar, only to have the app freeze and the searching stop. This frustrating experience is all too common, and it’s often caused by expensive UI renders blocking lighter, more urgent UI updates. But what if you could prioritize these urgent updates, ensuring your app remains responsive and fast?

Introducing startTransition: The Game-Changer

Part of React 18’s experimental Concurrent Mode, startTransition allows you to mark certain updates as non-urgent, pausing them while more urgent updates take priority. This feature is a game-changer, making your app feel faster and more responsive.

Getting Started with React 18

Before we dive into startTransition, ensure you have:

• A working knowledge of React
• Node.js installed on your machine

Create a React project using create-react-app, then update to React 18 by modifying the package.json file and installing the necessary libraries.

npm install [email protected] [email protected]

Enabling Concurrent Mode

By default, your React project doesn’t support Concurrent Mode. Enable it by rendering the root React node in a different way. Open src/index.js and replace the render static method with the createRoot method from ReactDOM.

import { createRoot } from 'eact-dom';

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

Setting Up a Testing Environment

Create a React app with a light UI render and an expensive UI render. Open src/App.js and replace the App function with a new implementation that includes a search input and a search result.

import React, { useState } from 'eact';

function App() {
  const [searchTerm, setSearchTerm] = useState('');
  const [searchResult, setSearchResult] = useState('');

  const handleSearch = async (term) => {
    // Simulate an expensive UI render
    await new Promise((resolve) => setTimeout(resolve, 2000));
    setSearchResult(`Search result for ${term}`);
  };

  return (
    <div>
      <input
        type="text"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        placeholder="Search"
      />
      <p>{searchResult}</p>
    </div>
  );
}

The Problem: Expensive UI Renders

Try typing quickly in the search input. You’ll notice the app struggles to render the full text immediately, making the light UI render slow as well. This is where startTransition comes in.

Using startTransition

Import startTransition and wrap the expensive UI render in this function. Now, when you type something in the search input, the text is rendered immediately, and the search result is rendered afterwards.

import { startTransition } from 'eact';

function App() {
  //...

  const handleSearch = async (term) => {
    startTransition(() => {
      // Simulate an expensive UI render
      await new Promise((resolve) => setTimeout(resolve, 2000));
      setSearchResult(`Search result for ${term}`);
    });
  };

  //...
}

Displaying Progress Feedback

Use the isPending variable from the useTransition hook to display a progress bar while the expensive UI render is loading. This provides immediate feedback to users, ensuring they know the app is working on their request.

import { useTransition } from 'eact';

function App() {
  //...

  const [isPending, startTransition] = useTransition();

  return (
    <div>
      <input
        type="text"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        placeholder="Search"
      />
      {isPending? (
        <p>Loading...</p>
      ) : (
        <p>{searchResult}</p>
      )}
    </div>
  );
}

The Result: Smooth and Reactive Apps

With startTransition, you can separate immediate UI renders from non-urgent UI renders, making your app smooth, responsive, and satisfying to use. Experiment with the demo app to see the power of startTransition in action.

View the demo app