Video wird geladen...

Video konnte nicht geladen werden

Beim Laden dieses Videos ist ein Problem aufgetreten. Dies könnte an einem vorübergehenden Netzwerkproblem liegen oder das Video ist möglicherweise nicht verfügbar.

React visually explained: 'use client'

Delba

71,379 subscribers

746,659 Aufrufe • vor 1 Jahr •via X (Twitter)

Wissenschaft & Technologie Bildung

Anya Rossi• Live Now

Private livecam show

11 Kommentare

Profilbild von Delba

Delbavor 1 Jahr

HQ:

Profilbild von Daniel Kanem

Daniel Kanemvor 1 Jahr

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

Profilbild von Delba

Delbavor 1 Jahr

🤝 Thanks Daniel!

Profilbild von Hamed Bahram

Hamed Bahramvor 1 Jahr

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

Profilbild von Delba

Delbavor 1 Jahr

Appreciate it Hamed. We're getting there.

Profilbild von nstlgy

nstlgyvor 1 Jahr

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

Profilbild von Delba

Delbavor 1 Jahr

@sunphooldev 🤩

Profilbild von Cristian

Cristianvor 1 Jahr

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.

Profilbild von Delba

Delbavor 1 Jahr

Thank you, I appreciate it. Time will tell 😊

Profilbild von Daniel Griesser

Daniel Griesservor 1 Jahr

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.

Profilbild von Delba

Delbavor 1 Jahr

Thanks Daniel 😊

Ähnliche Videos

Transformers visually explained:

Transformers visually explained:

Sumanth

212,013 Aufrufe • vor 1 Jahr

Transformers visually explained:

Transformers visually explained:

Akshay 🚀

128,234 Aufrufe • vor 1 Jahr

Bonds Explained Visually

Bonds Explained Visually

Brian Feroldi

28,965 Aufrufe • vor 2 Monaten

Tornado formation, explained visually

Tornado formation, explained visually

Sam Brandt

22,105 Aufrufe • vor 1 Jahr

K-Means clustering, visually explained:

K-Means clustering, visually explained:

Daily Dose of Data Science

156,089 Aufrufe • vor 1 Jahr

Fixed vs Current Assets Explained Visually:

Fixed vs Current Assets Explained Visually:

Brian Feroldi

51,250 Aufrufe • vor 1 Jahr

6. DeepSeek R1 visually explained the Pythagorean theorem

6. DeepSeek R1 visually explained the Pythagorean theorem

Abhishek

25,260 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 2 Jahren

"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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 2 Jahren

All filters I use on new pairs explained!

All filters I use on new pairs explained!

Daumen

14,072 Aufrufe • vor 1 Monat

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 2 Jahren

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 Aufrufe • vor 8 Tagen

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

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

George Moller

42,383 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 2 Jahren

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 Aufrufe • vor 2 Jahren