Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

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

George Moller

118,034 subscribers

42,762 views • 3 years ago •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

7 Comments

George Moller3 years ago

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 ↓

Pawel Knuth3 years ago

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

Ashik Chapagain3 years ago

What font are you using?

Rajan.dev 👨‍💻3 years ago

dude this animation is so cool !

gp 🌎3 years ago

What’s the advantage of doing this?

George Moller3 years ago

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

Saidul3 years ago

This a great approach to have your code organized.

Related 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 views • 3 years ago

❌ 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 views • 3 years ago

❌ 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 views • 2 years ago

Client/Server composition with server components feels illegal 😅

Client/Server composition with server components feels illegal 😅

Alex Sidorenko

69,174 views • 2 years ago

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 views • 3 years ago

"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 views • 1 year ago

❌ 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 views • 7 months ago

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 views • 10 months ago

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 views • 2 years ago

❌ 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 views • 8 months ago

❌ 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 views • 3 years ago

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 views • 1 year ago

❌ 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 views • 3 years ago

⚛️ 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 views • 1 year ago

chat with your kicad components, answers directly from datasheet

chat with your kicad components, answers directly from datasheet

Daniel Liu

13,680 views • 6 months ago

❌ 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 views • 2 years ago

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 views • 9 months ago

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 views • 3 years ago