Video wird geladen...

Video konnte nicht geladen werden

Beim Laden dieses Videos ist ein Problem aufgetreten. Dies könnte an einem vorübergehenden Netzwerkproblem liegen oder das Video ist möglicherweise nicht verfügbar.

❌ Don't import server components directly from client components ✅ Instead send them as props to client components

George Moller

118,034 subscribers

42,762 Aufrufe • vor 3 Jahren •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

7 Kommentare

Profilbild von George Moller

George Mollervor 3 Jahren

I've been working professionally with React for more than 8 years and I compiled all my knowledge into 100+ infographics just like this one. Check them out ↓

Profilbild von Pawel Knuth

Pawel Knuthvor 3 Jahren

hi @_georgemoller , great job! What infographic service are you using for doing those? Cheers

Profilbild von Ashik Chapagain

Ashik Chapagainvor 3 Jahren

What font are you using?

Profilbild von Rajan.dev 👨‍💻

Rajan.dev 👨‍💻vor 3 Jahren

dude this animation is so cool !

Profilbild von gp 🌎

gp 🌎vor 3 Jahren

What’s the advantage of doing this?

Profilbild von George Moller

George Mollervor 3 Jahren

@0xgiangp Not advantage, but more is the only way you can send in a server component through a client component

Profilbild von Saidul

Saidulvor 3 Jahren

This a great approach to have your code organized.

Ähnliche Videos

❌ Don't pass props to multiple nested components in React. ✅ Instead use libraries like react-query to better handle server state.

❌ Don't pass props to multiple nested components in React. ✅ Instead use libraries like react-query to better handle server state.

George Moller

137,443 Aufrufe • vor 3 Jahren

❌ Avoid having components with too many props. ✅ Instead use the compound components pattern in React to embrace composition.

❌ Avoid having components with too many props. ✅ Instead use the compound components pattern in React to embrace composition.

George Moller

130,080 Aufrufe • vor 3 Jahren

❌ Avoid having components with too many props. ✅ Instead use the compound components pattern in React to embrace composition.

❌ Avoid having components with too many props. ✅ Instead use the compound components pattern in React to embrace composition.

George Moller

177,710 Aufrufe • vor 2 Jahren

Client/Server composition with server components feels illegal 😅

Client/Server composition with server components feels illegal 😅

Alex Sidorenko

69,174 Aufrufe • vor 2 Jahren

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

"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

51,480 Aufrufe • vor 1 Jahr

❌ Avoid prop-drilling your components to extend them ✅ Instead use composition

❌ Avoid prop-drilling your components to extend them ✅ Instead use composition

George Moller

51,316 Aufrufe • vor 7 Monaten

If you use Next.js + @shadcn/ui, you know the pain of importing components one by one. As a lazy dev, I built a VS Code extension to import multiple components at once 🚀 No more: import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card } from "@/components/ui/card" Just select what you need, done ✨

If you use Next.js + @shadcn/ui, you know the pain of importing components one by one. As a lazy dev, I built a VS Code extension to import multiple components at once 🚀 No more: import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card } from "@/components/ui/card" Just select what you need, done ✨

Suraj Jha

48,373 Aufrufe • vor 10 Monaten

React Server Components allow you to call your database directly from a component. And that's great... but how do we make sure this code never ever runs on the client?

React Server Components allow you to call your database directly from a component. And that's great... but how do we make sure this code never ever runs on the client?

Lee Robinson

177,038 Aufrufe • vor 2 Jahren

❌ Don't use barrel imports in React ✅ Import components directly Barrel imports (index.js re-exports) import the entire module even if you need one component. This adds unused code to your bundle ↓

❌ Don't use barrel imports in React ✅ Import components directly Barrel imports (index.js re-exports) import the entire module even if you need one component. This adds unused code to your bundle ↓

George Moller

161,603 Aufrufe • vor 8 Monaten

❌ Avoid mixing business logic with your React components. ✅ Instead create abstraction layers that communicate with them.

❌ Avoid mixing business logic with your React components. ✅ Instead create abstraction layers that communicate with them.

George Moller

214,976 Aufrufe • vor 3 Jahren

You wouldn’t import an SVG… or wait, maybe you would 👀 Import SVGs as components with size and fill props. Now experimental in 5.0.

You wouldn’t import an SVG… or wait, maybe you would 👀 Import SVGs as components with size and fill props. Now experimental in 5.0.

Astro

39,296 Aufrufe • vor 1 Jahr

❌ Avoid difficult-to-read conditionals to render elements in react. ✅ Instead use utility components for conditional rendering.

❌ Avoid difficult-to-read conditionals to render elements in react. ✅ Instead use utility components for conditional rendering.

George Moller

301,135 Aufrufe • vor 3 Jahren

⚛️ I don't like baking app or business logic directly in components. Instead, I use useReducer hook to separate the business logic from the UI. ✅ More predictable state changes ✅ Better architecture↓

⚛️ I don't like baking app or business logic directly in components. Instead, I use useReducer hook to separate the business logic from the UI. ✅ More predictable state changes ✅ Better architecture↓

George Moller

57,091 Aufrufe • vor 1 Jahr

chat with your kicad components, answers directly from datasheet

chat with your kicad components, answers directly from datasheet

Daniel Liu

13,680 Aufrufe • vor 6 Monaten

❌ Avoid prop-drilling components in React ✅ Instead embrace the Provider/Consumer pattern using the Context API

❌ Avoid prop-drilling components in React ✅ Instead embrace the Provider/Consumer pattern using the Context API

George Moller

48,323 Aufrufe • vor 2 Jahren

New Recipe: "Sharing data with Client Components" Learn how to use promises to unblock your page so it can be rendered (or even prerendered) as early as possible. Hope you enjoy!

New Recipe: "Sharing data with Client Components" Learn how to use promises to unblock your page so it can be rendered (or even prerendered) as early as possible. Hope you enjoy!

Sam Selikoff

18,777 Aufrufe • vor 9 Monaten

I've finally published a new version of next-international, my fully typesafe i18n library for Next.js This release adds initial support for the App Router, with both Client and Server Components:

I've finally published a new version of next-international, my fully typesafe i18n library for Next.js This release adds initial support for the App Router, with both Client and Server Components:

Tom Lienard

42,459 Aufrufe • vor 3 Jahren