Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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

Bilim & TeknolojiEğitim
LIVE

Anya Rossi• Live Now

Private livecam show

10 Yorum

Delba profil fotoğrafı
Delba2 yıl önce

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

chan profil fotoğrafı
chan2 yıl önce

these visualizations are amazing, Delba!

Delba profil fotoğrafı
Delba2 yıl önce

Thank you!

Rotimi Best profil fotoğrafı
Rotimi Best2 yıl önce

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 profil fotoğrafı
Jan Nicklas2 yıl önce

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 profil fotoğrafı
Delba2 yıl önce

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 profil fotoğrafı
janka2 yıl önce

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 profil fotoğrafı
Delba2 yıl önce

Blue it is. It has been decided 🤝

Steven Tey profil fotoğrafı
Steven Tey2 yıl önce

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

Delba profil fotoğrafı
Delba2 yıl önce

Haha, cheers Steven! Congrats on getting engaged 🖤

Benzer Videolar

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

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

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

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

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

React visually explained: 'use client'
15:56

React visually explained: 'use client'

Delba

746,732 görüntüleme • 1 yıl önce

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

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

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

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

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

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

#Client Client - Look how we used to be

RPClipsGTA

107,937 görüntüleme • 2 yıl önce

🇺🇸🇮🇳 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 görüntüleme • 10 ay önce

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

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

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

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

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