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

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]); re