ReactにおけるState更新の際の注意点！！

はじめに

この記事の対象読者はReactを学び始めの方を対象に書いています。
自身も学習中の身なので備忘録として、また、同じく学習されている方の力に少しでもなればと思います！

Stateとは

簡単にですがStateについて記述しておきます。

const[count, setCount] = useState(0);

Reactでは上記のようにStateを定義することができます。
上記例ではcount変数とsetCount関数が定義されており、Stateの記述方法として配列内の左側に更新される変数、右側にその変数を更新する関数（自動生成）が定義できます。この時の関数名は基本的には変数にsetをつけたものを定義する様にしましょう！
(0)の部分はこのStateの初期値を表しています。(1)という風にすれば、count変数の初期値は０になります。

学習中によくあるカウントアップStateその１

React学習しているとよく下記のようなサンプルがあります。

import {useState} from "react";

export default function CountUp(){
  const [count, setCount] = useState(0);
  setCount(count + 1)
};

CountUp関数ないでuseStateでcount変数とsetCount関数作成し、
そのStateの変数にプラス１をするというシンプルなものです。

学習中によくあるカウントアップStateその２

それなりに学習が進むと下記のようなStateの更新方法いきなり出てこないでしょうか？

import {useState} from "react";

export default function CountUp(){
  const [count, setCount] = useState(0);
  setCount((prevCount) => prevCount + 1);
};

初学者にとっていきなり見慣れない形出ると混乱しますよね、、、
上記コードではsetCount関数の引数に(prevCount) => prevCount + 1という関数を渡しているという構図です。
先ほど見せた更新方法の方が単純で分かりやすいと思いますが、この2つの更新方法の違いとはなんでしょうか？

２つの更新方法の違い

先ほどお見せしたStateの更新方法の違いとしては

最新の現在のStateを参照する
更新前のStateを参照する

上記のような違いがあります。
1番目の方法であれば現在のStateに対して変更を加えていくことができます。他の部分で変更があった際もその変更後に変更を加える形になります。
2番目の方法であれば、Stateがどこから更新されるかわからないので、更新される前のStateに変化を加えるのであれば２番目の更新方法です。また、２番目のprevCountはcount変数の更新前という意味でprevという引数で受け取ります。

これでさらにReactの学習が捗るのではないでしょうか！

おわりに

最後まで見ていただきありがとうございました🙇
まだまだ学習中の身なので不備あるかもございませんので、その際はコメントよろしくお願い致します🙇

また今回の記事を備忘録として残そうと思った学習教材リンク貼っておきますのでよかったらご覧ください！
今回の記事内容についての学習教材