I Was Wrong About Nested React Components

I just thought nesting component definitions in React was pointless, turns out it's a big problem for React when it comes to maintaining state or doing efficient updates. Don't do it!

👉 VS Code theme and font? Night Wolf [black] and JETBrains Mono

[francis_n]

It takes a big man to admit when he's wrong! Thanks for all your work Jack. Always learn from you 👍🏾

[perezident]

Side note, congrats on 100K! Thanks for teaching me TypeScript through your videos too! 🎉

[zgover]

You’re forgetting to acknowledge `useMemo` for edge cases, which only re-creates it if the hook deps change, but should only be used when the component definition NEEDS to be defined within a nested local scope. Thank you for reveling efforts to bring awareness to these common anti-patterns 👍

[juanferrer]

I suppose that you can wrapped that in usecallback or useref, but it would hurt my eyes reading that, much better not nesting. There is no reason for nest, great video!

[MultiPoiu]

I've taken a project (after a full team leave), and there is a lot of shitty subComponent, and even if my react is rusty I've immediately see why this is gonna an issue, but thanks to your video I now know that is worse than I've expected

[nebraskacoder]

Just a little mention, React docs state that if you want to use the previous state in the setState function, you should use a callback instead of a value param. Example: setCount( ( countOld) => countOld + 1 );

[PostMeridianLyf]

You are the man. I actually didnt want to tell you about my nested components before because I too thought you were correct. Thanks for the update! This channel is gona blow up because you are amazing!

[mihaimanole]

When I was reading the title I was imagining using components inside another components and wandering what to be bad in that. Never crossed my mind that someone thought to define a component inside another component. This idea is a nightmare. Don’t scare me anymore.

[alexanderbrown]

Thanks Jack. I know I'm late to the party with this video, but I'm an experienced React developer and I recently discovered your channel. I have never been a fan of nested components, but I've never quite understood why and so I've never been able to articulate it to colleagues. It seems obvious now, watching this. Thanks!

[marouaniAymen]

I appreciate the fact that you say that you was wrong about something, but in practice I never pout components inside others and I always keep them in separate files inside the same directory with and index.js file to declare what I have to export.

[bolt]

you're the best, jack. I'm a senior dev but I always learn something ( like I should )

[EvertJunior]

It's good practice to compose components using the "children" prop from react, specially when nesting components, this prevent unintentional rerenders and it's an easy performance win. Some react engineer tweeted about it recently.

[maxvhanamane]

They have already mentioned that in the react docs (Nesting and organizing components. [Pitfall]). BTW it is good information for those who haven't read the docs.

[lucasmonaco]

Hi Jack, I've been a fan of your videos for some time now and they've been a great source of learning. Also, I just love the short and concise video format, it's fantastic! 🤩

[Slydog]

You definitely can do this, but you would be required to useCallback to memoize the component. I would still agree though that it is better to simply separate out the components into separate functions

[ShaharHarshuv]

Seems like it's a repeating mistake for beginners to not understand that code inside a component fuction can repeatedy run, when it happens and what are the implications of it.

Thanks for easy to follow and understand videos

[muha]

Honestly, this is one reason I prefer SolidJS over React. The syntax is literally the same, just replace "useEffect" with "createSignal" and it just works. The reason I like Solid more is because it doesn't make a virtual DOM, so it doesn't have to re-render like React does.

[codinginflow]

What if you move the name/setName state from the NameField out into its parent? Wouldn't that solve the problem?

[jz]

useCallback to memo the function component would work right? But if the function needed new props we would have to remember to add them as dependencies of the callback i think

[ragilburhanudinpamungkas]

thank you for the insight.
how about using useCallback if we are using nested component? is it affect the perfomance? thank you.
but I prefer using separate component instead of nested component.