[React] 多次元配列(オブジェクト)のsetStateが2回実行されてしまう原因

管理者

2年前

概要
例
補足
参考サイト
関連書籍

概要

ReactのuseStateフックを使って管理している多次元の配列やオブジェクトを更新する場合、元の配列・オブジェクトをディープコピーしなければならない。

シャローコピーだと破壊的変更となってしまい、StrictモードではsetStateが2回呼び出されてしまう。

例

検証用コード

import {useCallback, useState} from 'react'
export default function App() {

  const [arr, setArr] = useState([0]);
  const [arr2, setArr2] = useState([[0]]);
  const [obj, seObj] = useState({num:0});
  const [obj2, seObj2] = useState({sub: {num:0}});
  const handleClick = () => {
    setArr((prevArr)=>{
      const newArr= [...prevArr]
      newArr[0]++
      return newArr;
    })
    setArr2((prevArr2)=>{
      const newArr2= [...prevArr2] // シャローコピー
      newArr2[0][0]++
      return newArr2;
    })
    seObj((prevObj)=>{
      const newObj= {...prevObj}
      newObj.num++
      return newObj;
    })
    seObj2((prevObj2)=>{
      const newObj2= {...prevObj2} // シャローコピー
      newObj2.sub.num++
      return newObj2;
    })
  }
  return (
    <div className="App">
      <p>arr={arr[0]}</p>
      <p>arr2={arr2[0][0]}</p>
      <p>obj={obj.num}</p>
      <p>obj2={obj2.sub.num}</p>
      <button onClick={handleClick}>click</button>
    </div>
  );
}

検証用コード実行結果

arr=1
arr2=2
obj=1
obj2=2

検証用コード（ディープコピーに修正後）

import {useCallback, useState} from 'react'
export default function App() {

  const [arr, setArr] = useState([0]);
  const [arr2, setArr2] = useState([[0]]);
  const [obj, seObj] = useState({num:100});
  const [obj2, seObj2] = useState({sub: {num:100}});
  const handleClick = () => {
    setArr((prevArr)=>{
      const newArr= [...prevArr]
      newArr[0]++
      return newArr;
    })
    setArr2((prevArr2)=>{
      const newArr2 = JSON.parse(JSON.stringify(prevArr2)) // ディープコピー
      // または const newArr2 = prevArr2.map(subArr => [...subArr])
      newArr2[0][0]++
      return newArr2;
    })
    seObj((prevObj)=>{
      const newObj= {...prevObj}
      newObj.num++
      return newObj;
    })
    seObj2((prevObj2)=>{
      const newObj2 = JSON.parse(JSON.stringify(prevObj2)) // ディープコピー
      newObj2.sub.num++
      return newObj2;
    })
  }
  return (
    <div className="App">
      <p>{arr[0]}</p>
      <p>{arr2[0][0]}</p>
      <p>{obj.num}</p>
      <p>{obj2.sub.num}</p>
      <button onClick={handleClick}>click</button>
    </div>
  );
}