Using "use client" in my header component causes webpage to become unresponsive.

Answered

Cuban Crocodile posted this in #help-forum

Open in Discord

Cuban CrocodileOP

2023-06-27T11:08:12.000Z

I need to use the useState function for my header to create a menu function for the navbar. However, whenever i add "use client" to the top of my code, everything stops working on the webpage, the webpage then goes blank, refreshing just makes it infinitely load, and nothing works unless I remove "use client" and then reopen localhost in a new tab. One of my tabs wouldn't even close anymore and was just stuck loading.

Mac OS, Next.js v13.4.7, Node v18.5

Here is code in reference:

Answered by joulev

Client components cannot be async

View full answer

7 Replies

@Cuban Crocodile I need to use the useState function for my header to create a menu function for the navbar. However, whenever i add "use client" to the top of my code, everything stops working on the webpage, the webpage then goes blank, refreshing just makes it infinitely load, and nothing works unless I remove "use client" and then reopen localhost in a new tab. One of my tabs wouldn't even close anymore and was just stuck loading. Mac OS, Next.js v13.4.7, Node v18.5 Here is code in reference:

2023-06-27T11:14:34.000Z

Client components cannot be async

Answer

Cuban CrocodileOP

2023-06-27T11:14:47.000Z

ooh

thank you so much

do you mind explaining that though

2023-06-27T11:16:41.000Z

Basically async client components will cause an infinite loop of renderings

Thatâ€™s why everything hangs

Cuban CrocodileOP

2023-06-27T11:17:45.000Z

somehow I knew there was an infinite loop, but I didn't get where, but now that makes so much more sense. Thank you so much man