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

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

На главную

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....

delba_oliveira's profile picture

Delba

81,437 subscribers

157,337 просмотров • 2 лет назад •via X (Twitter)

Наука и технологииОбразование
LIVE

Anya Rossi• Live Now

Private livecam show

Комментарии: 10

Фото профиля Delba
Delba2 лет назад

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

Фото профиля chan
chan2 лет назад

these visualizations are amazing, Delba!

Фото профиля Delba
Delba2 лет назад

Thank you!

Фото профиля Rotimi Best
Rotimi Best2 лет назад

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

Фото профиля Jan Nicklas
Jan Nicklas2 лет назад

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?

Фото профиля Delba
Delba2 лет назад

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.

Фото профиля janka
janka2 лет назад

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

Фото профиля Delba
Delba2 лет назад

Blue it is. It has been decided 🤝

Фото профиля Steven Tey
Steven Tey2 лет назад

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

Фото профиля Delba
Delba2 лет назад

Haha, cheers Steven! Congrats on getting engaged 🖤

Похожие видео

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.
1:24

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

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

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

Alex Sidorenko

36,533 просмотров • 1 год назад

Commandants! Nanami is bringing you the newest PC client guidance. Power and I are looking forward to meeting you on the new client! Mark the calendar, commandants. PC client will be available on 5/15. #punishinggrayraven #PGR
1:55

Commandants! Nanami is bringing you the newest PC client guidance. Power and I are looking forward to meeting you on the new client! Mark the calendar, commandants. PC client will be available on 5/15. #punishinggrayraven #PGR

Punishing: Gray Raven

406,574 просмотров • 3 лет назад

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

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

Alex Sidorenko

148,155 просмотров • 2 лет назад

Today, Oversight Committee laid it all out for the American people. This is how the Bidens' scheme works: 1. Foreign client has a problem. 2. Client pays a Biden. 3. VP Biden travels to the country. 4. VP Biden leverages U.S. influence to force favorable outcomes for the client. 5. THE BIDEN FAMILY EARNS THEIR FEE. 💵 6. Find a new foreign client. 7. Wash. Rinse. Repeat.
4:52

Today, Oversight Committee laid it all out for the American people. This is how the Bidens' scheme works: 1. Foreign client has a problem. 2. Client pays a Biden. 3. VP Biden travels to the country. 4. VP Biden leverages U.S. influence to force favorable outcomes for the client. 5. THE BIDEN FAMILY EARNS THEIR FEE. 💵 6. Find a new foreign client. 7. Wash. Rinse. Repeat.

Congressman William Timmons

865,880 просмотров • 2 лет назад

React visually explained: 'use client'
15:56

React visually explained: 'use client'

Delba

746,732 просмотров • 1 год назад

Does gym instructor also stretch their male client like this or it just only the female client they do this to?
0:20

Does gym instructor also stretch their male client like this or it just only the female client they do this to?

Eniola

5,755,394 просмотров • 2 лет назад

Next.js security tip: Use "server only" for the code that should never be exposed to the client.
0:29

Next.js security tip: Use "server only" for the code that should never be exposed to the client.

Alex Sidorenko

109,311 просмотров • 1 год назад

Server authoritative movement with client prediction and rollback/replay support. In this example, the client exploits by moving a wall out of the way. But the server owns the movement. The client has failed predictions due to the exploit, and rolls back. #RobloxDev
0:44

Server authoritative movement with client prediction and rollback/replay support. In this example, the client exploits by moving a wall out of the way. But the server owns the movement. The client has failed predictions due to the exploit, and rolls back. #RobloxDev

sleitnick

20,523 просмотров • 1 год назад

In LiveView, we keep the state in one place - the server - and it simplifies a lot. But sometimes the state on the client is preferred, or even necessary, and we can't use LiveView for that part. Unless we have a LiveView that runs on the client 👀 Using Popcorn, we managed to run LiveView fully in the browser – here's a POC 🎉 The approach is to have a fully client-side LiveView rendered by a server-side one, and they can communicate with each other. Try it out:
0:25

In LiveView, we keep the state in one place - the server - and it simplifies a lot. But sometimes the state on the client is preferred, or even necessary, and we can't use LiveView for that part. Unless we have a LiveView that runs on the client 👀 Using Popcorn, we managed to run LiveView fully in the browser – here's a POC 🎉 The approach is to have a fully client-side LiveView rendered by a server-side one, and they can communicate with each other. Try it out:

Elixir by Software Mansion

13,509 просмотров • 5 месяцев назад

Going to use it next time when client asks me to explain RCA 😄
0:32

Going to use it next time when client asks me to explain RCA 😄

EngiNerd.

115,071 просмотров • 6 месяцев назад

#Client Client - Look how we used to be
0:45

#Client Client - Look how we used to be

RPClipsGTA

107,937 просмотров • 2 лет назад

🇺🇸🇮🇳 US client visits Indian firm When it comes to client visits the management and HR will literally do anything to make sure to get the contact or keep the client happy. The employees who are trying to get noticed by the management for future promotions are usually volunteer.
1:47

🇺🇸🇮🇳 US client visits Indian firm When it comes to client visits the management and HR will literally do anything to make sure to get the contact or keep the client happy. The employees who are trying to get noticed by the management for future promotions are usually volunteer.

Lord Bebo

28,794 просмотров • 10 месяцев назад

Fitton: You know, but there is a list. There is no doubt. They talk about it in the memo they wrote. Well, there's no incriminating client list. What does that mean? I want the non-incriminating client list. Of course a client list is a term of art. Where are his associates? Where is the list of contacts.
0:54

Fitton: You know, but there is a list. There is no doubt. They talk about it in the memo they wrote. Well, there's no incriminating client list. What does that mean? I want the non-incriminating client list. Of course a client list is a term of art. Where are his associates? Where is the list of contacts.

Acyn

50,275 просмотров • 11 месяцев назад

If you want to be able to call server functions from the client, RPC is often the move. The Bun + Better Call combo gets you a fullstack solution in very little code. Server, Client, bundling and HMR 👌 had to record a little video showing the setup
3:26

If you want to be able to call server functions from the client, RPC is often the move. The Bun + Better Call combo gets you a fullstack solution in very little code. Server, Client, bundling and HMR 👌 had to record a little video showing the setup

Wes Bos

103,552 просмотров • 7 месяцев назад

first step was getting llama cpp to play nice with electron js so that we can run the model I fine tuned on the client, a couple errors but eventually got it wired up with node-llama-cpp bindings. this way the model + app can be shipped to the user (client) and run offline
0:31

first step was getting llama cpp to play nice with electron js so that we can run the model I fine tuned on the client, a couple errors but eventually got it wired up with node-llama-cpp bindings. this way the model + app can be shipped to the user (client) and run offline

anton

16,499 просмотров • 2 лет назад

Katie Miller: “Does an Epstein client list exist and is the government in possession of it?” Todd Blanche: “No. ..To be honest with you, I don’t even know what a client list is. …I have not seen such a list.”
0:55

Katie Miller: “Does an Epstein client list exist and is the government in possession of it?” Todd Blanche: “No. ..To be honest with you, I don’t even know what a client list is. …I have not seen such a list.”

PatriotTakes 🇺🇸

306,701 просмотров • 23 дней назад

Financial Advisor survey on crypto: - 59% do not invest in it or plan to in the future - 26% don't invest in it now but expect to in the future - 12% use crypto based on client request - 3% use crypto on advisor recommendation
2:34

Financial Advisor survey on crypto: - 59% do not invest in it or plan to in the future - 26% don't invest in it now but expect to in the future - 12% use crypto based on client request - 3% use crypto on advisor recommendation

Bitcoin News

260,101 просмотров • 1 год назад