When & Where to Add “use client” in React / Next.js (Client Components vs Server Components)

Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship).

👉 Discord: all my courses have a private Discord where I actively participate

⏱️ Timestamps:
0:00 Blunder #1
1:30 Client vs Server Components
4:58 When to refactor?
6:03 Blunder #2
8:19 Boundary
9:06 Import twice

#react #reacttutorial #nextjs

[satyak]

I spent many hours trying to learn server component. This is one the best video that explains basics with simple examples. Subscribed.

[wei]

I’ve checked so many channels and this is the only channel the provides more intermediate tutorials. Subscribed !!!

[Daddyjs]

I think it's important the emphasis the fact that "use client" declares a client boundary. And a big gotcha is the fact that you can't pass functions from a server component to a client component. You have to make a component that uses the "use client" directive and this component will render your other client component that needs to take a function as a prop. So keep in mind that a component that takes a function as a prop can only be rendered by another client component.

[yendar]

Amazing explanation. I was surprised learning you did not have 100k+ subscribers. You'll get there soon enough.

[mehdisadeghian]

Simple, Clear, and Short Video, @ByteGrad perfect job

[roby_codes]

This video is so great, I always thought that putting my server components inside of client components, as "children", they would become client components as well. Thanks for the explanation.

[kelvenraymond]

Very clear, this is the only channel that provides clear information about this subject ! Thanks a lot !

[judemusyoki]

Man you cleared some issues I was having with Next 13, thanks man. Your channel is definitely going to grow

[hassanfayed]

This is really helpful. Thank you so much!

[ankursaha]

These were the exact doubts I was having since I learnt the basics of nextjs, thank you so much

[MEIYANG-sjsb]

thank you much, I was confused for the 'use client' for weeks and you explained in a clearly and easy way to understand!

[aimenmansouri]

You answered a question I had in my mind for several days. Thank you for the clarification. By the way, your method of explanation is excellent

[Brandonbrandon]

Bro literally explained whole nextjs concept in less then 10 mins❤❤❤

[dan_b]

Fantastic explanation of the difference between the render and provider tree - never even occurred to me

[humbertogarcia]

Thanks for the explanation ByteGrad, I could understand everything. Now I can keep forward on my path.

[AdityaSharan]

Thanks i was looking for some intermediate level tutorial
Keep posting contents

[Kyle-rfmb]

Good explanation after checking a few other videos this one is clear and to the point.

[martintaanlee]

This is a great explanation, so helpful - thank you!

[SarathChandran]

Clear explanation. you have a bright future in teaching brother

[introvertedbot]

Man, your videos are helping me so much, thanks a lot