正在加载视频...

视频加载失败

返回首页

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,805 次观看 • 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 次观看 • 6 个月前

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

108,196 次观看 • 2 年前

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 个月前

🇺🇸🇮🇳 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 个月前

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 次观看 • 8 个月前

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 次观看 • 26 天前

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 年前