Next.js 13 - Fix for client component ('use client') hangs when fetching data in useEffect hook
Applies to Next.js 13 and the App Router
I've been playing around with the Next.js 13 lately and trying to convert an application from the Pages Router to the new App Router.
I ran into a weird problem this morning that had me stumped for a few hours. One of my client components (with 'use client' at the top of the file) was causing Chrome to lock up and max out my CPU without giving me any error message.
Through some trial and error I found the issue was being caused by a call to fetch() inside a useEffect() hook, but for the life of me I couldn't figure out why, I felt like throwing my laptop out the window! lol...
After a lot of digging around online I found the answer: Client components cannot be marked async.
My client component was marked async because I tried building it as an async server component first before converting it to 'use client'. There weren't any error messages or lint warnings in VS Code to tell me to remove the async flag, it simply caused my browser to hang.
OK that's the end of my rant! Hope this helps anyone else that finds themselves in the same situation :)
Need Some NextJS Help?
Search fiverr for freelance NextJS developers.
Follow me for updates
When I'm not coding...
Me and Tina are on a motorcycle adventure around Australia.
Come along for the ride!