#React
RSSフィードRef callback、React v19で追加されたクリーンアップ関数、useEffectとの違いについて。また特にクリーンアップ関数を使ったRef callbackの実装例。
All Posts
Ref callbackとcleanup functions
Ref callback、React v19で追加されたクリーンアップ関数、useEffectとの違いについて。また特にクリーンアップ関数を使ったRef callbackの実装例。
Web ComponentsのReact v19対応
React v19ではグローバルなJSX名前空間が削除されたため、これを利用している場合に型の変更が必要になる。
Q. ローカル環境でのE2EテストがReactDevOverlayにより失敗する
Next.jsを利用したサービスでPlaywrightテストをローカル実行する際に、ReactDevOverlayを非表示する方法について
Q. コンポーネントをuseCallbackで作るかスコープ外の関数として切り出すべきか
個人的には出来る限りスコープ外の関数としてコンポーネントを切り出すべきだと考えている。パフォーマンス、コードとしての質、将来性の観点から説明を行った
React v19 styleタグと@scopeでCSS-in-JSを置き換えることは出来ない。
React v19でstyleタグと@scopeを使って、いくつかのCSS-in-JSライブラリのようにclassNameを指定せずにスタイルのカプセル化が出来るのかを検証した。
Q. React Routerでページ遷移してもErrorBoundaryがリセットされない
React Routerを利用している環境で、一度エラーが表示された後に、パスパラメーターが異なるURLに遷移しても、ErrorBoundaryによって表示されたエラーが画面から消えないと相談を受けた。その理由と対応策について書いた。
Tabs using Parallel Routes with Next.js App Router
公式ドキュメントを十分に読んでいないと理解が難しいと思われるParallel routesが404になる理由やdefault.jsの意味について、タブの実装を例に書いた。
React 19の機能を見る会のメモ
React公式ドキュメントを見ながらReact 19の新機能を見る会を主催した際のメモです。多くは最低限このくらいの理解はしておいた方がいいという内容を事前に羅列しておいたものですが、一部その場で話題になった内容も含まれています。
Q. ESLintで特定のpropsを禁止にしたい
ESLintで特定のpropsを禁止にしたい場合の設定方法について説明する。
Q. ESLintで特定の要素の利用を禁止したい
ESLintで特定の要素の利用を禁止したい場合の設定方法について説明する。
React向けESLint pluginのESLint v9対応状況
ESLint v9がリリースされたが、ESLint pluginのESLint v9対応が出来ていないpluginが複数あり、その対応状況を調査した。
Reactでrefをマージする
Propsから受け取ったrefを内部的なrefとマージする方法を紹介する。
Q. refが取れないので非制御コンポーネントに出来ない
refが取れないので非制御コンポーネントに出来ないという相談を受けたので、非制御コンポーネントとrefの関係について説明した
Q. useRefでステートを管理していいのか
useRefでステートを管理する是非について質問を受けたので、個人的な意見をまとめた。
useEffectEventについてのメモ
useEventの後継として提案されているuseEffectEventについてのメモ。
一部の属性値（data- など）は、型定義がJSXに含まれていなくても型エラーにならない
data-属性やaria-属性などは、型定義がJSXに含まれていなくても型エラーになりません。この理由や型エラーになるケースについて紹介します。
ReactコンポーネントはJSXとして呼ぶべき
ReactコンポーネントをJSX形式ではなく、ただの関数として呼ぶとバグの原因になる場合がある。これが原因のバグの相談を度々受けるので、問題になる例と対策をまとめた。
React公式のuseFormStatusを利用したButton実装が雑にフォームに入れられて便利
React v18.2.0時点ではexperimentalなuseFormStatusを利用すると、重複送信を防ぐボタンを簡単に実装できる。
React Server Componentのメンタルモデル
reactwg/server-componentsのDiscussionsで公開された`Why do Client Components get SSR'd to HTML? `のRSCの説明が分かりやすい。
Q. Migrate to React Router v6 Q&A まとめ
React Router v6に移行する際に気を付けるべき点や、移行時に受けた質問をまとめました。
ReactのRouterライブラリなどでパスの書き間違いから解放される方法
ReactのRouterライブラリなどでパスの書き間違いを防ぎたいと聞かれたので、いくつかの方法を提示した際のメモ。
Q. ページにフォーカスを戻すと入力要素に入力していた内容が吹き飛ぶ場合がある
ページにフォーカスを戻すと入力要素に入力していた内容が吹き飛ぶ場合があるという相談を受けたため、その調査と対応についてまとめた。
Q. E2Eテストで稀に要素が取得出来なくなり失敗する
Playwrightを利用したE2Eテストで稀に要素が取得できなくなり失敗すると相談を受けた際の対応についてまとめた。
Reactの状態管理ライブラリについて比較雑感
Reactの状態管理ライブラリであるJotai、Recoil、Redux、Zustandについて比較した雑感。
React Router v6でパスパラメータが変更されたら再レンダリングしたい
React Router v6でパスパラメータが変更された際も再レンダリングをトリガーする方法を紹介する。
Prism.jsでハイライトされない言語があった
Prism.jsを利用していると対応言語に書かれているがハイライトされない言語がいくつかあった。これはprism-react-rendererからprismjs本来の機能を使うように移行した際のメモです。
Reactのイベント型について
Reactのイベント型について書いた。React.MouseEvent、React.ChangeEvent、React.SyntheticEvent、NativeのEvent型、React.XXXEventHandlerなどについて、どれを使うべきか。
React Function Componentの型について何を使うべきか
ReactのFunction Componentの型は、歴史的な理由などにより様々な記述ができる。React.FunctionComponent、React.FC、React.VFC、(props: SomeComponentProps): JSX.Elementなどがある。
Reactのpropsをunion typeにする方法について
Reactのpropsをunion typeにする方法をいくつか紹介する。ただし、これらの利用やそもそもunion typeをpropsに使うこと自体が適切かどうかは慎重に検討する必要がある。
ReactとTypeScriptでHTML属性を拡張する方法について
ReactとTypeScriptでHTML属性を拡張する方法について書いた。React.ComponentPropsWithoutRefやReact.ComponentPropsWithRef、React.ComponentProps、JSX.IntrinsicElements、React.DetailedHTMLProps、React.ButtonHTMLAttributes、React.HTMLProps、React.AllHTMLAttributes、React.HTMLAttributesなど。
Fire-and-forgetパターンとuseEvent
Fire-and-forgetパターンつまりuseEffectOnceのようなコードをuseEventでどのように置き換えられるか
Upgrade to React 18
会社にて、ほとんどのサービスのReactのバージョンをアップグレードするイベントを開催した際のQ&Aなどをまとめました。
Reactクイズ：要素を返す前にstateを更新すると何が起きるか
要素を返す前にstateを更新すると何が起きるかのクイズ。
React Router V6でOutletを利用したページコンテンツの遅延読み込み
リリースされたばかりのReact Router V6のOutletを使って、ページコンポーネントを遅延読み込みするいい感じの方法を考えた。
Q. React-RouterでURLをリダイレクトさせたら元のページに戻れなくなった。
React-Routerでリダイレクトさせる際にreplaceさせないと、リダイレクトされるページの前にいたページに戻れなくなるのは当たり前だと思うが、質問があったのでまとめた。
なぜgetElementByIdやquerySelectorではなく、useRefを使うのか
ReactにおいてgetElementByIdやquerySelectorを避けた方が良い理由の説明。
なぜreact-hooks/exhaustive-depsはただcomponentDidMountのように使いたいだけなのに依存関係を入れてくるのか
useEffectのdepsに依存関係を入れる理由について解説する。
News bits
React Foundation、Linux Foundation傘下に設立
Linux Foundation傘下の独立財団として正式にローンチ。初期メンバー8社の決定やプロジェクト管理の移行など。
ChartGPU 0.1が公開、WebGPUベースの高性能チャートライブラリ
WebGPUを活用した新しいオープンソースのチャートライブラリ「ChartGPU」が公開された。Canvas2Dや従来のWebGLベースのライブラリでは困難だった、100万点を超える大規模データセットの60fpsでのスムーズなレンダリングを実現する。
VercelがReact Best Practicesを公開
Vercelが10年以上にわたるReactとNext.jsの最適化ノウハウをまとめたreact-best-practicesリポジトリを公開した。 8つのカテゴリー（ウォーターフォールの排除、バンドルサイズの削減など）にわたり、40以上のルールがCRITICALからLOWの重要度とともに提供されている。AIエージェント向けのスキルとしても提供されており、npx add-skill vercel-labs/agent-skillsで導入できる。 ### 参考文献
Introducing RSC Explorer
Dan AbramovがReact Server Components (RSC) の動作を視覚的にデモするためのツール「RSC Explorer」を公開した。
Next.js 16.1リリース
Next.js 16.1がリリースされた。Turbopackファイルシステムキャッシュの安定化とツール改善が中心。
React2Shellセキュリティ脆弱性
React Server Componentsの重大な脆弱性「React2Shell」（CVE-2025-55182）が公開された。CVSSスコアは10.0（Critical）。Next.jsではCVE-2025-66478として識別される。特定の条件下で、細工されたリクエストによりリモートコード実行が可能になる。
React Foundation設立発表
ReactとReact NativeがMetaからReact Foundationに移管される。Linux Foundation傘下の新しい組織で、Amazon、Callstack、Expo、Meta、Microsoft、Software Mansion、Vercelが創設企業メンバー。
React 19.2リリース
React 19.2がリリース。コンポーネント、useEffectEventフック、cacheSignal、Performance Tracks、Partial Pre-renderingなど新機能を追加。
TanStack DB 0.1ベータ版リリース
TanStack QueryのためのクライアントサイドデータベースTanStack DB 0.1がリリース。従来のReactアプリの状態変更が引き起こす大量の再レンダリング、フィルター処理、useMemo実行、スピナー点滅の問題について、開発者がView固有API（高速レンダリング、API乱立）か全データ読み込み後フィルター（シンプルバックエンド、低速クライアント）の二択を迫られる状況に対し、Differential dataflowによる第三の選択肢を提供。10万件ソート済みコレクションの1行更新を0.7msで処理し、正規化されたコレクションから増分結合をミリ秒レベルで実現。既存のuseQuery呼び出しをラップして段階的導入が可能。恐らくSPAアプリケーションで恩恵が大きい。 ### 参考文献
React Compiler段階的導入ガイド公開
React Compilerの段階的導入ガイドが公式ドキュメントに追加。全コードベースを一度に最適化する必要がなく、小さな部分でテストしてから拡張する戦略を詳細に解説。Babel overridesによるディレクトリベース導入、"use memo"ディレクティブによるコンポーネント単位の制御、runtime gatingによるフィーチャーフラグ制御の3つのアプローチを提供。本番アプリケーションでの安定性確保、Rules of React違反の段階的修正、A/Bテストによる影響測定が可能になり、企業での実用的な採用パスを明確化。 ### 参考文献
React Labs が View Transitions、Activity、その他の実験的機能を発表
React Labs が新しい実験的機能と開発中の機能についての最新情報を公開。View Transitions と Activity の 2 つの実験的機能が試用可能になり、その他の開発中機能の進捗も報告された。
React Compiler RC 公開
React Compiler のリリース候補（RC）が公開。自動メモ化によるパフォーマンス最適化をビルド時に実現。optional chain や配列インデックス依存の最適化、ref-in-render 検証のデフォルト無効化、swc 対応の強化、Next.js 15.3.1 以降でのビルド高速化など。ESLint 用のルールはeslint-plugin-react-hooksに統合。 ### 参考文献
Next.js 15.3 リリース
Next.js 15.3 がリリースされた。Turbopack の next build でのサポート。実験的な機能として Rspack のサポート。Client Instrumentation hook と Navigation hooks を追加。TypeScript plugin の改善により大規模な codebase でのサポートを向上など。
Material UI v7 がリリース
Material UI v7 が正式にリリースされました。
React 19.1.0 リリース
React 19.1.0 がリリース。
styled-components がメンテナンスモードに
styled-components のコアメンテナーである quantizor 氏が、プロジェクトをメンテナンスモードに移行することを発表しました。
Lynx
ByteDance が React/CSS を使って iOS/Android/Web アプリを開発できるツールキット Lynx を公開。
State of React 2024
State of React 2024 が公開。
React Router v7.2.0
React Router v7.2.0 がリリース。
Sunsetting Create React App
CRA（Create React App）が公式に非推奨となった。 Next.js や React Router などのフレームワークや、Vite や RSBuild などのビルドツールへの移行を推奨している。
React Compiler の Rust 実装削除
React Compiler の Rust 実装が削除された。JavaScript に賭けるとのこと。
react-redux v9.2.0
React v19 互換の react-redux v9.2.0 がリリースされた。
SWR v2.3.0
SWR が 10 ヶ月ぶりにアップデートされ、v2.3.0 がリリースされた。
Next.js 15.1
Next.js 15.1 がリリースされた。
React v19
React v19 がリリースされた。
React Scan
Million Lint の開発している React Scan が話題になっていた。
Framer Motion is now independent
React のアニメーションライブラリである Framer Motion は、今後 Framor から独立して開発される。
React Router v7 リリース
React Router v7 リリース。 Remix の機能を統合し、React 18 と 19 の架け橋となるバージョン。
pqoqubbw/icons
lucide アイコンに Framer Motion で動きを付けた React 用のアイコンセット。
React Compiler を React v18 で利用する
React Compiler がベータリリースされた。
What's new in React 19 – Vercel
Vercel による React v19 の新機能について知っておいた方が良さそうなものを説明する記事が公開された。
pnpm v9.5 Catalogs
pnpm v9.5 がリリースされました。
React v19 リリース延期について
Suspense の仕様変更について議論を受けて、良い修正は見つかるまで React v19 のリリースを延期する予定であるという発言が React コアチームメンバーからありました。
React Conf 2024 Recap
公式による React Conf 2024 の振り返り。
React Conf Follow-Up - Remix
Remix による React Conf のフォローアップ記事。
React Compiler
React Compiler が OSS として公開されました。Babel plugin として現状提供されており、IR/SSR への変換などは Rust で実装されています。
React Conf 2024
React Conf 2024 が 5 月 15 日から 16 日に掛けて開催されました。アーカイブを YouTube で確認することが出来ます。
React v18.3
2024 年 4 月 25 日、React v19 Beta の公開に合わせて、React v18.3 も公開されました。
ja.react.dev の更新
色々なページが翻訳されている。
データフェッチングの Suspense は現在非推奨
そもそも SWR の suspense 機能は experimental だが、React と SWR の開発者はデータフェッチングに Suspense を利用することを非推奨にしている。
Flaky Tests In React: Detection, Prevention and Tools
testing-library を使った React の Flaky テストが発生する一般的なパターンと、その一般的な調査方法。
Flow, component & hook **declarations**
Flow v0.233.0 で、React 用の component と hook 構文が追加された。これらを function の代わりに利用することで、ref のベストプラクティスの強制や、props が深い読み取り専用であることの確認や、Hooks が React のプログラミングモデルに則しているが確認される。
useFormState が useActionState に変更された
useFormState の扱うアクションはそもそも form に関連しておらず、これが useFormStatus のように pending を返す場合、名前に反して form に紐づいた状態を返さない問題などがあった。また react-dom ではなく react から export するようになり、react native などでも利用できるようになった。
Storybook v8
2024 年 3 月 11 日に、Storybook 8 がリリースされました。
React Strict DOMが公開
Meta が React Strict DOM（RSD）を公開しました。これは Web およびネイティブ用のスタイル付き React コンポーネントの開発の改善および標準化を目的とした React DOM と StyleX の実験的な統合とのことです。
React Compiler
2024 年 2 月 15 日の React の記事にて、React Forget として知られていた React Compiler について触れられていました。React Compiler は既に Instagram の本番環境で動作しているそうです。
Announcing v0: Generative UI
https://vercel.com/blog/announcing-v0-generative-ui
Did the React team forget the React Forget compiler?
https://www.reddit.com/r/reactjs/comments/16nnh4z/comment/k1jbr4t/
v0.dev - AI tool that is effectively Midjourney for React
Vercel が、プロンプトから shadcn/ui と Tailwind CSS を利用した React のコードが生成する AI ツールをリリースしました。 ### 参考文献
Storybook 7.1
Storybook 7.1 がリリース。Storybook は 7.0 以降小さいサイズでリリースを行なっていく方針とのことです。
React Canaries
React は今後カナリアリリースを行なっていく。
Next.js 13.4
Next.js 13.4 がリリース。
Reactの新しいドキュメントサイトreact.devが正式リリース
2023 年 3 月 17 日に、React の新しいドキュメントサイトである react.dev が正式にリリースされました。
著者について
Hi there. I'm hrdtbs, a frontend expert and technical consultant. I started my career in the creative industry over 13 years ago, learning on the job as a 3DCG modeler and game engineer in the indie scene.
In 2015 I began working as a freelance web designer and engineer. I handled everything from design and development to operation and advertising, delivering comprehensive solutions for various clients.
In 2016 I joined Wemotion as CTO, where I built the engineering team from the ground up and led the development of core web and mobile applications for three years.
In 2019 I joined matsuri technologies as a Frontend Expert, and in 2020 I also began serving as a technical manager supporting streamers and content creators.
I'm so grateful to be working in this field, doing something that brings me so much joy. Thanks for stopping by.