React 19.2 is now available on npm. This release follows React 19 (December 2024) and React 19.1 (June 2025).

This article covers the most practical new features and changes for regular React developers: <Activity>, useEffectEvent, the upgraded ESLint plugin, and Performance Tracks.

Activity: Hide and Restore UI Without Losing State

<Activity> lets you hide parts of your app while preserving their state. Think of it as a smarter alternative to conditional rendering.

Before, you'd conditionally render components like this:

      {isVisible && <Page />}

    

The problem? When isVisible becomes false, React unmounts <Page /> entirely. Any internal state (form inputs, scroll position, expanded sections) is lost.

With <Activity>, you can hide content while keeping it alive:

      import { Activity } from 'react';

<Activity mode={isVisible ? 'visible' : 'hidden'}>
  <Page />
</Activity>

    

How It Works

<Activity> supports two modes:

• visible: Shows children, mounts effects, processes updates normally
• hidden: Hides children with display: none, unmounts effects, defers updates until React is idle

When hidden, React cleans up effects (subscriptions, timers, etc.) but preserves the component's state and DOM. When it becomes visible again, effects are re-created and the UI is restored exactly as it was.

Practical Use Cases

Preserving tab state: Instead of unmounting inactive tabs, keep them hidden so users don't lose their work when switching back:

      function TabPanel({ activeTab }) {
  return (
    <>
      <Activity mode={activeTab === 'home' ? 'visible' : 'hidden'}>
        <Home />
      </Activity>
      <Activity mode={activeTab === 'contact' ? 'visible' : 'hidden'}>
        <Contact />
      </Activity>
    </>
  );
}

    

If a user types a draft message in the Contact tab, switches to Home, then switches back, the draft is still there.

Pre-rendering content: Hidden <Activity> boundaries render their children at low priority. This lets you pre-load data or components the user is likely to navigate to:

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

  return (
    <Suspense fallback={<Loading />}>
      <Activity mode={activeTab === 'home' ? 'visible' : 'hidden'}>
        <Home />
      </Activity>
      <Activity mode={activeTab === 'posts' ? 'visible' : 'hidden'}>
        <Posts /> {/* Pre-renders and fetches data while hidden */}
      </Activity>
    </Suspense>
  );
}

    

When the user clicks the Posts tab, the content appears instantly because it was already rendered in the background.

Faster hydration: Activity boundaries help React hydrate your app in chunks. Even if you never hide content, wrapping lower-priority sections in <Activity> lets React hydrate interactive elements first:

      function Page() {
  return (
    <>
      <Post />
      <Activity>
        <Comments /> {/* Hydrates after Post */}
      </Activity>
    </>
  );
}

    

Note: Next.js uses <Activity> for client-side navigation when Cache Components is enabled. Rather than unmounting the previous route when you navigate away, Next.js sets the Activity mode to "hidden". This preserves component state (form inputs, expanded sections) when users navigate back and forth between routes. See the Next.js docs for details.

Handling Side Effects

Since hidden Activity boundaries preserve DOM but clean up effects, some elements like <video> may continue playing after being hidden. Add cleanup logic in your effects:

      function VideoTab() {
  const ref = useRef();

  useLayoutEffect(() => {
    const videoRef = ref.current;
    return () => {
      videoRef.pause(); // Pause when hidden
    };
  }, []);

  return <video ref={ref} controls src="..." />;
}

    

Use useLayoutEffect instead of useEffect for cleanup tied to visibility changes. It runs synchronously before the content is hidden.

useEffectEvent: Solve the Dependency Array Problem

One of the most annoying patterns with useEffect is when you need to read a value inside an effect but don't want changes to that value to re-run the effect.

Here's a common scenario: showing a notification when connecting to a chat room:

      function ChatRoom({ roomId, theme }) {
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.on('connected', () => {
      showNotification('Connected!', theme); // Uses theme
    });
    connection.connect();
    return () => connection.disconnect();
  }, [roomId, theme]); // theme is a dependency
}

    

The problem: changing theme reconnects to the chat room, even though theme has nothing to do with the connection logic. You only need the current theme when the "connected" event fires.

Most developers disable the lint rule or ignore the warning. But that leads to bugs when dependencies actually matter.

The Solution: useEffectEvent

useEffectEvent extracts the "event" part out of your effect:

      import { useEffect, useEffectEvent } from 'react';

function ChatRoom({ roomId, theme }) {
  const onConnected = useEffectEvent(() => {
    showNotification('Connected!', theme);
  });

  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.on('connected', () => {
      onConnected();
    });
    connection.connect();
    return () => connection.disconnect();
  }, [roomId]); // ✅ theme is no longer a dependency
}

    

Now theme changes don't re-run the effect. The onConnected function always "sees" the latest theme value when it's called, but it's not reactive. It won't trigger re-execution.

When to Use It

Use useEffectEvent for functions that are conceptually "events" fired from an effect: notifications, analytics, logging, or any callback where you need current values but don't want to re-synchronize.

Another example: logging page visits without re-logging when cart items change:

      function Page({ url }) {
  const { items } = useContext(ShoppingCartContext);
  const numberOfItems = items.length;

  const onVisit = useEffectEvent((visitedUrl) => {
    logVisit(visitedUrl, numberOfItems); // Always reads latest numberOfItems
  });

  useEffect(() => {
    onVisit(url);
  }, [url]); // ✅ Only re-runs when url changes
}

    

Rules to Remember

• Effect Events are not reactive, so don't add them to dependency arrays
• Only call them from inside Effects
• Don't pass them to other components or hooks
• Declare them in the same component or hook as the Effect that uses them

The ESLint plugin will help enforce these rules.

eslint-plugin-react-hooks v6: Compiler-Powered Linting

The familiar eslint-plugin-react-hooks has been upgraded with React Compiler diagnostics. Even if you haven't adopted the compiler yet, these new rules help you write code that's ready for automatic optimization.

Installation

      npm install -D eslint-plugin-react-hooks@latest

    

Configuration

The plugin now uses flat config by default:

      // eslint.config.js
import reactHooks from 'eslint-plugin-react-hooks';

export default [
  reactHooks.configs.flat.recommended,
];

    

If you're still using legacy config:

      // .eslintrc.js
{
  extends: ['plugin:react-hooks/recommended-legacy']
}

    

New Rules

In addition to the classic rules-of-hooks and exhaustive-deps, the plugin now includes compiler-powered rules that catch patterns breaking memoization:

• immutability: Catches mutations to props, state, and other immutable values
• refs: Validates you're not reading/writing refs during render
• set-state-in-render: Catches setState calls during render
• set-state-in-effect: Catches synchronous setState in effects
• purity: Validates components and hooks are pure
• static-components: Catches components recreated every render

Here are some examples of what the linter catches:

      // ❌ Calling setState during render causes infinite loops
function Counter() {
  const [count, setCount] = useState(0);
  setCount(count + 1); // Error: setState in render
  return <div>{count}</div>;
}

// ❌ Reading a ref during render is unsafe
function Input() {
  const inputRef = useRef(null);
  const value = inputRef.current?.value; // Error: ref access in render
  return <input ref={inputRef} />;
}

// ❌ Mutating props breaks memoization
function List({ items }) {
  items.sort(); // Error: mutating props
  return <ul>{items.map(item => <li key={item}>{item}</li>)}</ul>;
}

    

These rules catch patterns that break the Rules of React, which can cause bugs in any React app. You don't need to adopt React Compiler to benefit from them. If you do use the compiler, it will automatically skip components with violations while optimizing the rest of your app. Either way, you can fix violations at your own pace.

For more on React Compiler, see React Compiler: No More useMemo and useCallback.

Performance Tracks: React in Chrome DevTools

React 19.2 adds custom tracks to Chrome DevTools' Performance panel, giving you deep visibility into what React is doing. See the Performance Tracks documentation for full details.

To see them, record a performance profile in Chrome DevTools. You'll see new React-specific tracks alongside the standard flame charts.

Scheduler Track

Shows what React is working on at different priorities:

• Blocking: Synchronous updates from user interactions (highest priority)
• Transition: Non-blocking work inside startTransition (runs in background)
• Suspense: Work related to Suspense boundaries
• Idle: Lowest priority work when nothing else is pending

Each render shows its phases: Update → Render → Commit → Remaining Effects. You can see when renders are blocked waiting for higher-priority work, or when React is yielding to the browser.

Components Track

Shows a flamegraph of component render and effect durations. You can:

• See which components take the longest to render
• Identify cascading updates (when an update during render triggers another render)
• Inspect changed props by clicking on a component entry (development builds only)
• Track mount/unmount/reconnect/disconnect events

The Components track uses different colors for render vs. effect phases, matching the Scheduler track's color scheme.

Enabling Performance Tracks

• Development builds: Enabled by default
• Profiling builds: Use react-dom/profiling instead of react-dom/client. Wrap subtrees in <Profiler> to see them in the Components track (or install React DevTools extension to see all components)
• Production builds: Disabled by default due to overhead

Note that profiling adds overhead, so don't use it in production unless specifically measuring performance.

Other Notable Changes

Partial Pre-rendering

React 19.2 adds the ability to pre-render part of your app ahead of time and resume rendering later. This lets you pre-render static parts of your app and serve them from a CDN, then fill in dynamic content when the request comes in.

The new APIs include prerender with an AbortController to generate a prelude and postponed state, then resume or resumeAndPrerender to complete the render later. This is primarily useful for framework authors building SSG/SSR solutions.

Batching Suspense Boundaries for SSR

React now batches reveals of server-rendered Suspense boundaries for a short time, allowing more content to appear together. This creates a smoother experience and prepares apps for <ViewTransition> animations during SSR.

Updated useId Prefix

The default useId prefix changed from :r: (19.0) and «r» (19.1) to _r_. The new prefix is valid for view-transition-name and XML 1.0 names, which is needed for View Transitions support.

Web Streams Support for Node

renderToReadableStream and prerender are now available for Node.js. However, Node Streams (renderToPipeableStream, prerenderToNodeStream) are still recommended in Node environments for better performance and compression support.

Conclusion

React 19.2 brings features that solve real problems:

• <Activity> lets you hide UI while preserving state, perfect for tabs, modals, and pre-rendering
• useEffectEvent fixes the dependency array problem for event-like logic in effects
• The upgraded ESLint plugin catches issues that break memoization, preparing your code for React Compiler
• Performance Tracks give you visibility into React's scheduling and rendering in Chrome DevTools

To upgrade, run:

      npm install react@latest react-dom@latest

    

Sources:

• React Blog > React 19.2
• React Reference > Activity
• React Learn > Separating Events from Effects
• React Reference > eslint-plugin-react-hooks
• React Reference > React Performance Tracks