# useEffect 次に**useEffect**について説明します。useEffectはコンポーネントがhtmlを生成して画面に表示（**レンダリング**という）された後に処理を行える関数になります。 `components`配下に`PostList.tsx`を作成しましょう。その中に以下のように記述しましょう。`useEffect`は第1引数に実行したい関数を渡します。

import { useEffect } from "react";

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

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

このコンポーネントを`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`というタグで括られているかと思いますが、デフォルトで使用されています。 {% code title="main.tsx" %} ```tsx ... ReactDOM.createRoot(document.getElementById("root")!).render( ); ``` {% endcode %} `React.StrictMode`を削除することで、Strictモードをオフにすることができます。基本的にはオンのままが良いですし、開発環境のみ動作しますので、本番環境では上記のように`useEffect`が2回呼ばれることはありません。 `useEffect`の第2引数に関してですが、監視したいstateを配列で渡します。`userId`というstateを作り、そのstateを変更するためにinputタグにて変更できるようにします。そして、useEffectの第2引数に`userId`を渡してみましょう。

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`の処理が走るようになります。