React公式ページで学んでみた⑥（備忘録）

はじめに

初めまして！
エンジニアになって数年、今まで本を読むだけでしたが、もっとプライベートで楽しみながら成長したい！自分が学んだ足跡を残していきたい！と思い記事を書きました！
最終的には自在に開発できるようになりたいと思っています。
いろいろな記事を参考にさせてもらっています。
その中でもこれってどういう意味？とかつまづいたところを念入りに書いていこうかと思います。

今回の目的

前回の続きです。今回も「インタラクティビティの追加」。被る部分もあると思いますが、後で振りかえって深掘りするきっかけになるのが理想です。細かく書くと大変なのであっさりめ。

使用したものや事前準備

・Macbook Pro
・Visual Studio Code

主に参考にさせていただいた記事

stateのバッチ処理

イベントハンドラおよびその中のコードが全て完了した後にUIを更新する。
setColor()というstateのset関数があって、イベントハンドラ内で赤→緑→青と変更しても、表示されるのは青だけ。

スナップショットによりstateの値はレンダーされるまで変わらない

stateであるnumberは、レンダー後に同じ値が与えられるため、0の場合、１が常にsetされる。

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

更新用関数

更新用関数を使うとcurrent値が取得される。
レンダー時にスナップショットされた値を使わないので8に更新できる。set関数の値は最後の値が採用される。
numberという値を混ぜ合わせても問題なく動作する。（numberは固定値だと解釈するとわかりやすくなる）

    <>
      <h1>{number}</h1>
      <button onClick={() => {
        setNumber(number + 5); //5(numberは0)
        setNumber(n => n + 1); //6
        setNumber(n => n + 1); //7
        setNumber(n => n + 1); //8
      }}>+3</button>
    </>

ここまでが更新用関数と呼ばれる。

n => n + 1

更新用関数の命名規則

set関数の大文字部分を取るのが一般的な慣習

setEnabled(e => !e);
setLastName(ln => ln.reverse());
setFriendCount(fc => fc * 2);

終わりに

イベントハンドラ内では、state+1のような書き方よりも更新用関数を使うことを癖づけておくほうがいいかもしれないですね。
絶対そっちの方がいいぞってコメントあればいただけると嬉しいです。

次