0:00

/0:16

React 19 introduces significant performance improvements that can make your applications faster without changing a single line of code. However, understanding these optimizations helps you write better React applications and leverage the new features effectively.

Automatic Batching Everywhere

React 19 extends automatic batching to all scenarios, not just event handlers:

React 18 Behavior

// Only batched in event handlers
function handleClick() {
  setCount(c => c + 1);
  setFlag(f => !f);
  // ✅ Batched - single re-render
}

// Not batched in promises/timeouts
setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // ❌ Two separate re-renders
}, 1000);

React 19 Behavior

// Now batched everywhere
setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // ✅ Batched - single re-render
}, 1000);

fetch('/api/data').then(() => {
  setLoading(false);
  setData(response);
  setError(null);
  // ✅ All batched together
});

The Revolutionary use() Hook

The new ⁠use() hook simplifies data fetching and eliminates many common performance pitfalls:

Traditional Approach

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    setLoading(true);
    fetchUser(userId)
      .then(setUser)
      .catch(setError)
      .finally(() => setLoading(false));
  }, [userId]);

  if (loading) return <Spinner />;
  if (error) return <Error error={error} />;
  return <div>{user.name}</div>;
}

React 19 with use()

function UserProfile({ userId }) {
  // use() handles loading, error, and caching automatically
  const user = use(fetchUser(userId));
  return <div>{user.name}</div>;
}

// Wrap with Suspense and ErrorBoundary
function App() {
  return (
    <ErrorBoundary fallback={<Error />}>
      <Suspense fallback={<Spinner />}>
        <UserProfile userId="123" />
      </Suspense>
    </ErrorBoundary>
  );
}

Benefits of use()

• Automatic caching and deduplication
• Built-in error handling
• Seamless integration with Suspense
• Eliminates waterfall requests
• Works with any Promise or Context

Conditional Data Fetching

function ConditionalData({ shouldFetch, id }) {
  let data = null;
  
  if (shouldFetch) {
    data = use(fetchData(id)); // Only fetches when needed
  }
  
  return data ? <DataView data={data} /> : <EmptyState />;
}

Context with use()

function ThemeButton() {
  const theme = use(ThemeContext); // Cleaner than useContext
  return <button className={theme.buttonClass}>Click me</button>;
}

Parallel Data Fetching

function Dashboard() {
  // These fetch in parallel automatically
  const user = use(fetchUser());
  const posts = use(fetchPosts());
  const stats = use(fetchStats());
  
  return (
    <div>
      <UserInfo user={user} />
      <PostList posts={posts} />
      <StatsWidget stats={stats} />
    </div>
  );
}