ReactのuseStateでSetterによるStateの更新がされたら特定の処理をする方法

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、ReactのuseStateでSetterによるStateの更新がされたら特定の処理をする方法について解説していきます。

ReactでStateの更新が完了してから、特定の処理をする方法

ReactのuseStateフックを使って、SetterによってStateの更新が完了した後に特定の処理を実行する方法には、useEffectフックを使う方法があります。

次のSampleでは、useEffectフックの第2引数として[count]を渡しています。

これはcountが更新された場合にだけuseEffectのコールバック関数を実行するように指定するためのものです。

import { useState, useEffect } from 'react';

function Example() {
  // 1. State
  const [count, setCount] = useState(0);

  useEffect(() => {

    // Stateが更新された際に実行したい処理を記述する！
    console.log(`Count: ${count}`);
  }, [count]);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment Count</button>
    </div>
  );
}

Twitterやってます！Follow Me！

React関連の書籍

プログラミング学習・エンジニア転職関連の情報

自宅で現役エンジニアから学べる『TechAcademy』 (エンジニア転職保証)

『GEEK JOBキャンプ』スピード転職コース（無料）

【IT道場】入校時0円！ 就職目的プログラミングスクール

エンジニア転職なら100％「自社開発」求人に強い【クラウドリンク】

『techgym』 (Python特化・無料)

参考・引用

1. React Recoil入門 Todoアプリを作成してRecoilの基本設定を理解
2. useRecoilValue
3. useSetRecoilState
4. useRecoilState

最近の投稿

2024年1月17日【SQL】1回のINSERTで、複数行のレコードを一括挿入・一括追加する方法 2024年1月17日JavaScriptでランダムなuuidを作成する方法(randomUUIDの使い方) 2023年12月30日PythonでCSVをJSONに変換する方法 2023年12月30日PythonでCSV・Dataframeを指定の行数まで切り取る方法 2023年12月28日JavaScript(TypeScirpt)のfor-of文でindexの値も取得する方法と、Type IterableIteratorエラーの解決方法 2023年12月28日VSCode上のPython import文の「インポート “XXXXX” をソースから解決できませんでした」エラーの解決方法