DEV Community

Muhammad Awais
Muhammad Awais

Posted on • Originally published at webtoolshub.online

React 19.2: Activity, useEffectEvent & React Compiler — A Practical Deep Dive (2026)

#react #nextjs #javascript #webdev

React 19.2 is the most practically significant React release since 19.0. Three major features shipped simultaneously — and together they change how you should structure React apps in 2026.

Most articles describe what these features are. This guide goes further: real before/after code, when not to use each feature, and a safe upgrade path.

🔗 Full deep dive with all code examples: React 19.2 Complete Guide — WebToolsHub

What Shipped in React 19.2

  • <Activity /> — hide UI without losing state
  • useEffectEvent — permanently fixes stale closures in useEffect
  • React Compiler 1.0 Stable — automatic memoization at build time
  • Partial Pre-rendering (PPR) — static shell + dynamic streaming
  • cacheSignal — cancel stale Server Component requests
  • 2 critical security CVEs — patch immediately if you haven't

1. The <Activity /> Component

The problem before React 19.2:

// Option 1 — unmounts completely, state is LOST
{isVisible && <HeavyComponent />}

// Option 2 — keeps state but stays in DOM (accessibility problem)
<div style={{ display: isVisible ? 'block' : 'none' }}>
  <HeavyComponent />
</div>
Enter fullscreen mode Exit fullscreen mode

Neither is great. The first loses state every toggle. The second keeps hidden elements accessible to screen readers.

React 19.2 solution:

import { Activity } from 'react';

<Activity mode={isVisible ? 'visible' : 'hidden'}>
  <HeavyComponent />
</Activity>
Enter fullscreen mode Exit fullscreen mode

In hidden mode: removed from DOM, effects unmounted, but state is preserved. When it becomes visible again — scroll position, form values, accordion states — all exactly where the user left them.

When NOT to use Activity

  • ❌ Modals that should always start fresh (confirmation dialogs)
  • ❌ Components that are cheap to remount (no state, simple UI)
  • ❌ Content the user will likely never see again
  • ✅ Tab panels, sidebars, multi-step forms, split editors

2. useEffectEvent — The Stale Closure Fix

Every React developer has written this bug:

function ChatRoom({ roomId, theme }) {
  useEffect(() => {
    const connection = createConnection(roomId);
    connection.connect();

    connection.on('message', (msg) => {
      showNotification(msg, theme); // theme here = reconnects on every theme change
    });

    return () => connection.disconnect();
  }, [roomId, theme]); // 👈 theme causes unnecessary reconnects
}
Enter fullscreen mode Exit fullscreen mode

The old "solutions" were all bad: add theme to deps (wasteful reconnects), remove it (stale closure bug), use a ref (boilerplate), or disable ESLint (tech debt).

React 19.2's proper fix:

import { useEffect, useEffectEvent } from 'react';

function ChatRoom({ roomId, theme }) {
  // Always reads latest theme — without being a reactive dependency
  const onMessage = useEffectEvent((msg) => {
    showNotification(msg, theme);
  });

  useEffect(() => {
    const connection = createConnection(roomId);
    connection.connect();
    connection.on('message', onMessage); // NOT in dependency array

    return () => connection.disconnect();
  }, [roomId]); // Only reconnects when roomId changes ✅
}
Enter fullscreen mode Exit fullscreen mode

Quick audit: Search your codebase for // eslint-disable-next-line react-hooks/exhaustive-deps. Most of those are legitimate candidates for useEffectEvent.

Rules for useEffectEvent

  • Never call it outside of an effect
  • Never pass it as a prop to other components
  • The updated ESLint plugin enforces both — don't suppress it

3. React Compiler 1.0 Stable

The compiler automatically adds memoization — the equivalent of wrapping things in useMemo, useCallback, and React.memo where it can prove it's safe.

// You write this:
function ExpensiveList({ items, filter }) {
  const filtered = items.filter(item => item.type === filter);
  return filtered.map(item => <Item key={item.id} {...item} />);
}

// Compiler generates the equivalent of:
const ExpensiveList = React.memo(function({ items, filter }) {
  const filtered = useMemo(
    () => items.filter(item => item.type === filter),
    [items, filter]
  );
  return filtered.map(item => <Item key={item.id} {...item} />);
});
Enter fullscreen mode Exit fullscreen mode

Adopt it incrementally — not globally 

// babel.config.js — opt-in mode first
module.exports = {
  plugins: [
    ['babel-plugin-react-compiler', {
      compilationMode: 'annotation', // Only compiles files with directive
    }],
  ],
};

// In specific files — add the directive
'use memo';

export function MyComponent({ data }) {
  // Compiler optimizes this automatically
}
Enter fullscreen mode Exit fullscreen mode

For Next.js 15+:

// next.config.ts
const nextConfig = {
  experimental: {
    reactCompiler: {
      compilationMode: 'annotation',
    },
  },
};
Enter fullscreen mode Exit fullscreen mode

Before enabling: Run eslint-plugin-react-compiler and fix all violations. The compiler silently skips files with violations.

4. Security CVEs — Patch Now

Two CVEs were disclosed in December 2025 affecting React Server Components:

  • CVE-2025-55182 — unauthenticated remote code execution. Affects React 19.0.0–19.2.2.
  • Source code exposure — server component source exposed under specific conditions.

Both patched in React 19.2.3+.

# Check your version
npm list react

# Update immediately if below 19.2.3
npm install react@latest react-dom@latest
Enter fullscreen mode Exit fullscreen mode

These had working exploit demos. Don't delay.

Upgrade Path (Safe Order)

  1. Update React first — npm install react@19.2.3 react-dom@19.2.3 — backward compatible, nothing breaks
  2. Update ESLint plugin — npm install eslint-plugin-react-hooks@latest — fix any new warnings
  3. Audit useEffect deps — find all eslint-disable exhaustive-deps suppressions, evaluate for useEffectEvent
  4. Adopt Activity selectively — 2-3 components where state loss is a real problem
  5. React Compiler last, incrementally — annotation mode, file by file, verify with DevTools Profiler

Related Reads on WebToolsHub

Working with React performance and modern Next.js architecture? These go deeper on specific topics:

Free Tools for React Developers

WebToolsHub has free client-side tools that work without any account:

All tools run 100% in your browser — no data leaves your machine.

Which React 19.2 feature are you most excited about? Drop it in the comments.

Full article with complete code examples, PPR deep dive, and cacheSignal API: webtoolshub.online

Top comments (0)