Video

Is this for only software developers?

Excellent Tutorial.

This is a good pattern to use, especially for low level components. prefer slots over props to keep the code of the component easy. Another suggestion i would give is to make the components do as little as possible, whatever you are not sure is not going to be reused most of the times should stay in the parent, i think a common mistake is to pass the options props to a Select component, but the options may be in many format, value-label, value-label-andLotOfOtherStuff, maybe you don't even need the label because you are showing a bunch of icons, also the options may come from an API or may be filterable, and the filtering logic may vary, etc. So just move the handling of the options and the selection of the value in the parent and it will simplify the code of the Select greatly, while the code in the parent would be easy to understand because it will be very specific for that Select.

thank you for sharing!

Great tip!

This was very helpful and informative! I have a couple of questions if you have time to answer: 1. Why does <ProductCard> use slot props as opposed to only "children" like the compound components? 2. Are there concerns about bundle size when using compound components since you're always importing all of them?

This is the way to go, sadly jr developers still have issues understanding how context work. We will get there tough ( :

first time someone wrote react code using a typewriter!

I would like to follow over your video from the initial code. I'd like to follow along while watching the video, starting from the initial code. Could you possibly provide the initial code too?

Man I was Just Thinking about the Same Problem for Scalable Components" and The CZcams Recommended it to me. I am Happy now😊😊

Great video, Vincas. Thank you.

wow, I learned a lot

you're still using props, those should be children components

No link

I wish I saw your video earlier. I just had a live coding interview and had no idea about this principle...

Clicking through these posts and half no longer exist and many are just send resume to an email with hardly any description or salary. Are you getting replies applying on this?

for independent calls allsetteled is better than all

but wont it affect performance when we map 10 to 100 cards, creating so many context in the back?

Very clear explanation, thank you

thanks i love it

nice 🔥

The idea is great but in nextjs 14 you can only use this component in the client side not on server side. Can anyone explain why?

Concurrently not parallel 😅

Let's see if I understood correctly the right use cases of this: I should/could use this whenever I have a component that needs some more details, but those details alone wouldn't be something that I could reuse elsewhere Seems like this, am I right? :)

This video has insane value. I'm working on my own web app, and this concept, when well applied and in the right situation, is a game-changer. The code without it, turns out to be simply a mess, but when applied properly, it provides the exact modularity needed. Awesome!

Everyone on CZcams uses Typescript, but companies haven't converted yet 🤷🏼‍♀

Considering info & action prop as childrens would make this more clean and easy to understand

This is great, never thought of doing it this way.

I found this really intesting approach, but the disadvantage i see now its that all components become Client Components, instead server components and you can not fetch data directly in the component in the server side

Where is the link

Thank you

CZcams bloggers grows to read documentation

love this video. i learnt soemthing new and had to come back to it just to see what i missed.

Wow. Very helpful.

I feel like we're getting back to writing plain Html 😅

That's an amazing explanation for me, thanks a lot!.

HOCs delegate rendering to other components while only composing them. They are not a solution to boolean flags. There is too much going on in this video and the premise is lost. Much of the boolean-ness can be more simply taken care of with optional props. Ie, no price, don't display the price. You don't necessarily need to pass a full DTO to a component. A component's interface should not leak implementation details.

Your to this looks awfully lot like having manually written the JSX to look like you want minus the ordering of the "slots". So, I'm not sure I see an improvement...

Thank you for the video. You can achieve namespacing by perhaps importing everything on a separate file as non default exports if the issue at hand is too many lines of imports. I will personally always favour <ProductImage/> to <Product.Image/> as on the latter you're creating a data dependency where the first one you can easily erase Product and <Product.image/> will still exist. You could then import everything in one line.

Amazing, thanks

Great video. Not 100% sold on it all being a best practice, but really useful for everyone to understand how it works

I myself, prefer to develop components so they're easier to use consumer side, I feel like providing variations of a component as a prop is much easier, pass through an Id for the product, and have all logic relating to fetching and deciding layout to the component, learning curve for other developers is much nicer, and you're using the same composition in every place, it makes it much harder to fix bugs or make changes, where if it's inside the component, maintenance is much easier, you end up having to create wrapper components too many times with composition too so that things are reusable

Great video, but for me it's missing how to do unit test with those components

What intrigues me is that he imports several components that are used inside ProductCard outside of ProductCard and that logically speaking seems very wrong. It looks pretty nice on the innermost components, but look at the size of its imports list on the outermost layer. I think it's cleaner to have 6 components with 20 lines than 5 components with 5 lines and one with more than 100.

10 seconds in and I’d already subscribed! Really liked this tutorial, looking forward to your future content. CZcams needs a lot more React design pattern videos like this.

It depends. If a function need the value from the previous function, then it's not a mistake

Hello bhaiya private company me job kaise paye please bataiyega bhaiya

Hey,, excellent video! Just a quick question. Let's imagine that you have to render 100 ProductCards. In that case, would you create 100 Context for each card? Thanks!

I can only like this video once unfortunately... Really brilliant explanation and example, well done :)

Can you post the GitHub of this?