Cause and solution for "Too many re-renders" in useEffect

Introduction

When I tried to retrieve and display data from Supabase,
the screen went blank and I got the message "Too many re-renders."
In this article, I'll summarize how to use useEffect.

Cause

I forgot to include the [] dependency array in useEffect,
which caused it to be re-executed every time I re-rendered, resulting in an infinite loop.

Solution

Fixed it so that it only executes the first time.

useEffect(() => {
async function fetchSpots() {
const { data } = await supabase.from("study_spots").select("*");
setSpots(data);
}
fetchSpots();
}, []); // I forgot this.

Lesson

useEffect requires that you specify "when to execute" as its second argument.
Forgetting this will result in an infinite loop.