migrate-v8-to-v9

React v8 から v9 への移行チェックリスト

開始する前に、intent load @tanstack/table-core#migrate-v8-to-v9 を実行してください。共有チェックリスト全体を確認し、アプリケーションで使用している API の詳細なコアマッピングを読んでください。このチェックリストでは、React 固有の変更を扱います。

フレームワークの前提条件：React 18 以降（react >=18）。

アダプターの監査

• useReactTable を useTable に置き換え、@tanstack/react-table/legacy の一時的な useLegacyTable があれば削除します。
• モデル入力を安定させ、明示的な tableFeatures とその行モデル用スロットを使用します。共有されている変更はすべて、コアチェックリストで確認してください。
• レンダリングでの読み取りを、選択した table.state、table.Subscribe、または useSelector に置き換えます。Atom／ストアのスナップショットだけでは、React は購読しません。
• 制御対象の各 state スライスにアップデーターコールバックを組み合わせるか、安定した React Store Atom を指定します。グローバルな onStateChange オプションは削除します。
• コンパイラーによるメモ化でビルダーメソッドの読み取りが隠れていないか、子コンポーネントを確認します。子コンポーネント内で購読するか、選択した値を子コンポーネントに渡してください。
• 適切な箇所では table.FlexRender または単独の FlexRender を使用します。flexRender も引き続きサポートされています。
• 繰り返し使用する規約がある場合に限り、tableOptions または createTableHook を導入します。アプリのラッパーと型付きコンテキストの境界は維持してください。

該当する詳細を確認する

監査で古い React の構築方法、状態管理、レンダリング、またはアプリフックのコードが見つかった場合は、編集前にアダプターの移行に関する詳細を読んでください。置き換え用のレンダリングのひな型については、はじめにを読んでください。移行後に制御対象の状態や古い状態に関する問題がある場合は、テーブルの状態を読んでください。

ピン留め、サイズ調整、並べ替え、選択、プロトタイプメソッド、型、レジストリに関する共通の変更は、コア移行リファレンスで扱います。useReactTable の名前を変更するだけでは、移行は完了しません。

移行を検証する

• インストール済みの v9 アダプターを使って型チェックを行い、有効にしたクライアント機能／手動機能のすべてのフローを実行します。
• 外部状態の書き込み、リアクティブなデータの置き換え、および上記で変更したフレームワークのレンダリング経路を検証します。
• コアチェックリストを完了します。該当する機能を使用する場合は、レイアウトと選択の動作も確認してください。
• 目標が明示的な機能ツリーシェイキングである場合は、一時的な stockFeatures を置き換え、useLegacyTable を削除します。

API の確認

node_modules/@tanstack/react-table/dist/index.d.ts とエクスポートされたアダプター宣言を確認してください。共有 API については、node_modules/@tanstack/table-core/dist/index.d.ts を使用してください。