スプレッド構文のその先へ：React + TypeScriptエンジニアがマスターすべきディープコピーの戦術 — `structuredClone` vs `{ ...obj }`

Reactでは、不変性がキーであり、オブジェクトの更新には直接のミューテーションではなく、コピーを作成する必要があります。スプレッド演算子は浅いコピーを提供しますが、深くネストされたデータ構造では問題が生じる可能性があります。`structuredClone`は、深いコピーのためのネイティブブラウザーソリューションを提供します。スプレッド演算子は、トップレベルのフィールドを値でコピーしますが、ネストされたオブジェクトは参照でコピーされます。これは、フラットな状態やネストされたオブジェクトがすぐに上書きされる場合には適切です。`structuredClone`は、MapやSetを含むさまざまなデータ型を再帰的にコピーしますが、クラスインスタンスや関数は破棄されます。パフォーマンステストによると、スプレッド演算子はフラットなオブジェクトでは高速ですが、`structuredClone`は遅いが完全なコピーを保証します。Reactのパターンでは、ローカルステートの更新には浅いコピーがしばしば十分です。ただし、`structuredClone`は、重いフォームやアンドゥ機能のためのステートのスナップショットの作成には有益です。複雑なデータ構造に対処するには、カスタムのクローニングメソッドやImmerのようなライブラリが有用です。`structuredClone`は循環参照をハンドルしますが、関数やDOMノードではエラーをスローします。スプレッドと`structuredClone`の選択は、正確さに対するマイクロ最適化の必要性に依存します。