5分で読むReact豆知識 | 入門 | 第2回: state更新の落とし穴

はじめに

このシリーズは、Reactの公式ページなどから特に重要と感じたトピックを選び出し、何度でも読み返せるよう簡潔にまとめたものです。

進捗管理には「いいね」か「ブックマーク」がお勧め
さらに僕のモチベーションアップになります！よろしくお願いいたします！

シリーズ一覧はこちら

stateがちゃんと更新されない？

以下の例では、onClickのイベントハンドラ内でset関数を３回使用しています。
画面には「3」が表示されるように思えますが、実際はどうでしょうか？

import { useState } from 'react';

export default function Counter() {
  const [number, setNumber] = useState(0);

  return (
    <>
      <h1>{number}</h1>
      <button onClick={() => {
        setNumber(number + 1); // 現在のnumberに1を加える
        setNumber(number + 1); // 再び1を加える
        setNumber(number + 1); // 更に1を加える
      }}>+3</button>
    </>
  )
}

実際には、numberの値は0から1にのみ更新されます。
画面には「1」と表示されるため、期待とは異なる結果になります。

ここで学べることは二つあります

１.stateはレンダリング時に値が確定します。

　イベントハンドラ内の処理中に値が変化することはありません。（numberの値は常に0だったということです）

２.イベントハンドラ内ではstateの更新はまとめて行われます。

これをバッチ処理と言います。set関数実行後、即レンダリングされません。イベントハンドラ内の処理が終了した後、最新の結果でレンダリングします。

それでも連続して更新したい！

stateはレンダリング時に値が確定することを説明しました。
本来の値はReactが管理しています。Reactが管理している値を使用すれは先ほど実現したかった処理が可能になります。
値を3回連続で更新したい場合は、更新用関数を使用します。

更新用関数

n => n + 1

set関数内で使用すると、現在の値をReactから受け取ることが可能になります。

<>
  <h1>{number}</h1>
  <button onClick={() => {
    setNumber(n => n + 1); //1
    setNumber(n => n + 1); //2
    setNumber(n => n + 1); //3
  }}>+3</button>
</>

参考サイト

より詳しく学びたい方はこちら

１.stateはレンダリング時にReactから値が渡されて確定します。

２.イベントハンドリング内ではstateの更新はまとめて行われます。