Maximum update depth exceeded. This can happen when a component calls setState inside useEffect using .map&useState&useEffect

Question

I am using .map inside JSX to render some components. However, the variable inside .map is updating in useEffect, and the dependency of useEffect is a useSWR, useSWR is depends on useSearchParams(). Is there anything I am doing wrong to trigger this error? An example:

          <div>
            {koStat.map((koMatric) => 
              <div key={koMatric}>
                {koInfo[matchName]
                  ? koMatric +
                    ": " +
                    JSON.stringify(koInfo[matchName][koMatric])
                  : " unavailable"}
              </div>
            )}
          </div>

In here, koInfo is inside a useEffect and the dependency array of the useEffect is [data, matchList], data is updating using useSWR, the selectedMatch is depends on useSearchParams:

  const searchParams = useSearchParams();
  const selectedMatch: string | null = searchParams.get("data")

  const { data, isLoading, error } = useSWR(
    "/api/model?data=" + selectedMatch,
    fetcher,
    {
      refreshInterval: 1000,
    }
  );

The complete error in the browser console:

app-index.js:31 Warning: Maximum update depth exceeded. 
This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

I think it probably because one of the dependencies changes on every render., how can I solve it?

I have tried the solution in Maximum update depth exceeded., it didn't work.

Maximum update depth exceeded. This can happen when a component calls setState inside useEffect using .map&useState&useEffect

0 Answers0