非同期

setStateは非同期で行われる可能性がある。
更新された値を確実に読み取り、その値に基づいて処理をしたいときはコールバック関数を使う。

例えば下記 count を更新する setCount は
setCount(count + 1） じゃなくて
setCount(oldValue => oldValue + 1） とする方が確実＆安全。

export default function App() {
    const [count, setCount] = useState(0)
    
    function add() {
        setCount(oldValue => oldValue + 1)
    }
    
    function subtract() {
        setCount(oldValue => oldValue - 1)
    }
    
    return (
        <div className="counter">
            <button className="counter--minus" onClick={subtract}>–</button>
            <div className="counter--count">
                <h1>{count}</h1>
            </div>
            <button className="counter--plus" onClick={add}>+</button>
        </div>
    )
}

オブジェクトのstate

クラスコンポーネントの setState メソッドはstateの更新時にマージをする。
Hooksの useState は自動的なマージをしないので注意。
下記のように書くとisFavorite以外の値が消えてしまう。

const [contact, setContact] = React.useState({
  name: "apple",
  color: "red",
  isFavorite: true
})

function toggleFavorite() {
  setContact(prevContact => {
    return {
      isFavorite: !prevContact.isFavorite
    }
  })
}

これはスプレッド構文を使って回避。

function toggleFavorite() {
  setContact(prevContact => {
    return {
      ...prevContact, 
      isFavorite: !prevContact.isFavorite
    }
  })
}

useReducer を使う方法も。
これはもう少し後に詳しく調べる。
https://ja.reactjs.org/docs/hooks-reference.html#usestate
https://scrimba.com/learn/learnreact/complex-state-updating-state-objects-cJLgWJSN