How to deal with a huge number of components in a page in React

After a few years working with React, I found out that 200-300 lines is a decent good React component. Shouldn't excess this number, otherwise, it'll be hard to read.

That's why when developing a complicated page, I usually try to break them into small components, which then can be broken into smaller components and so on.

However, this introduces a new issue that there are way too much components and most of them are not reusable at all. But they provide good readability.

I've seen 2 approaches to overcome this:

One would be creating nested folder components. The file structure would look like this.

src/
├─ components/
│  ├─ Parent1/
│  │  ├─ index.tsx
│  │  ├─ components/
│  │  │  ├─ Child1/
│  │  │  │  ├─ index.tsx
│  │  │  │  ├─ components/
│  │  │  │  │  ├─ GrandChild1/
│  │  │  │  │  │  ├─ index.tsx
│  │  │  │  │  ├─ GrandChild2/
│  │  │  │  │  │  ├─ index.tsx
│  │  │  ├─ Child2/
│  │  │  │  ├─ index.tsx
│  ├─ Parent2/
│  │  ├─ index.tsx

It certainly looks horrible, but here are some advantages I found:

• Hierarchy makes it easier to know how a component is made of
• A component should be reused inside its parent folder only

Another would be flatten the hierarchy above. Put all components into /components, no nest /components folder

Can you give me some advice which approach to go? Thank you very much.
Even external resources are also highly appreciated!

You can keep the hierarchy behavior in a cleaner way by separating components by their use case or reusability.

An example of this is what is used in this next-typescript starter, that in a real project could look something like this:

<!-- begin snippet: js hide: false console: true babel: null -->

<!-- language: lang-js -->

src/
├─ components/
│  ├─ common/
│  │  ├─ ReusableComponent.tsx
│  │  ├─ Carousel.tsx
│  ├─ layout/
│  │  ├─ header/
│  │  │  ├─ index.tsx
│  │  │  ├─ styles.css
│  │  ├─ footer/
│  │  │  ├─ index.tsx
│  │  │  ├─ styles.css
│  ├─ primitives/
│  │  ├─ Button.tsx
│  │  ├─ Link.tsx
│  ├─ sections/
│  │  ├─ home/
│  │  │  ├─ HeroComponent/
│  │  │  │   ├─ index.tsx
│  │  │  ├─ FeaturesComponent.tsx

<!-- end snippet -->

I like small components as well (100-300 line range max). It makes testing and readability much easier as you said. I think it's very much up to the development team consensus in the end.

I'm personally not a huge fan of reusing the index.tsx file name.

Here's a convention I enjoy using which has worked for me several folders deep with a large count of small components.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

src/
├─ components/
│  ├─ Parent1_/
│  │  ├─ ChildComponent_/
│  │  │  ├─ NestedComponent_/
│  │  │  │  ├─ NestedNestedComponent_/
│  │  │  │  ├─ NestedNestedComponent.tsx
│  │  │  ├─ NestedComponent.tsx
│  │  ├─ ChildComponent.tsx
│  ├─ Parent2_/
│  │  ├─ ChildComponent_/
│  │  │  ├─ NestedComponent_/
│  │  │  │  ├─ NestedNestedComponent_/
│  │  │  │  ├─ NestedNestedComponent.tsx
│  │  │  ├─ NestedComponent.tsx
│  │  ├─ ChildComponent.tsx
│  ├─ Parent1.tsx
│  ├─ Parent2.tsx

<!-- end snippet -->

Well, personally, I prefer the 2nd approach that not to nest too many levels of components in each other.

But for the 1st way, you can improve it by replace the name of folder from components to your child component name. It still keeps your hierarchy and also can simplify 1 folder level for each one.

src/
├─ components/
│  ├─ Parent1/
│  │  ├─ index.tsx
│  │  ├─ Child1/
│  │  │  ├─ index.tsx
│  │  │  ├─ GrandChild1/
│  │  │  │  ├─ index.tsx
│  │  │  ├─ GrandChild2/
│  │  │  │  ├─ index.tsx
│  │  ├─ Child2/
│  │  │  ├─ index.tsx
│  ├─ Parent2/
│  │  ├─ index.tsx

However, beside that, it would be better to group components in a more functionable way. Instead of putting all components in the components folder, you can create new folders named layouts, features & pages. This approach is called "Colocation".

src/
├─ components/
│  ├─ form/
│  ├─ ui/
│  │  ├─ buttons/
│  │  ├─ cards/
│  │  ├─ modals/
│  ├─ index.tsx
│  |
├─ layouts/
│  ├─ navbar/
│  │  ├─ NavItem.tsx
│  │  ├─ NavItemDropdown.tsx
│  ├─ sidebar/
│  ├─ footer/
│  ├─ containers/
│  │  ├─ AuthLayout.tsx
│  │  ├─ MainLayout.tsx
│  ├─ index.tsx
│  |
├─ features/
│  ├─ authentication/
│  │  ├─ components/
│  │  │  ├─ LoginForm.tsx
│  │  ├─ hooks/
│  │  ├─ services/
│  ├─ todos/
│  │  ├─ components/
│  │  │  ├─ TodoList.tsx
│  │  │  ├─ TodoItem.tsx
│  │  │  ├─ form/
│  │  │  │  ├─ CreateTodoForm.tsx
│  │  │  │  ├─ EditTodoForm.tsx
│  │  ├─ contexts/
│  │  ├─ services/
│  ├─ index.tsx
│  |
├─ pages/
│  ├─ Login.tsx
│  ├─ Home.tsx
│  ├─ Todos.tsx
│  ├─ index.tsx

Here are some benefits that I can see so far:

• Everything are arrange in their own place so whenever you want to read code around "todos", you know exactly where those code are, you don't need to find them in several folders.
• Folder components now just includes the common components which can be reused anywhere in the project. For specific components that won't be reused somewhere else, just let them be in their feature.
• You can manage to export what you need.

References:

• A blog from Web Dev Simplified

• A blog from Profy