ReactでPropsをコピーして作成した別のPropsに状態をリンクさせない方法

本日はReactのstateの話です。

二つの状態の変化を比較したかったので、Props（以下、A）の内容（変数の状態）を一旦別のProps（以下、B）コピーしたうえで比較するプログラムを作成しました。

このとき、PropsAの状態をsetPropA()でUpdateすると、意図せず（setPropB()を実行してないにもかかわらず）PropsBも同時に書き換わってしまう現象が起こりました。

このように自動でPropsBが書き換わらない様にするためには、最初にPropsBを作るところの処理を工夫する必要があったのでその備忘録です。

以下のようなPropsAを想定します。

PropsA: 
[{id:1, name: "Ken", state: true},
{id:2, name: "John", state: true}]

例えば、PropsAのid:2のstateをfalseに書き換えたとします。

このとき、以下の方法でPropBを作っている場合は、Aの内容ををsetPropAでupdateしたときにBの内容も書き換わってしまいます。

setPropsB([...PropsA]);

一方、以下の方法でPropBを作ると、明示的にsetPropBで新たな値をセットするまでpropBの内容は書き換わりません。

const tmp = propsA.map((item) => {
  return {...item}
});
setPropB(tmp);

他に良い方法がありそうですが、とりあえずこれで解決できたので備忘録としてメモしました。