React tip: "use client" misconceptions (1/5) 🚫 You need to mark EVERY individual file with "use client" to ensure it is a Client Component. ✅ You only need to mark each client entry point ONCE. Modules imported into a "use client" file are already part of the client bundle.... (0:05) Adding "use client" to `3.js` marks the file as a client entry point, including it in the client bundle. (0:11) Importing `d()` into `3.js` (a client entry point) also includes it in the client bundle. (0:14) Adding "use client" to `4.js` has no additional bundling effect on `d()` because it is already part of the client bundle. (0:23) All modules (and their dependencies) imported to `3.js` are included in the client bundle. (0:26) Removing "use client" from `3.js` moves it and its dependencies into the server bundle.show more

React docs: They recently got a facelift with some diagrams and code playgrounds. Props to the React team 🫡

these visualizations are amazing, Delba!

Thank you!

Please give Delba a raise, she is a must keep in the React ecosystem now. These videos are so damn important right now.

in 4.js, it's not specified whether it is a client component directly. so to figure it out, a dev (or tool) needs to scan all imports across the entire codebase. is that really a good thing?

It's up to you. It's a bit like DRY, you can do it every time, but it's a bit heavy-handed to do it prematurely. I think we'll develop a feel for it.

hell yeah this is beautiful also i think blue should canonically be the color of client components! i tend to go client=blue & server=yellow but that can get a bit busy, the dimmed grey works much better here

Blue it is. It has been decided 🤝

I felt like I was in a Next.js-themed Minecraft server while watching this video – fantastic work!

Haha, cheers Steven! Congrats on getting engaged 🖤