NextJS 13 WARNING: Easy Mistake = Infinite Loops

👉 VS Code theme and font? Night Wolf [black] and JETBrains Mono

0:00 Introduction
1:41 Project Setup
3:05 React Server Components
5:10 Client Side Components
9:25 Making A Query
11:45 Making Query Client Generic
13:18 Pokemon Setup
15:45 Enabling Pokemon Detail
18:12 Conditional Use Hooks
22:24 Finishing Query Client
23:17 Outroduction

#nextjs #nextjs13

[ischmitty]

16:40 Jack small improvement you could make here. Instead of `typeof pokemon[0]` you can use `typeof pokemon[number]` which will get the shape from all objects in the array, not just the first one :)

[Echoes]

Great video! It also makes a bit clearer why React Query works the way it does and some of the decisions that went into it. Amazing stuff as always

[Rifeja]

This explanation saved my day, I couldn't find anywhere how to solve this rendering problem in next 13.4, thanks jedi

[SaurabhSureshskytz]

Thanks a lot! Was frustrated with this error and thankfully saw this video.

[Dev-Siri]

Thank you so much for this, I spent so much time just to do client-side data fetching & even Next.js 13.2 didn't fix this yet.

[AssFaceNFT]

Was looking for a typescript guy, glad I found you! 🌹🙏🏻

[dotjs]

The RFC about ‘use’ really helped me overcome this issue .Yet another great video Jack

[oryankibandi]

Thank you for the solution. Was experiencing this issue even when using server components, decided to switch to client components for now.

[irfansaeedkhan]

wow, mind blown, i only see basic coding on youtube but finally found you so i can learn some advance stuff and level up my coding skills.

[dealloc]

That's really bad. I feel like this is a bug, because it would mean that you cannot use code that is not written with NextJS in mind. Calling fetchData() directly (as long as the its arguments is stable) in vanilla React works as intended.

[briar]

I just want to say thank you so much! I watched your React State Management on FCC and learned so much!

[thesunabsolute]

Its stuff like this that makes me so happy react query exists. Jeez, I haven't had to think of caching promises in a very long time.

[Vitrl]

Awesome content! I really appreciate the tasteful abstractions you seamlessly create when talking about a topic. Thank you!

[maverick-]

The official document says fetch api(the special fetch api used for server components) doesn't support client components yet ! which means the infinite loop can happen like that. They recommend to use swr or react-query in client components !

[Zagoorland]

It would be nice if you could make a separate video covering all important changes to Next 13 :)

[nalbertcerqueira]

Now it makes sense, probably use( ) uses useState inside it's implementation, that's why it triggers another rerender. Man you're awesome !!

[appstuff]

note to self: Seen half @9:30, will see the rest later. Good logic to understand.

[penry]

It's fascinating to see the patterns of old PHP emerging in React with server components. Reminds me of the 'the loop' in WordPress where you loop over 1 DB query result then for each given item fire off a load more DB requests to render a template. I wonder if this pattern could encourage a lot of n+1 issues. Do you know if it's possible to use something like dataloader within react server components?

[xatatech]

This issue is being said in beta docs. You’re enforcing to use swr or react-query instead.

[hemanthkotagiri]

This looks very much like how tRPC does it. Thanks for this video, Jack!