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年5月28日Next.js・TypeScript 環境のESLintとPrettierの設定方法まとめ 2023年5月28日Vueでページの移動をComponentで検知する方法($route・watch・computed) 2023年5月28日yarn install と yarn add と npm install の違いとは？ yarn と npm のコマンドの一覧・比較表 2023年5月26日Next.js・TypeScript・StoryBook・MUI・Recoilの環境をDockerで構築する方法 2023年5月25日【随時更新】HTML・CSSのinputタグやbuttonタグのデフォルトStyle・CSSを消す方法まとめ 2023年5月24日JavaScriptで特定の文字列を検索・取得して、他の文字列で差し替える方法