useEffect

次にuseEffectについて説明します。useEffectはコンポーネントがhtmlを生成して画面に表示（レンダリングという）された後に処理を行える関数になります。

components配下にPostList.tsxを作成しましょう。その中に以下のように記述しましょう。useEffectは第1引数に実行したい関数を渡します。

PostList.tsx◎

import { useEffect } from "react";

export const PostList = () => {
  useEffect(() => {
    console.log("PostsList");
  }, []);

  return <h2>PostList</h2>;
};

このコンポーネントをApp.tsxで呼び出しましょう。

App.tsx◎

...
import { Like } from "./components/Likes";
import { PostList } from "./components/PostsList";
import { UserList } from "./components/UserList";
...
      <Form />
      <PostList />
    </div>
  );
};

export default App;

以下のようにコンソールに出力されるかと思います。レンダリング後にuseEffect内の処理が実行され、コンソールに出力されました。通常は1回のみの処理になるのですが、2回出力されています。

理由として、現在ReactをStrictモードという状態で起動しているためです。Strictモードというのはアプリの潜在的な問題点を洗い出すためのツールで、main.tsxを見るとReact.StrictModeというタグで括られているかと思いますが、デフォルトで使用されています。

main.tsx

...
ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

React.StrictModeを削除することで、Strictモードをオフにすることができます。基本的にはオンのままが良いですし、開発環境のみ動作しますので、本番環境では上記のようにuseEffectが2回呼ばれることはありません。

useEffectの第2引数に関してですが、監視したいstateを配列で渡します。userIdというstateを作り、そのstateを変更するためにinputタグにて変更できるようにします。そして、useEffectの第2引数にuserIdを渡してみましょう。

PostList.tsx◎

import { useEffect, useState } from "react";

export const PostList = () => {
  const [userId, setUserId] = useState(1);

  useEffect(() => {
    console.log("PostList");
  }, [userId]);

  return (
    <div>
      <h2>PostList</h2>
      <div>
        <p>userID: {userId}</p>
        <input
          type="number"
          value={userId}
          onChange={(e) => setUserId(Number(e.target.value))}
        />
      </div>
    </div>
  );
};

ブラウザにて確認すると、userIdを変更するたびにuseEffectの処理が走るようになります。