React 19.3
概要
このスキルは、React 19.3 のルールのうち、間違いやすいものをまとめています。存在すべきでないエフェクト、依存関係のトラップ、アクションとそのトランジション、サーバーコンポーネントの境界、React コンパイラの採用、19 で削除または非推奨になった API などです。すべての主張には、そのページの URL が付随しています。
対象バージョン
React 19.3。これは react.dev でドキュメント化されているリリースです。以前のメジャーバージョンは 18.react.dev およびそれ以前のサイトにあります。https://react.dev/versions
クイックスタートを読み、タスクに一致するリファレンスファイルを 1 つ開いてください。
クイックスタート
- Effect は、React が制御しないシステムと同期するためにのみ使用してください。レンダリング中に値を導出し、
keyで状態をリセットし、ユーザー起因のロジックはイベントハンドラで実行します。https://react.dev/learn/you-might-not-need-an-effect - 依存関係はコードに従います。
react-hooks/exhaustive-depsを抑制しないでください。依存関係を削除するには、オブジェクトや関数を Effect の内部に移動するか、updater を使用するか、Effect Event から値を読み取ります。https://react.dev/learn/removing-effect-dependencies
const onConnected = useEffectEvent(() => {
showNotification('Connected!', theme);
});
useEffect(() => {
const connection = createConnection(serverUrl, roomId);
connection.on('connected', () => { onConnected(); });
connection.connect();
return () => connection.disconnect();
}, [roomId]);
https://react.dev/learn/separating-events-from-effects
- Effect は、セットアップ、クリーンアップ、セットアップのサイクルに耐えられる必要があります。Strict Mode は開発時にこれを実行します。クリーンアップを修正し、ref ガードで 2 回目の実行を隠さないでください。https://react.dev/learn/synchronizing-with-effects
refは関数コンポーネントのプロパティです。プロバイダとして<Context value={x}>をレンダリングします。ref コールバックはそのクリーンアップを返すことができます。https://react.dev/reference/react/useRef および https://react.dev/reference/react/createContext および https://react.dev/reference/react-dom/components/commonstartTransition内のawaitの後の状態セットは Transition ではありません。別のstartTransitionでラップしてください。https://react.dev/reference/react/useTransition<form action>では、useActionStateリデューサは(prevState, formData)を受け取ります。Action からdispatchActionを呼び出します：<form action>またはstartTransition。https://react.dev/reference/react/useActionStateuseFormStatusは親の<form>のみを読み取ります。子コンポーネントで呼び出してください。https://react.dev/reference/react-dom/hooks/useFormStatususe(promise)にはキャッシュされた Promise が必要です。レンダリング中に作成された Promise はレンダリングのたびに再作成されます。useをtry/catchでラップしないでください。代わりに Error Boundary を使用してください。https://react.dev/reference/react/use'use server'はサーバー関数を示し、サーバーコンポーネントは示しません。サーバーコンポーネントにはディレクティブはありません。すべてのサーバー関数の引数を検証し、認可を確認してください。https://react.dev/reference/rsc/server-components および https://react.dev/reference/rsc/use-server- ブラウザ専用コンポーネント：
typeof windowやマウント済みフラグの代わりに、<Suspense>境界の下で、use(browser())（browserはreact-domから）を使用します。https://react.dev/reference/react-dom/browser - React Compiler では、プレーンなコードを記述し、
useMemoやuseCallbackは、Effect の依存関係など、正確な制御が必要な場合にのみ保持します。既存のメモ化はそのままにしておきます。https://react.dev/learn/react-compiler/introduction eslint-plugin-react-hooksのrecommendedでリンターをかけてください。これにはコンパイラのルールが含まれているため、eslint-plugin-react-compilerは削除してください。https://react.dev/blog/2025/10/07/react-compiler-1- コンポーネントはモジュールレベルで定義し、他のコンポーネントの内部では定義しないでください。https://react.dev/reference/eslint-plugin-react-hooks/lints/static-components
&&の左側に数値を置かないでください。count && <p/>は0をレンダリングします。https://react.dev/learn/conditional-rendering
リファレンスファイル
| ファイル | 開くタイミング |
|---|---|
| references/state.md | useState、updater、レンダリング中のセット、useReducer、イミュータブルな更新、状態構造、key リセット |
| references/refs-and-context.md | useRef、ref コールバック、ref プロパティ、useImperativeHandle、コンテクスト、useId、useSyncExternalStore |
| references/effects.md | Effect を使用すべきでない場合、useEffect のタイミング、Strict Mode のクリーンアップ、データフェッチ、useLayoutEffect、useInsertionEffect |
| references/effect-dependencies.md | 依存関係の削除、useEffectEvent、カスタムフック、additionalEffectHooks |
| references/memoization.md | useMemo、useCallback、memo、コンパイラがある場合とない場合 |
| references/react-compiler.md | インストール、オプション、ディレクティブ、段階的な採用、コンパイラのデバッグ |
| references/rules-and-lints.md | React のルール、フックのルール、eslint-plugin-react-hooks のルール、Strict Mode |
| references/components-and-tooling.md | キー、条件付きレンダリング、Fragment 参照、Profiler、act、TypeScript、DevTools |
| references/transitions-and-suspense.md | useTransition、startTransition、useDeferredValue、use、lazy、<Suspense> |
| references/view-transitions-and-activity.md | <ViewTransition>、addTransitionType、<Activity> |
| references/actions-and-optimistic.md | useActionState、useOptimistic、useFormStatus、<form action> |
| references/form-elements-and-events.md | 制御された入力、<select>、<textarea>、共通プロパティ、イベント、カスタム要素 |
| references/server-components.md | サーバーコンポーネント、'use client'、シリアライズ可能なプロパティ、cache、cacheSignal、taint |
| references/server-functions.md | 'use server'、サーバー関数の呼び出し、パーマリンク、セキュリティ |
| references/client-roots-and-hydration.md | createRoot、hydrateRoot、不一致、エラーレポート、Error Boundary |
| references/server-rendering.md | renderToPipeableStream、renderToReadableStream、ステータスコード、prerender、resume |
| references/dom-apis-and-resources.md | browser、createPortal、flushSync、preload、preinit、<img>、<link>、<script>、<title> |
| references/upgrading-to-19.md | アップグレード手順、codemod、削除・非推奨 API、TypeScript の変更点、19.2 と 19.3 |
| references/legacy-apis.md | Children、cloneElement、クラスコンポーネント、forwardRef、PureComponent |
古いパターン
| 古い使用法 | 置き換え | 出典 |
|---|---|---|
forwardRef((props, ref) => ...) | function MyInput({ ref, ...props }) | https://react.dev/reference/react/forwardRef |
<Context.Provider value={x}> | <Context value={x}> | https://react.dev/reference/react/createContext |
<Context.Consumer> レンダープロップ | useContext(Context) または use(Context) | https://react.dev/reference/react/createContext |
ReactDOM.useFormState | react の useActionState | https://react.dev/blog/2024/12/05/react-19 |
ReactDOM.render、ReactDOM.hydrate | createRoot(el).render()、hydrateRoot | https://react.dev/reference/react-dom |
unmountComponentAtNode | root.unmount() | https://react.dev/reference/react-dom |
findDOMNode | DOM ref | https://react.dev/blog/2024/04/25/react-19-upgrade-guide |
文字列 ref、this.refs | ref コールバックまたは createRef | https://react.dev/blog/2024/04/25/react-19-upgrade-guide |
contextTypes、getChildContext | createContext、static contextType | https://react.dev/blog/2024/04/25/react-19-upgrade-guide |
element.ref | element.props.ref | https://react.dev/blog/2024/04/25/react-19-upgrade-guide |
react-test-renderer、shallow レンダリング | Testing Library | https://react.dev/blog/2024/04/25/react-19-upgrade-guide |
型のグローバル JSX 名前空間 | declare module "react" { namespace JSX {} } | https://react.dev/blog/2024/04/25/react-19-upgrade-guide |
| UMD ビルドのスクリプトタグ | esm.sh などの ESM CDN | https://react.dev/blog/2024/04/25/react-19-upgrade-guide |
propTypes | TypeScript | https://react.dev/blog/2024/04/25/react-19-upgrade-guide |
関数コンポーネントの defaultProps | ES デフォルトパラメータ | https://react.dev/blog/2024/04/25/react-19-upgrade-guide |
import { act } from 'react-dom/test-utils' | import { act } from 'react' | https://react.dev/blog/2024/04/25/react-19-upgrade-guide |
同期的な act(() => ...) | await act(async () => ...) | https://react.dev/reference/react/act |
null 呼び出しに依存する ref コールバック | クリーンアップ関数を返す | https://react.dev/reference/react-dom/components/common |
SSR のための renderToString | renderToPipeableStream または renderToReadableStream | https://react.dev/reference/react-dom/server/renderToString |
renderToNodeStream、renderToStaticNodeStream | react-dom/server のストリーミング API | https://react.dev/reference/react-dom |
| SSR をスキップするためのサーバーでのスロー | use(browser()) | https://react.dev/reference/react/Suspense |
Effect でセットされる isClient 状態、レンダリングでの typeof window | <Suspense> の下の use(browser()) | https://react.dev/reference/react-dom/browser |
eslint-plugin-react-compiler | eslint-plugin-react-hooks | https://react.dev/blog/2025/10/07/react-compiler-1 |
"use no forget" | "use no memo" | https://react.dev/reference/react-compiler/directives/use-no-memo |
@vitejs/plugin-react 6 の react({ babel: { plugins: [...] } }) | @rolldown/plugin-babel の reactCompilerPreset | https://react.dev/learn/react-compiler/installation |
componentWillMount、componentWillReceiveProps、componentWillUpdate | UNSAFE_ 名、またはページの代替 | https://react.dev/reference/react/Component |