Optimizing React Performance with Concurrent Rendering

2026-05-07·4 min readreact

Learn how to leverage Concurrent Mode to build fluid user interfaces.

Explore the power of React's concurrent features like useTransition and useDeferredValue to improve perceived performance and responsiveness in complex applications.

#react #performance #frontend #javascript #web-dev

Introduction

React has evolved significantly over the years, moving from a simple UI library to a powerful framework capable of handling complex, data-heavy applications. One of the most transformative additions in recent versions is Concurrent Rendering. This feature allows React to interrupt a long-running render to handle a high-priority event, such as a user click or typing, ensuring that your application remains responsive even under heavy load.

In this post, we will dive deep into how you can utilize concurrent features to optimize your React applications. We'll explore the underlying mechanics and provide practical examples of hooks that make concurrent rendering accessible to every developer.

Understanding Concurrent Rendering

Before Concurrent Mode, React followed a "blocking" rendering model. Once a render started, it couldn't be interrupted until it finished. This often led to "jank" or frozen UIs when rendering large lists or complex components. Concurrent rendering changes this by allowing React to work on multiple versions of your UI at the same time.

To get started with the latest React features, you'll need to ensure your project is up to date. You can install the latest version of React using the following command:

npm install react@latest react-dom@latest

Implementing useTransition

The useTransition hook is a cornerstone of concurrent rendering. It allows you to mark certain state updates as "transitions," which tells React they have a lower priority. This is incredibly useful for updates that might cause significant re-renders, like filtering a large list or switching between heavy tabs.

// FilterList.tsx
import React, { useState, useTransition } from 'react';
 
const FilterList = ({ items }: { items: string[] }) => {
  const [isPending, startTransition] = useTransition();
  const [filterTerm, setFilterTerm] = useState('');
  const [filteredItems, setFilteredItems] = useState(items);
 
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    setFilterTerm(value);
 
    // Mark this update as a transition
    startTransition(() => {
      const filtered = items.filter(item => 
        item.toLowerCase().includes(value.toLowerCase())
      );
      setFilteredItems(filtered);
    });
  };
 
  return (
    <div>
      <input type="text" value={filterTerm} onChange={handleChange} />
      {isPending && <p>Updating list...</p>}
      <ul>
        {filteredItems.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
};
 
export default FilterList;

In the example above, the input field remains responsive because the state update for filterTerm happens immediately, while the heavy filtering logic inside startTransition is handled with a lower priority.

Leveraging useDeferredValue

Similar to useTransition, the useDeferredValue hook helps you deal with slow-rendering parts of your UI. However, instead of wrapping a state update, it wraps a value itself. This is particularly useful when you receive a prop from a parent component that triggers an expensive render.

// ExpensiveComponent.tsx
import React, { useDeferredValue, useMemo } from 'react';
 
const ExpensiveComponent = ({ value }: { value: string }) => {
  const deferredValue = useDeferredValue(value);
 
  const content = useMemo(() => {
    // Simulate an expensive computation
    const start = performance.now();
    while (performance.now() - start < 100) {}
    return <p>Rendered value: {deferredValue}</p>;
  }, [deferredValue]);
 
  return (
    <div>
      {value !== deferredValue && <p>Loading new content...</p>}
      {content}
    </div>
  );
};
 
export default ExpensiveComponent;

By using useDeferredValue, React will first render the component with the old value while it prepares the new one in the background. This ensures that the user always sees something on the screen, improving the perceived performance of your application.

Conclusion

Concurrent Rendering is a paradigm shift in how we think about React performance. By moving away from blocking renders, we can create interfaces that feel significantly faster and more fluid to the end-user.

While these tools are powerful, they should be used judiciously. Always profile your application using the React DevTools to identify actual bottlenecks before reaching for concurrent features. When applied correctly, useTransition and useDeferredValue can turn a sluggish application into a premium user experience.

Happy coding, and may your frames always be sixty per second.

Related Blogs