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

React_useState

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

今回は、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

最近の投稿