Video yükleniyor...

Video Yüklenemedi

Bu video yüklenirken bir sorun oluştu. Bu geçici bir ağ sorunundan kaynaklanıyor olabilir veya video kullanılamıyor olabilir.

Ana Sayfaya Dön

React visually explained: 'use client'

Delba

71,379 subscribers

746,659 görüntüleme • 1 yıl önce •via X (Twitter)

Bilim & Teknoloji Eğitim

Anya Rossi• Live Now

Private livecam show

11 Yorum

Delba profil fotoğrafı

Delba1 yıl önce

HQ:

Daniel Kanem profil fotoğrafı

Daniel Kanem1 yıl önce

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 profil fotoğrafı

Delba1 yıl önce

🤝 Thanks Daniel!

Hamed Bahram profil fotoğrafı

Hamed Bahram1 yıl önce

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

Delba profil fotoğrafı

Delba1 yıl önce

Appreciate it Hamed. We're getting there.

nstlgy profil fotoğrafı

nstlgy1 yıl önce

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 profil fotoğrafı

Delba1 yıl önce

@sunphooldev 🤩

Cristian profil fotoğrafı

Cristian1 yıl önce

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 profil fotoğrafı

Delba1 yıl önce

Thank you, I appreciate it. Time will tell 😊

Daniel Griesser profil fotoğrafı

Daniel Griesser1 yıl önce

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 profil fotoğrafı

Delba1 yıl önce

Thanks Daniel 😊

Benzer Videolar

Transformers visually explained:

Transformers visually explained:

Akshay 🚀

128,234 görüntüleme • 1 yıl önce

Bonds Explained Visually

Bonds Explained Visually

Brian Feroldi

28,965 görüntüleme • 2 ay önce

Transformers visually explained:

Transformers visually explained:

Sumanth

212,013 görüntüleme • 1 yıl önce

Tornado formation, explained visually

Tornado formation, explained visually

Sam Brandt

22,105 görüntüleme • 1 yıl önce

K-Means clustering, visually explained:

K-Means clustering, visually explained:

Daily Dose of Data Science

156,089 görüntüleme • 1 yıl önce

Fixed vs Current Assets Explained Visually:

Fixed vs Current Assets Explained Visually:

Brian Feroldi

51,250 görüntüleme • 1 yıl önce

6. DeepSeek R1 visually explained the Pythagorean theorem

6. DeepSeek R1 visually explained the Pythagorean theorem

Abhishek

25,260 görüntüleme • 1 yıl önce

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 görüntüleme • 2 yıl önce

"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 görüntüleme • 1 yıl önce

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 görüntüleme • 2 yıl önce

All filters I use on new pairs explained!

All filters I use on new pairs explained!

Daumen

14,072 görüntüleme • 1 ay önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 2 yıl önce

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 görüntüleme • 8 gün önce

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

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

George Moller

42,383 görüntüleme • 1 yıl önce

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 görüntüleme • 2 yıl önce

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 görüntüleme • 2 yıl önce