React 19.2: Deep Dive into Activity and useEffectEvent

React 19.2: Deep Dive into Activity and useEffectEvent

React 19.2 introduces two exciting new developer APIs: Activity and useEffectEvent.

These features make it easier to manage hidden UI, preserve component state, and handle effects without stale closures or unnecessary re-renders.

In this post, we’ll explore each in detail.

---

🚀 Activity Component

What it is

The Activity component allows you to manage parts of your UI that you want to hide or defer without fully unmounting them, while controlling effect behavior and update priority.

It provides a middle ground between:

• Conditional rendering ({visible && <Component />}), which unmounts the component and loses state.
• CSS-based hiding (display: none), which preserves state but keeps effects running and consuming resources.

The Activity component lets you preserve state while pausing effects when a subtree is hidden.

---

How it works

• Wrap a subtree inside <Activity mode={...}>.
• Supported modes in v19.2 are visible and hidden.
  • visible: the component is shown, and effects run normally.
  • hidden: effects are paused/unmounted, but state is preserved. Updates may be deprioritized.

This makes Activity ideal for components that:

• Are hidden temporarily (tabs, modals, sidebars).
• Need their internal state preserved while not actively rendering or running effects.
• Benefit from deferred updates for performance optimization.

---

Key Use Cases

• Tab panels that preserve forms or input state when switching tabs.
• Sidebars or drawers that toggle visibility but keep scroll position and input data.
• Pre-rendering non-critical UI to improve perceived responsiveness.

---

Important Considerations

• Hidden components won’t run effects, so data fetching or subscriptions must be handled carefully.
• Updates are deferred, so background updates may not occur until visible.
• Behavior differs from unmounting — components expecting cleanup on hide may need adjustment.
• Check compatibility with SSR and frameworks like Next.js.

---

🧠 useEffectEvent Hook

What it is

The useEffectEvent hook allows you to define callbacks that always see the latest props and state without causing unnecessary effect re-runs.

It solves the common “stale closure” problem in React hooks, where callbacks inside useEffect may reference outdated state or require overly broad dependency arrays.

---

How it works

• Define an event callback using useEffectEvent.
• Inside the callback, you can safely access the latest state and props.
• The callback does not trigger the effect to re-run unnecessarily.
• This separates reactive effect setup/cleanup from event logic that depends on dynamic values.

---

Benefits

• Avoids stale closures in callbacks inside effects.
• Reduces unnecessary effect re-executions.
• Cleans up code by separating setup/cleanup logic from event handling.

---

Key Considerations

• Still requires proper effect dependencies; it is not a shortcut to ignore dependency arrays.
• Event callbacks should not be treated as general-purpose functions passed around arbitrarily.
• Test behavior carefully with SSR and concurrent rendering scenarios.

---

🔑 Summary

React 19.2 introduces:

• Activity component: Hide UI while preserving state and pausing effects.
• useEffectEvent hook: Define event callbacks that always see the latest props/state without unnecessary effect reruns.

These tools improve developer ergonomics and app performance, particularly in complex UI-heavy applications and server-rendered environments.

---

💬 Have you tried using Activity or useEffectEvent in your projects yet?

How do you see them fitting into your component patterns? Let’s discuss in the comments below.