React 19.2 所感

【frontend.stmn #1】 React 19.2 所感 Github: junseinagao / Twitter: @junpai_code

自己紹介 長尾准誠 (ながおじゅんせい) 1997年2月生まれ (27歳) 普段は KODANSHAtech 合同会社 で Webフロントエンドエンジニアとして業務 チューバという金管楽器 (🎺の仲間) を高校の頃から続けています 最近は、オーボエを吹くパートナーと一緒に吹奏楽の演奏活動に力を入れています

2025年10月1日 React 19.2 リリースされた
BLOG >
React 19.2
October 1, 2025 by The React Team
React 19.2 is now available on npm!
This is our third release in the last year, following React 19 in December and React 19.1 in June. In this post, we'll give an overview of the new features in React 19.2, and highlight some notable changes.
• New React Features
• <Activity />
• useEffectEvent
• cacheSignal
• Performance Tracks
• New React DOM Features
• Partial Pre-rendering

React 19.2 を使える Next.js 16 Beta も本日 リリースされた Thursday, October 9th 2025 Next.js 16 (beta) Posted by Andrew Clark @acdite Jimmy Lai @feedthejim Jiwon Choi @devjiwonchoi JJ Kasper @_ijk Tobias Koppers @wSokra Next.js 16 (beta) is now available. This early release provides access to the latest improvements to Turbopack, caching, and the Next.js architecture ahead of the stable release. Highlights for this release include: • Turbopack (stable): Default bundler for all apps with up to 5-10x faster Fast Refresh, and 2-5x faster builds • Turbopack File System Caching (beta): Even faster startup and compile times for the largest apps • React Compiler Support (stable): Built-in integration for automatic memoization • Build Adapters API (alpha): Create custom adapters to modify the build process • Enhanced Routing: Optimized navigations and prefetching with layout deduplication and incremental prefetching • Improved Caching APIs: New updateTag() and refined revalidateTag()

React 19.2 の新機能 React • <Activity /> • useEffectEvent • cacheSignal • Performance Tracks React DOM • Partial Pre-rendering

React 19.2 の新機能 React • <Activity /> 👉 注目 • useEffectEvent 👉 注目 • cacheSignal • Performance Tracks 👉 注目 React DOM • Partial Pre-rendering

Performance Tracks 何が出来る？ • Dev Tool の Performance タブにレンダリングの情報 が追加される Next.js での使い方 • Next.js 16-beta にする (React 19.2 を使うため) • next.config.mjsに`reactProductionProfiling: true` を付ける • or `next dev`

Performance Tracks KODANSHAtech MENU To Define Future Media With Tech Message

useEffectEvent
import { useEffectEvent, useEffect } 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]);
// ...
}
useEffectEvent の callback は
常に最新の React State を参照する
依存配列に追加しないルール

useEffectEvent 何が出来る？ • useEffect内で実行したい副作用の関数を依存配列に含 めないようにできる

<Activity /> とは... REACT CONF2025 <Activity mode="visible"|"hidden"> <ChildComponent /> </Activity>

<Activity /> とは... 使い方 • <Activity mode="visible" /> で表示 • <Activity mode="hidden" /> で非表示 疑問 • style="display:none" を付ける場合や、<Visually Hidden />の様なお手製非表示を使うのと何が違う...?

<Activity /> のメリット なぜ、こんな「便利」に過ぎなさそうなAPIを...? React はこれまで 「最小限のAPIで最大限のパフォーマンスを」 に主眼を置いてたはずでは... → <Activity />の特徴を見ると答えが見えてくる

<Activity /> のメリット 特徴 • <Activity />で非表示のDOMは裏でレンダリングされて る (ただしペイントされてない) • 非表示になったとき、useEffectは実行されるが、 React Stateは保たれる ...つまり、<Activity />はメインUIの裏 (Background) でレンダリングできる機能

<Activity /> はパフォーマンスに貢献する
【React Conf day1 の動画を視聴】
https://www.youtube.com/live/zyVRg2QR6LA?si=mydpSxP- YhHTxGw&t=1920
Without Activity - toggle theme
{ display: "none" }
click
timeline

まとめ • Performance Tracks、useEffectEvent、<Activity /> が新APIと して面白いよー。 • React は変わらず単一データフローとレンダリングパフォーマンス に主軸を置いたAPIをスマートに設計してくれていた。 • Next.js 16 Stable 早く来てほしいね。

ありがとうございました！