Загрузка видео...

Не удалось загрузить видео

Возникла проблема при загрузке этого видео. Это может быть связано с временными проблемами сети или видео может быть недоступно.

На главную

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 лет назад