It's Okay To Declare Other Components Inside A Component?

Imagine that I have a List of Cards on my react application. So I will have two components, the and . My doubt is that where I work, when we have s

Solution 1:

It is totally fine to declare another Component in the same file, but declaring it inside another one's function would be inefficient. Imagine your app 'recreating' the second Component during each render.

So, feel free to declare it in the same file, but don't do it inside another Component's function.

Solution 2:

In a functional component, every variable gets destroyed and recreated again every render. This is what makes the useState hook so valuable, as it is smart enough to recreate it's variables with the previous or updated values.

By declaring a component inside another component, you are not only re-rendering both components, but completely redeclaring one. This won't be very performant, especially if the component is more complex.

So the answer to your question is always declare it separate. It would work declared inside, but there's no benefits from it, only drawbacks.