[自分用]Next.jsの空配列について

useEffectの第二引数の役割とは

簡単にいうと、[]に記述された変数が変更されると、改めてuseEffectの中身が実行される。

下記はクリックイベントのコードだが、そこで使用した変数fooをuseEffectの第二引数に記述。
そうすることによりfooが変わるたびにuseEffectの中身が実行される。

export default function Home() {
  const [foo, setFoo] = useState(1);

  const handleClick = () => {
    setFoo(foo => foo + 1);
  };

  useEffect(() => {
    console.log('その次にマウントが実行されるよ');
    return () => {
      console.log('fooが変わると最初にアンマウントが実行されて');
    }
  }, [foo]);

  return (
    <>
      <h1>{foo}</h1>
      <button
        onClick={handleClick}>
        ボタン
      </button>
      <Main page="index" />
    </>
  )
}

useCallbackの第二引数の役割とは

こちらも[]に記述された変数が変更されると、改めてuseEffectの中身が実行される。

ちなみに、
下記に例を記述したが、第二引数に何も指定しなかったら[foo]の中身はずっと同じ状態になる。
（ほんとは2,3,4...と増えてほしい）

理由はuseCallbackは再生成されないから。

const handleClick = useCallback(() => {
  console.log(foo);
  if(foo < 10){
    setFoo(foo => foo + 1);
  }
},[])

なぜこんな機能があるのか

コード量が多くなったときに、全てレンダリングするのは効率とパフォーマンスが悪くなる。
だから必要最低限のレンダリングを実行させるためにも必要な機能。