Open2022/06/26にコメント追加1

Reactの深層

useEffectにはコールバック関数を渡し、コールバック関数がコンポーネントのマウント時に実行され、コールバック関数が返した関数はコンポーネントがアンマウントされるときに実行される。
useEffectのコードがいつ実行されるかを指示するのが依存配列([])である。依存配列に[]のように空を指定すると、何にも依存していないので副作用を更新する必要がないため、コンポーネントがマウントされたときにのみレンダリングされる。副作用とは、コンポーネントがレンダリングされる際に発生する「UIを表示する」以外の挙動のこと。
関数フックに対して、useEffectを用いることで、複数回コンポーネントがレンダリングされても、副作用が実行されるのは、コンポーネントが表示されたときの1回限りに抑える。

import { FC, memo, useEffect, useState } from "react";

export const Timer: FC = memo(() => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCount((c) => c + 1);
    }, 1000);
    return () => {
      clearInterval(timer);
    };
  }, []);

  return (
    <>
      <div>
        <p>Timer CountUp {count}</p>
      </div>
    </>
  );
});