React Owner Components (and why you need to know them)

🚀 Project React → cosden.solutio...
📥 Import React (Newsletter) → cosden.solutio...
Article → reacttraining....
Join The Discord! → discord.cosden...
VSCode Theme | Font → Material Theme Darker | Menlo, Monaco "monospace"
In this video we'll be reading an article on owner components in React, which is a term that hasn't been used in a long time. But now with the introduction of server components, the term "owner" components is more important than ever. You'll learn about the difference between "owner", "parent", and "child" components are.

[@dumbfailurekms]

In other words you can't call a server component inside of a client component, but you can pass a server component as props (children) to a client component when you have a server component that is the owner. This is explained pretty succinctly in the nextJS docs.

[@cosdensolutions]

yep, exactly

[@sachinmalik5837]

Yes, because just like @codsensolutions explained in that hierarchy, (Parent/Child Scenario) parent can't re-render the child anyways. so we can pass use in that way

[@NotreallySerious695]

​@@cosdensolutions idk anything about nextjs but if the server component is sent to client as already generated html why would the owner component need to re-render it at all since it is static html and has no JS code at all..i am confused about this, I mean nothing in the server component really changes no matter what state gets changed in its owner that is client component..

[@tomasburian6550]

Even though I've been steadily working in the industry for years now, I still watch your stuff during breaks just to keep my skills fresh and up to date. Learning something new from / about React should be an integral part of every React developer.

[@artursavchuk2363]

I called my components only as child one and parent one, thank you for explaining what the owner component is

[@ptolemyhenson6838]

Just recently learned about this. Seems fundamental to how the render system works in React, just wasn't covered in school for whatever reason.

[@strategistaow3520]

Good to know, I didn't know that thing at all.

[@congjuny]

9:52' Why is not allowed to be a server component, and it automatically becomes a client component? If server component means it's rendered/translated to html on the server, why cannot you ship as html fragment to the browser? You may be explaining how it's implemented. But what's the reason behind?

[@CGAR_420]

Because it's nested in a client component ProfileLayout
You should instead add props { children } to ProfileLayout
Then in the page you do like
Avatar is called in the page instead of the client component

[@tomvj15]

"Project React " course is for beginner or mid-level if i am having around 1 year of experience it might be helpful..?

[@cosdensolutions]

it's for beginners but it goes quite far tbh. You end up building quite a project with a lot of different parts to it, and you learn about best practices and design patterns along the way

[@samoniumuziejus]

So we started about react and suddenly start talking about nextJs server components, oh boy do the lines blur so quickly 😮

[@ptolemyhenson6838]

NextJS is a framework for React.

[@codeWithBala]

❤😊

[@freennnn]

You named a few times 'owned' components as children, which is a little confusing since you are comparing them to opposite parent/children concept

[@buddytech7775]

Why don't you start MERN stack series ｡⁠◕⁠‿⁠◕⁠｡

[@cosdensolutions]

because I don't personally use it much so I'm not qualified

[@takisbezaitis7741]

@@cosdensolutions Hello! Great video. May I ask you what do you use as a backend with react, since you don't use MERN? Thank you.

[@cosdensolutions]

For my web apps I'd probably use Nextjs. But I'm mostly a React Native developer so I use other things like Supabase or an api

[@takisbezaitis7741]

@@cosdensolutions Thank you!

[@codylillywhite4245]

Can't you clone the children then pass props to it as a parent component. Then it is technically also the owner

[@cosdensolutions]

Yes but it's not recommended to do that

[@lamhung4899]

That owns the cloned component but not original component 😂

[@trejohnson7677]

i blame function components.