Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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

67,508 subscribers

157,319 Aufrufe • vor 2 Jahren •via X (Twitter)

Wissenschaft & TechnologieBildung
LIVE

Anya Rossi• Live Now

Private livecam show

10 Kommentare

Profilbild von Delba
Delbavor 2 Jahren

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

Profilbild von chan
chanvor 2 Jahren

these visualizations are amazing, Delba!

Profilbild von Delba
Delbavor 2 Jahren

Thank you!

Profilbild von Rotimi Best
Rotimi Bestvor 2 Jahren

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

Profilbild von Jan Nicklas
Jan Nicklasvor 2 Jahren

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?

Profilbild von Delba
Delbavor 2 Jahren

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.

Profilbild von janka
jankavor 2 Jahren

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

Profilbild von Delba
Delbavor 2 Jahren

Blue it is. It has been decided 🤝

Profilbild von Steven Tey
Steven Teyvor 2 Jahren

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

Profilbild von Delba
Delbavor 2 Jahren

Haha, cheers Steven! Congrats on getting engaged 🖤

Ähnliche Videos

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

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

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,539 Aufrufe • vor 3 Jahren

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

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

React visually explained: 'use client'
15:56

React visually explained: 'use client'

Delba

746,659 Aufrufe • vor 1 Jahr

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

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

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

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 Aufrufe • vor 5 Monaten

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 Aufrufe • vor 6 Monaten

🇺🇸🇮🇳 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 Aufrufe • vor 9 Monaten

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

#Client Client - Look how we used to be

RPClipsGTA

107,937 Aufrufe • vor 2 Jahren

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 Aufrufe • vor 11 Monaten

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,513 Aufrufe • vor 7 Monaten

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

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,560 Aufrufe • vor 14 Tagen

Tucker Carlson: "Pam Bondi said on camera 'We have a client list. I've seen the client list.' And then she's saying there's no client list. It doesn't make any sense...The current DOJ under Pam Bondi is covering up crimes. Why are they doing that?"
0:57

Tucker Carlson: "Pam Bondi said on camera 'We have a client list. I've seen the client list.' And then she's saying there's no client list. It doesn't make any sense...The current DOJ under Pam Bondi is covering up crimes. Why are they doing that?"

Republican Accountability

186,959 Aufrufe • vor 11 Monaten