【ITニュース解説】Don't Sync State. Derive It! - The Mental Model That Fixes Half Your React Bugs

Reactアプリケーションを開発する際、状態管理は非常に重要な要素だが、不適切な方法は多くのバグや複雑さを生む。特に、useEffectフックを使ってある状態変数を別の状態変数にコピーする「状態同期」は、多くの開発者が無意識のうちに行ってしまう一般的な誤りだ。この解説では、なぜ状態同期が問題を引き起こすのか、そしてどのように「導出（Derivation）」という考え方を取り入れるべきかを説明する。

よくある間違いとして、ユーザーダッシュボードの例を考える。サーバーから取得した全ユーザーリストがあり、ユーザーが入力したキーワードでフィルタリングされたリストを表示したいとする。このとき、多くの開発者は、元のユーザーリスト（users）、フィルタリング後のユーザーリスト（filteredUsers）、検索キーワード（searchTerm）の三つを独立した状態変数として管理しようとする。

具体的には、useStateでこれらを定義する。usersはサーバーデータ取得時に更新され、searchTermは入力に応じて更新される。問題となるのは、usersまたはsearchTermが変更された際に、useEffectフック内でusersをsearchTermでフィルタリングし、その結果をfilteredUsersにsetFilteredUsersで設定するという処理だ。

このアプローチは、「真実の源（Source of Truth）」が複数になる問題を引き起こす。本質的に同じ情報を異なる形で保持する状態変数が二つ存在するためだ。これはデータベース設計の原則「計算できるものは保存しない」に反する。計算によって導き出せるデータを別々に保存すると、様々な問題が生じる。

最も顕著な問題は「同期ズレ」だ。元のusersやsearchTermが更新されても、filteredUsersを更新するuseEffectの実行にはわずかな遅延が生じる場合がある。この遅延により、一時的に古いfilteredUsersが表示され、不正確な情報がユーザーに提示される。複雑な同期ロジックは、「競合状態（Race Conditions）」といった予測困難なバグの原因にもなり得る。また、二段階の更新による不要な再レンダリングが発生し、パフォーマンスが低下することもある。これらはコードの複雑性を増し、開発者の認知負荷を高める。

このような同期の問題を解決する最善策が「導出」の考え方だ。派生する状態を独立した状態変数として保存せず、必要な時に元のデータから直接計算して「導き出す」アプローチを取る。

先のユーザーダッシュボードの例では、usersとsearchTermはuseStateで管理するが、filteredUsersはuseStateでは管理しない。代わりに、コンポーネントのレンダリング関数内で、usersとsearchTermを使って直接フィルタリング処理を行い、その結果をfilteredUsersとして定義する。このシンプルな変更により、filteredUsersは常にusersとsearchTermの最新の値に基づいて計算されるため、同期ズレの懸念が一切なくなる。真実の源はusersとsearchTermに限定され、コードは大幅にシンプルになり、バグのリスクも劇的に減少する。

Reactはこのような導出パターンに対して効率的に動作するよう最適化されており、ほとんどの計算は高速だ。もし非常にパフォーマンスが重要な計算が必要になった場合でも、useMemoフックを選択的に使用して最適化を図ることは可能だが、これは必要になった時に検討すべきことである。

この「導出」の考え方は、他の多くの場面でも適用できる。例えば、親コンポーネントからpropsとして渡されたデータを子コンポーネントのuseStateにコピーして使うことは同期の一般的な間違いであり、propsを直接使用すべきだ。サーバーから取得したデータを加工して別のuseStateに格納するような場合も、元のデータを直接加工して表示するべきだ。合計金額のような計算結果も、元の商品のリストから毎回計算すれば、別途useStateで保持する必要はない。

これらの実例が示すように、状態を同期させるのではなく導出させることで、コードは大きく簡素化され、データの流れが予測しやすくなる。これは、アプリケーション内で単一の真実の源を確立し、同期の複雑さやそこから生じるバグを根本から排除することにつながる。

あなたのコードベースで同期の問題を見つけるには、useEffectフック内でsetSomeState(derivedFromOtherState)のようなパターンや、同じ情報を表す二つの状態変数が存在する場合に注意を払うと良い。

この状態管理の考え方の転換は、Reactアプリケーションの堅牢性と保守性を大きく向上させる。次に状態を同期させようと考える場面に遭遇したら、一度立ち止まって「これを導出できないか？」と自問することが重要だ。Reactのデータフロー原則の背後にある「なぜ」を深く理解することで、より信頼性が高く、理解しやすいコードを書くための答えが自然と見えてくるだろう。導出戦略を採用することは、あなたのReact開発を次のレベルへと引き上げる強力な武器となる。