Fixes › Performance

Too many re-renders / useEffect infinite loop

LovableBoltv0Cursor

The error

Error: Too many re-renders. React limits the number of renders / Maximum update depth exceeded

Why it happens

State is set during render, or a useEffect updates a value that's also in its dependency array (often an object or array recreated each render), so it loops forever and can hammer your API.

How to fix it

1. Never call setState directly in the component body.
2. Check useEffect dependencies; avoid objects/arrays created inline.
3. Memoise with useMemo/useCallback or depend on primitive ids.
4. Move data fetching to React Query/SWR.

Fix prompt (paste into Lovable, Bolt, Cursor, Replit or v0)

My component throws 'Too many re-renders' or 'Maximum update depth exceeded' and spams API calls. Find setState calls during render and useEffect hooks whose dependencies change every render, fix them with correct dependency arrays, useMemo/useCallback or primitive dependencies, and explain each fix briefly.

FAQ

Can it cost me money?

Yes, looping fetches can burn API credits and database quota.

Should I disable the lint rule?

No. The exhaustive-deps warning usually points at the bug.

Related fixes

• Postgres: too many connections / remaining connection slots are reserved
• App is slow: dozens of database calls per page (N+1 queries)
• Supabase query returns an empty array (no error)
• new row violates row-level security policy for table