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

最近の投稿

2023年9月23日dialogタグの使い方(領域展開)・HTMLとJavaScriptで簡単なDialog・モーダルを作成する方法 2023年9月22日Reactの JSX内部でif文やSwitch文, 三項演算子などの条件分岐をする方法 2023年9月21日CSS の postion で縦横(上下左右)ともに画面の中央に要素を配置する方法 2023年9月9日JavaScriptで、Objectかどうかの判定方法と、配列かどうかの判定方法 2023年9月9日JavaScriptで、ObjectとObjectが同じ値かどうかの比較・判定方法 2023年9月9日JavaScriptの console.group, groupEnd, groupCollapsed, time, timeEnd, timeLog の使い方