🏆 React component props like a senior dev

Something something "there's 2 hard parts about programming, and naming is one of them." Let's see how to write smarter component props that invert control to the parent, where it counts 🙌

#programming #webdevelopment #reactjs #tutorial #beginner #whiteboardtheweb

Good advice. When people hear - "reusable components" - they immediately think of a component that satisfies any conditions - and that is this propapcalipse

[AlvarLagerlof]

Yes. This also had a tendency of making using server components simpler.

[azeek]

First video of you I watched. And man, this is so true, very useful at work for me. You deserve my sub

[yomaru_]

Good short vid. Such a simple concept but many people don’t know

[bobwilkinsonguitar]

MAN!! For good design patterns, and useful stuff, you might be the best creator ive found. Thank you!!!!

[miraclenerdkidchiki]

I love this dude... don't ono y he aint gettin likes
Keep up the good work...love your delivery nd energy

[frytura]

Got it, keep it simple since the developer were building the component for IS NOT dumb, all we need to do is make our component act as expected

[cjpjs]

Your vids are great man! Keep up the good work!

[joshuamodiba]

I just started React this month, and yeah I do love components but what just happened here

[CodingWithMrM]

Yeah that’s what I do. Just let the user do the thing 😊

[MrGusberto]

Hey man, i love your shorts 🚀. Quick question about this one: who are you addressing here as user?

[atmeshwarsingh]

You can do it with component composition

[unhhgcrxexhjvuvujchcrzwzwz]

That quote really shows why the Mavs are such a horrid franchise. They lucked into Dirk, without him, one of the worst expansion teams ever.

[ravikumarmistry]

Great but without documentation it will be hell again

[Zeegoner]

Some constructive feedback: In the items.map example, your use of red and blue seems inconsistent. Red means managed by you, and blue means managed by the user, right? Seems you've inverted the red-blue relationship in that example. On the prior screen, you also wrote "let the user decide" in red when you didn't mean anything by it, which needlessly provoked confusion. Also the choice of words: "you add a prop for that" is confusing because you clearly mean that it's more specifically: the hardcoding of that prop that's problematic, and not the addition of the prop itself. There's a huge part of the context that you've abstracting away too, which might seem obvious, but was worth spelling out, given your precise tone: that in the negative scenario where you hardcode too many props to "people-please" - that scenario is such that your motivation to add those props would be to create a set of variants of <SLIDEOUT> that you'd setting aside, to "please" those people who need different variants which you decided to create, with those different hard-coded props. I had to think for a bit about that to fill in the blanks about why it's even sensible to hard-code prop values for variants, without assuming that in that case you'd be creating variants of the component - it's an obvious assumption, but the way you're talking makes it seem like you're spelling out all parts of the context to make that scenario look ugly, when really it turns out you just left out a huge part of the context where granted it still is ugly in the way you're trying to describe.

[EddieVillamor]

Hard to understand what's happening from The explanations, looks like all it was was moving from uncontrolled to controlled components?
What confuses me in your example is how will a user define padding or anything related to styling? That should be up to the dev, not the user.

[und]

If you don’t know about composition you shouldn’t write production code

[dawid_dahl]

Isn’t using props inversion-of-control? You’re letting the user do whatever they want…