React 19.2 Releases Activity and useEffectEvent: The APIs That Will Change How You Write Components

Hello HaWkers, React just released its third major version in less than a year, and this time it brought APIs that many developers have been waiting for years. React 19.2 arrived with the <Activity> component, the useEffectEvent hook, and React Performance Tracks, features that promise to simplify common patterns and give full visibility into your application's performance.

Have you ever tried to create an effect that needs to access updated values but without re-running every time those values change? Or wanted to show and hide content efficiently without losing state? These pain points finally have an official solution.

What Came in React 19.2

This is the third major React release since December 2024, when React 19 was launched. In June 2025 came React 19.1, and now we have 19.2 with features that were experimental for a long time.

Release Timeline

React Evolution in 2024-2025:

December 2024: React 19.0 (Stable Server Components, Actions, React Compiler)
June 2025: React 19.1 (Stability improvements, bug fixes)
December 2025: React 19.2 (Activity, useEffectEvent, Performance Tracks)

The React team has maintained a consistent release pace, focusing on stabilizing experimental features and adding capabilities the community was asking for.

The New Activity API: Total Visibility Control

The <Activity> component solves a common problem: how to show and hide parts of the UI efficiently while maintaining state and avoiding unnecessary remounts.

import { Activity, useState } from 'react';

function TabContainer() {
  const [activeTab, setActiveTab] = useState('home');

  return (
    <div className="tabs-container">
      <nav>
        <button onClick={() => setActiveTab('home')}>Home</button>
        <button onClick={() => setActiveTab('profile')}>Profile</button>
        <button onClick={() => setActiveTab('settings')}>Settings</button>
      </nav>

      <Activity mode={activeTab === 'home' ? 'visible' : 'hidden'}>
        <HomeTab />
      </Activity>

      <Activity mode={activeTab === 'profile' ? 'visible' : 'hidden'}>
        <ProfileTab />
      </Activity>

      <Activity mode={activeTab === 'settings' ? 'visible' : 'hidden'}>
        <SettingsTab />
      </Activity>
    </div>
  );
}

Why This Matters

Before Activity, developers used display: none, conditional rendering, or external libraries. Each approach had problems:

Problems with old approaches:

display: none: Element still in DOM, effects keep running
Conditional rendering: Loses state, remounts component
External libraries: Adds dependency, can conflict with React

With <Activity>, React knows exactly what to do. When mode="hidden", the component:

Keeps state preserved
Pauses effects and subscriptions
Removes from layout flow
Is ready to reactivate instantly

useEffectEvent: The Missing Hook

This is perhaps the most awaited hook since hooks were introduced in 2019. The useEffectEvent solves the problem of callbacks in effects that need current values without causing re-execution.

import { useEffect, useEffectEvent, useState } from 'react';

function ChatRoom({ roomId, theme }) {
  const [messages, setMessages] = useState([]);

  // This event always sees the current theme
  // but does NOT make useEffect re-run when theme changes
  const onMessage = useEffectEvent((message) => {
    // Always has access to the most recent theme
    showNotification(message, theme);
  });

  useEffect(() => {
    const connection = createConnection(roomId);

    connection.on('message', (msg) => {
      onMessage(msg);  // Calls the event handler
      setMessages(prev => [...prev, msg]);
    });

    return () => connection.disconnect();
  }, [roomId]); // No need for theme in deps!

  return <MessageList messages={messages} />;
}

The Problem It Solves

Before, you had two bad options:

Option 1: Add to dependencies (causes reconnection)

// PROBLEM: Reconnects every time theme changes
useEffect(() => {
  const connection = createConnection(roomId);
  connection.on('message', (msg) => {
    showNotification(msg, theme);
  });
  return () => connection.disconnect();
}, [roomId, theme]); // theme here causes problems

Option 2: Use ref (verbose and bug-prone)

// PROBLEM: Verbose code, easy to forget to update
const themeRef = useRef(theme);
useEffect(() => {
  themeRef.current = theme;
});

useEffect(() => {
  const connection = createConnection(roomId);
  connection.on('message', (msg) => {
    showNotification(msg, themeRef.current);
  });
  return () => connection.disconnect();
}, [roomId]);

With useEffectEvent, the code is clean and the intent is clear.

React Performance Tracks: Professional-Level DevTools

The third major addition in React 19.2 are Performance Tracks, a deep integration with Chrome DevTools that shows exactly what React is doing during each frame.

What You See Now

Information available in Performance Tracks:

Time spent in each render phase
Components that caused re-renders
Suspense boundaries and their states
Transitions and their priorities
Effects and when they executed

// When analyzing this component in DevTools
function Dashboard() {
  const [data, setData] = useState(null);

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

  return (
    <Suspense fallback={<Loading />}>
      <Charts data={data} />
      <Metrics data={data} />
      <RecentActivity data={data} />
    </Suspense>
  );
}

In Performance Track, you will see:

When Suspense showed the fallback
How long each child component took to render
If there were unnecessary re-renders
Where time was spent (render vs commit vs passive effects)

How to Enable

Performance Tracks appear automatically when you record a session in Chrome DevTools Performance tab, as long as you are using updated React DevTools.

Important Security Updates

React 19.2 also came with critical security patches. Vulnerabilities were discovered in React Server Components that could cause DoS and source code exposure.

Versions with security patches:

React 19.0.3
React 19.1.4
React 19.2.3

If your application uses React Server Components with frameworks like Next.js or Remix, update immediately to the latest versions.

Comparison: React 19.0 vs 19.1 vs 19.2

Feature	React 19.0	React 19.1	React 19.2
Server Components	Stable	Stable	Stable + Patches
React Compiler	Beta	Stable	v1.0
Actions	Stable	Stable	Stable
Activity	-	-	New
useEffectEvent	-	-	New
Performance Tracks	-	-	New

How to Update to React 19.2

The update is straightforward if you are already on React 19.x:

npm install react@19.2.3 react-dom@19.2.3
# or
yarn add react@19.2.3 react-dom@19.2.3
# or
pnpm add react@19.2.3 react-dom@19.2.3

For those coming from React 18, the migration requires more attention, especially if using Server Components or the new Suspense model.

What to Expect from React in 2026

The React team has already signaled some directions for next year:

Trends for 2026:

Even more aggressive Compiler optimizations
Better framework integration
Simpler APIs for common cases
Expanded Performance Tracks

React continues to evolve pragmatically, adding features the community really needs.

Conclusion

React 19.2 brings three significant additions that will impact how we write applications. <Activity> simplifies UI patterns that previously required workarounds. useEffectEvent solves an old pain with effects and callbacks. And Performance Tracks give unprecedented visibility into what happens in your application.

If you work with React, dedicate time to understand these new APIs. They are not just convenient but represent the direction React is taking.

If you want to dive deeper into React and understand how to master these concepts, I recommend checking out the article about JavaScript and the IoT World where we explore how JavaScript connects different contexts.