Au-delà de la propagation : `structuredClone` vs `{ ...obj }` — Stratégies de copie profonde que tout ingénieur React + TypeScript devrait maîtriser

Dans React, l'immuabilité est essentielle, nécessitant des copies d'objets pour les mises à jour au lieu de mutations directes. Alors que l'opérateur de spread fournit une copie superficielle, il peut entraîner des problèmes avec les structures de données imbriquées. `structuredClone` offre une solution native du navigateur pour la copie profonde. L'opérateur de spread copie les champs de premier niveau par valeur, mais les objets imbriqués sont copiés par référence. Cela convient pour les états plats ou lorsque les objets imbriqués sont immédiatement réécrits. `structuredClone` copie de manière récursive divers types de données, notamment les cartes et les ensembles, mais il élimine les instances de classe et les fonctions. Les tests de performance montrent que l'opérateur de spread est plus rapide pour les objets plats, tandis que `structuredClone` est plus lent mais assure une copie complète. Pour les modèles React, les copies superficielles sont souvent suffisantes pour les mises à jour d'état locales. Cependant, `structuredClone` est bénéfique pour créer des instantanés d'état dans les formulaires lourds ou pour la fonctionnalité d'annulation. Lorsque vous géérez des structures de données complexes, des méthodes de clonage personnalisées ou des bibliothèques comme Immer peuvent être utiles. `structuredClone` gère les références circulaires, mais lancera des erreurs pour les fonctions ou les nœuds DOM. Le choix entre l'opérateur de spread et `structuredClone` dépend de la nécessité de correction versus les micro-optimisations.