React new features (Activity and useEffectEvent)

Transcript

1. React new features <Activity /> and useEffectEvent November 14, 2025 たいぴー
2. 自己紹介（Self introduction） Name: たいぴー Favorite: ・猫（Cats） ・読書（Books） Blog ・はてなブログ: https://taipy.hatenablog.com/ ・note: https://note.com/taipy_1444 2
3. React 19.2 リリース！ 3
4. React 19.2 リリース 概要 • New React Features • <Activity /> • useEffectEvent • cacheSignal • Performance Tracks • New React DOM Features • Partial Pre-rendering • Notable Changes • Batching Suspense Boundaries for SSR • SSR: Web Streams support for Node • eslint-plugin-react-hooks v6 • Update the default useId prefix 4
5. <Activity /> 5
6. <Activity /> <Activity> lets you hide and restore the UI and internal state of its children. <Activity>は、その子要素のUIと内部状態を非表示にしたり、復元したり することを可能 にします。 Reference：https://react.dev/reference/react/Activity 6
7. Usage Before 7
8. Usage After https://react.dev/reference/react/Activity#restoring-the-state-of-hidden-components 8
9. <Activity /> Demo <Activity> – React 9
10. useEffectEvent 10
11. useEffectEvent useEffectEvent is a React Hook that lets you extract non-reactive logic from your Effects into a reusable function called an Effect Event. useEffectEvent は、エフェクトから非リアクティブなロジックを、エフェクトイベント (Effect Event) と呼ばれる再利用可能な関数へと抽出できるようにする React フックです。
 
 reference: https://react.dev/reference/react/useEffectEvent
 
 11
12. Usage - useEffectEvent 12
13. Demo - useEffectEvent 13
14. その他 Reactの最新情報は次のサイトで要チェック！ https://react.dev/blog 14
15. Summary <Activity /> : Preserve state when hidden（状態を保ったまま非表示） useEffectEvent : Separate event logic from Effect（エフェクト内のイベント切り出し） 最新情報はBlogを要Check！ 15
16. 参考文献 • [React 19.2 – React](https://react.dev/blog/2025/10/01/react-19-2) • [React Compiler v1.0 – React](https://react.dev/blog/2025/10/07/react-compiler-1) 16