🍋

なぜsetStateに新たなオブジェクトを渡す必要がありますか

2022/11/04に公開

React

frontend

fiber

tech

サンプルコード

import { useState } from 'react';

const App = () => {

    const [data, setData] = useState({
        count: 1
    })

    const [num, setNum] = useState(0)

    const handleClick = () => {
        data.count += 1
        setData(data)
    }

    const handleClick2 = () => {
        setNum(num + 1)
    }

   return (
       <div className='container'>
        <button onClick={handleClick}>click</button>
        <button onClick={handleClick2}>click2</button>
        <p>count:{data.count}, num:{num}</p>
       </div>
   );
};

export default App

現象

原因

click1をクリックした時に、action(data)をキューに入れました
でもaction(data)はメモしているstateと同じアドレスなので、再レンダリングを促しません
click2をクリックした時に、action(num)をキューに入れました
action(num)はメモしているstateと同じアドレスではないため、再レンダリングを促します
再レンダリングする時に、click1によって、入れられたキューも消化されます

なぜsetStateに新たなオブジェクトを渡す必要がありますか

サンプルコード

現象

原因

説明

Discussion