React useEffectを使用するサンプル

ReactでuseEffectを使用するサンプルです。

サンプル	ファイルの構成
	useEffectを使用する

ファイルの構成

同じフォルダ内にApp.jsxとindex.jsとindex.htmlがあります。

プロジェクトフォルダ-srcフォルダ-App.jsxとindex.jsとindex.html

useEffectを使用する

以下は、useEffectを使用したサンプルです。

ボタンを押すと数値が1つ増えますが、その直後にuseEffectで値が0に戻されます。
useEffectは指定した値が変わると処理を行います。

jsxのファイル(App.jsx)

import { useState } from "react";
import { useEffect } from "react";

export const App1 = () => {
  const [num1, setCnt] = useState(0);

  useEffect(() =>{
    console.log("リセット");
    setCnt(0);
  },[num1]);

  const button1 = () => {
    setCnt((aaa) => aaa + 1);
  };
  return (
    <>
      <p>テストカウント</p>
      <p>{num1}</p>
      <button onClick={button1}>ボタン</button>
    </>
  );
};

2行目は、useEffectをimportしています。
7行目は、useEffectです。num1の値が変わると実行されsetCntで値を0にします。
19行目のボタンを押すと12行目の関数が実行されます。

jsのファイル(index.js)

import ReactDOM from "react-dom";
import { App1 } from "./App";

ReactDOM.render(<App1 />, document.getElementById("root"));

2行目は、App.jsxのApp1とひも付きます。

htmlのファイル(index.html)

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

9行目のdivの下にApp1のreturn値が追加されます。