React 19.2: Activity, Effect Events, and Performance Tooling

Introduction

React 19.2 introduced features that help developers manage component visibility, effect logic, and performance investigations. These features address different problems, but they share a broader goal: making complex interfaces easier to build and understand.

This article looks at Activity, Effect Events, and performance tooling, along with the situations where each is useful.

1. Activity: preserve UI state while hiding content

Some interfaces contain sections that users open and close repeatedly: tabs, panels, editors, or multi-step workflows. Unmounting hidden content can discard its local state, while leaving everything active can waste resources.

React 19.2 introduced the Activity component, which can place a subtree in a hidden mode while preserving its state.

import { Activity, useState } from "react";

function EditorPanel() {
  const [text, setText] = useState("");

  return (
    <textarea
      value={text}
      onChange={event => setText(event.target.value)}
      placeholder="Write something..."
    />
  );
}

function Workspace() {
  const [showEditor, setShowEditor] = useState(true);

  return (
    <>
      <button onClick={() => setShowEditor(value => !value)}>
        Toggle editor
      </button>

      <Activity mode={showEditor ? "visible" : "hidden"}>
        <EditorPanel />
      </Activity>
    </>
  );
}

When the editor becomes hidden, its state can be preserved for when it becomes visible again. Hidden Activity trees also have different effect and rendering behavior from visible trees.

Use Activity where preserving UI state is valuable, but do not assume hidden content is free. Consider the cost of maintaining a large hidden subtree and test the behavior appropriate to the installed React version.

2. Effect Events: separate event-like logic from reactive synchronization

Effects synchronize React with systems outside React, such as browser APIs, subscriptions, or external widgets. A common source of bugs is mixing the logic that establishes a subscription with logic that should use the latest values when an event occurs.

React 19.2 introduced useEffectEvent for supported patterns where effect-managed callbacks need access to the latest props and state without making that callback’s logic itself a reason to re-synchronize the effect.

A simplified example:

import { useEffect, useEffectEvent } from "react";

function ChatRoom({ roomId, theme }) {
  const onConnected = useEffectEvent(() => {
    showNotification(`Connected to ${roomId}`, theme);
  });

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

    connection.on("connected", () => {
      onConnected();
    });

    connection.connect();

    return () => connection.disconnect();
  }, [roomId]);

  return <p>Chat room: {roomId}</p>;
}

The example assumes createConnection and showNotification are provided by the application. The intended distinction is that changing roomId requires a new connection, while changing the theme should affect the notification when the connection event fires.

Effect Events are not a general replacement for dependency arrays, and they should not be used to hide genuine dependencies. Follow the official API restrictions and lint rules for the React version in use.

3. Diagnose performance with profiling tools

React 19.2 also brought improvements to performance tooling, including support for investigating scheduling and rendering behavior. The exact capabilities depend on the version of React Developer Tools and the React build.

When an interface feels slow, record the interaction in the React Profiler and identify which commits and components consume time. Then use browser performance tools to determine whether the bottleneck comes from JavaScript, layout, painting, network activity, or something else.

A high render count is not automatically a performance problem. The important question is whether the work causes a measurable delay or unnecessary resource use.

4. Keep effects focused

An effect should represent a synchronization process with an external system. It should not automatically be used for every calculation that depends on props or state.

For example, derived values often belong directly in rendering:

function PriceSummary({ price, quantity }) {
  const total = price * quantity;

  return <p>Total: {total.toFixed(2)}</p>;
}

There is no need for an effect to copy total into another state variable. Doing so creates an additional update and another opportunity for inconsistent state.

5. Adopt new APIs carefully

Before using a new React API broadly, confirm the minimum React version, update compatible tooling, and check the official documentation for restrictions and edge cases.

Add tests for state preservation, subscriptions, cleanup, and interactions when adopting Activity or Effect Events. Introduce these features where they simplify a real problem rather than changing stable code merely because a new API exists.

Conclusion

React 19.2 offers useful tools for managing hidden UI, separating event-like logic from effect synchronization, and investigating performance. These APIs are most effective when paired with sound component design, clear effect responsibilities, and measurement of actual user-facing behavior.