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!
👉 Practical Module Federation Book: https://module-federation.myshopify.com/products/practical-module-federation
👉 No BS TS (The Book): https://no-bs-ts.myshopify.com/
👉 I’m a host on the React Round-Up podcast: https://devchat.tv/podcasts/react-round-up/
👉 Don’t forget to subscribe to this channel for more updates: https://bit.ly/2E7drfJ
👉 Discord server signup: https://discord.gg/ddMZFtTDa5
👉 VS Code theme and font? Night Wolf [black] and JETBrains Mono
source
What if you memo() that inner component. I’m pretty sure that works…
Nice, glad you pointed this out to people was my issue with your other video! I've seen accessibility issues in production due to broken focus states caused by nesting react components
This is really why I don't use React anymore and have moved to solidjs for projects in which I have control over the tech I use.
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! 🤩
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.
How about using useCallback for this?
I don't understand the earlier part where you said "Folks saying want to hide the implementation of NameField." What does this exactly mean? How does nested NameField component inside App "hide" its implementation?
keeping outside would have same reference so not created again 😛 for those wondering why 😅
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.
Reusing props and closure maybe the reasons why folks doing that. Basically split complex jsx into smaller pieces and don't have to worry about props drilling for new components
How about this?
export const Component = (props) => {}
and then
Component.Child1 = (props) = {}
Component.Child2 = (props) = {}
@Jack Herrington Why would this be called "nesting"? To me its something more akin to "inline definitions" which is generally a bad idea in JS anywhere unless the function should actually change on each call to its parent (e.g. a callback refering to some unique instance of a class or something)
Can using something like useMemo help here? 🤔
I know that you should not do that too, but I guess it should work
That only applies if the component has its own state tho. I tend to collect state in the highest possible component that does not lead to having to pass props several layers. In this example the state for namefield i would just place into app as well then you would have all state at the same place anyway and can see it all at one glance. Or you use closures and useCallback sure…
Great Video, question, what font and theme do you use on your vs code setup ? I really like it, and would like to use myself.
If you absolutely need to nest a component (I cannot think of any reason) you can always use refs or wrap it on a useMemo hook to stop the creation of new instances
I feel like I’m missing something. I’d never use a nested component?
Hi mike,
I am having a problem in with masonry layout,
The issue: i have list of items and a standard masonry view will show those items top to bottom order in columns such as [[1,2,3,4],[5,6,7,8],…rest],
What i want : i want to show the masonry as left to right such that lastest items stay at top,
I have done some code for showing it top to left, and it works
But when the list gets updated the whole layout re renders ,
So to avoid re rendering of each element, what can be done,
I am using memo for child elements
Nesting is for birds 🐦 NOT React components, at least not like that 🤣
Great video! I believe there is a way to hack it, by wrapping the nested component in useCallback so whenever the App component rerenders the reference does not change. But as I said it is still a HACK. Love watching your videos about quirks of React. 😃
I think it will be only be a problem when outer component has some state variable
I am again watching this on my phone and I should probably get back at my computer… but I am just a bit lazy and I wanted to watch this on my phone before 😅 an afternoon nap in my bed (I know it’s unusual but my point is that I want to watch this on my phone)… it’s a bit small 😅😅😅 but it is worth watching because it is very interesting…
I want to report a click bait 😂 I thought you were going to talk about using IIFE components that I left the comment in previous video
I read the title and reached for my gun. never trick me like that again.
useCallback would work but you shouldnt if you can remove and place it somewhere.
Good PSA.
People actually do that?
That's crazy and looks like really messy code.
Very interesting! I've seen this many times and always thought it wasn't a good idea, but I couldn't explain why, until now!
Dunning-Kruger gonna Dunning-Kruger. Story of the tech industry.
You can place the component in a useMemo and it should be fine. Although, this pattern is just kinda dumb all together. I feel the same, you just shouldn’t do it tbh.
After using vanilla Web Components for over a year and loving it, it still fascinates me how some Framework users are so entrenched, they are perfectly fine fixing issues that only happen because they are using said framework.
As for nested Web Components, it's basically the best part, and works how you expect it would. No weird surprises, like the one described. Sure it's a bit more verbose, but you can always tell what is going on.
The fact that this behaviour is surprising to people shows how superficially even most experienced react developers understand it. I guess that shows just how powerful of an abstraction it really is 🤔
Well, you can always default to using useMemo hook, so it doesn’t re-render NameField component on App re-render.
But please let’s just all agree not to nest components inside of components. That just sounds very confusing to understand, and will make a nightmare to refactor the code later on 😅