正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

React visually explained: 'use client'

Delba

71,379 subscribers

746,659 次观看 • 1 年前 •via X (Twitter)

科学技术教育

Anya Rossi• Live Now

Private livecam show

11 条评论

Delba 的头像

Delba1 年前

HQ:

Daniel Kanem 的头像

Daniel Kanem1 年前

As a Remotion animator myself, I know the amount of work you may have put into this, Delba! Huge work, also stunning visuals! Congrats!

Delba 的头像

Delba1 年前

🤝 Thanks Daniel!

Hamed Bahram 的头像

Hamed Bahram1 年前

Excellent work, Delba! This is by far the best explanation of React server-client architecture I’ve seen. Even better than the docs.

Delba 的头像

Delba1 年前

Appreciate it Hamed. We're getting there.

nstlgy 的头像

nstlgy1 年前

The algorithm seems to have picked up upon your content, i got suggested your content for the first time, and on both youtube as well as twitter

Delba 的头像

Delba1 年前

@sunphooldev 🤩

Cristian 的头像

Cristian1 年前

Nice explanation, great animations! This paradigm, though, is so confusing and prone to bugs and security issues... I still prefer to have the client-side and server-side code separated, and have a clearly defined API connecting them.

Delba 的头像

Delba1 年前

Thank you, I appreciate it. Time will tell 😊

Daniel Griesser 的头像

Daniel Griesser1 年前

The content and visualizations in these videos are really 10/10 👏 Must be a lot of work to get them to this level of polish.

Delba 的头像

Delba1 年前

Thanks Daniel 😊

相关视频

Transformers visually explained:

Transformers visually explained:

Sumanth

212,013 次观看 • 1 年前

Transformers visually explained:

Transformers visually explained:

Akshay 🚀

128,234 次观看 • 1 年前

Bonds Explained Visually

Bonds Explained Visually

Brian Feroldi

28,965 次观看 • 2 个月前

Tornado formation, explained visually

Tornado formation, explained visually

Sam Brandt

22,105 次观看 • 1 年前

K-Means clustering, visually explained:

K-Means clustering, visually explained:

Daily Dose of Data Science

156,089 次观看 • 1 年前

Fixed vs Current Assets Explained Visually:

Fixed vs Current Assets Explained Visually:

Brian Feroldi

51,250 次观看 • 1 年前

6. DeepSeek R1 visually explained the Pythagorean theorem

6. DeepSeek R1 visually explained the Pythagorean theorem

Abhishek

25,260 次观看 • 1 年前

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.

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.

Delba

157,319 次观看 • 2 年前

"How to share state between React client components with a parent server component?" 👇

"How to share state between React client components with a parent server component?" 👇

Alex Sidorenko

50,550 次观看 • 1 年前

I’m exploring a new video series to visually explain Next.js and React concepts. Open to feedback 🖤 Episode 1: Next.js Filesystem Routing

I’m exploring a new video series to visually explain Next.js and React concepts. Open to feedback 🖤 Episode 1: Next.js Filesystem Routing

Delba

409,299 次观看 • 2 年前

All filters I use on new pairs explained!

All filters I use on new pairs explained!

Daumen

14,072 次观看 • 1 个月前

Streaming data from server to client with "use" in Next.js

Streaming data from server to client with "use" in Next.js

Alex Sidorenko

36,533 次观看 • 1 年前

When to use Server vs Client components in Next.js 13

When to use Server vs Client components in Next.js 13

Alex Sidorenko

148,146 次观看 • 2 年前

Use NativeScript in React Native right now 📲 @nativescript/react-native 🤙 App.js Conf 🗓️ 27-29 May 2026

Use NativeScript in React Native right now 📲 @nativescript/react-native 🤙 App.js Conf 🗓️ 27-29 May 2026

NativeScript

129,251 次观看 • 8 天前

⚛️ How to use conditional types in TypeScript and React ↓

⚛️ How to use conditional types in TypeScript and React ↓

George Moller

42,383 次观看 • 1 年前

How to use visual mouth chart provided by client 🧐 #Live2D

How to use visual mouth chart provided by client 🧐 #Live2D

Susu On Twos 🦪 Animation Nerd 🦪 MOMOCON 2026

68,883 次观看 • 2 年前

React tip: "use client" misconceptions (2/5) 🚫 "You cannot nest Server Components inside Client Components because "use client" turns everything into Client Components." ✅ We can pass the rendered result of Server Components to Client Components as props. Simple example: (Server Component) (Client Component) (Server Component) is designed for the client. It needs to instantly open and close when clicked. is designed for the server. It uses packages that don't work in the browser and needs to fetch data close to where it's stored without exposing credentials. So, how can we nest a component that uses server APIs inside a component that uses client APIs... without using `import`? React props to the rescue! --- (0:00) 1-4: Reminder: Importing code forms a module dependency graph. Adding dependencies to a server or client bundle. (0:23) 5-6: Reminder: Using components eventually forms a rendered component tree. (0:37) 9: Oh no! We get an error when trying to `import` a client API (useState) into a server module. (0:44) 10: We know the trick by now: Add "use client" to mark `2.js` as a client entry point. This moves the module to the client bundle and allows us to use client APIs like `useState.` (0:51) 11: But we get a new error! "use client" moved all imported dependencies into the client bundle, including our ORM package, which doesn't work in the browser. (0:59) 13: Let's refactor without changing our rendered component hierarchy. First, we move the `Cart` import to the parent file that imports `Modal`. This moves `Cart` outside the "use client" boundary and consequently the client bundle. (1:11) 15: Then, we pass down the rendered result of `Cart` as a prop to `Modal`. This allows `Cart` to be entirely rendered on the server as a Server Component before being passed down. `Modal` has no knowledge of what the `cart` prop is. Its only responsibility is placing whatever it receives into the `{cart}` slot. (1:15) 16: Finally, it's common to use the special `children` prop for a component's primary content. The key insight is that we were able to use props to retain our desired component hierarchy even though we changed our module dependency graph.

React tip: "use client" misconceptions (2/5) 🚫 "You cannot nest Server Components inside Client Components because "use client" turns everything into Client Components." ✅ We can pass the rendered result of Server Components to Client Components as props. Simple example: (Server Component) (Client Component) (Server Component) is designed for the client. It needs to instantly open and close when clicked. is designed for the server. It uses packages that don't work in the browser and needs to fetch data close to where it's stored without exposing credentials. So, how can we nest a component that uses server APIs inside a component that uses client APIs... without using `import`? React props to the rescue! --- (0:00) 1-4: Reminder: Importing code forms a module dependency graph. Adding dependencies to a server or client bundle. (0:23) 5-6: Reminder: Using components eventually forms a rendered component tree. (0:37) 9: Oh no! We get an error when trying to `import` a client API (useState) into a server module. (0:44) 10: We know the trick by now: Add "use client" to mark `2.js` as a client entry point. This moves the module to the client bundle and allows us to use client APIs like `useState.` (0:51) 11: But we get a new error! "use client" moved all imported dependencies into the client bundle, including our ORM package, which doesn't work in the browser. (0:59) 13: Let's refactor without changing our rendered component hierarchy. First, we move the `Cart` import to the parent file that imports `Modal`. This moves `Cart` outside the "use client" boundary and consequently the client bundle. (1:11) 15: Then, we pass down the rendered result of `Cart` as a prop to `Modal`. This allows `Cart` to be entirely rendered on the server as a Server Component before being passed down. `Modal` has no knowledge of what the `cart` prop is. Its only responsibility is placing whatever it receives into the `{cart}` slot. (1:15) 16: Finally, it's common to use the special `children` prop for a component's primary content. The key insight is that we were able to use props to retain our desired component hierarchy even though we changed our module dependency graph.

Delba

43,989 次观看 • 2 年前