Multiple Components in React – Structure, Instantiation, and Hierarchical Growth

Introduction

Components are the foundation of every React application. Each component handles a specific part of the UI or logic. As your project grows, it's important to split components into smaller, manageable units to keep the code maintainable and scalable.

Extracting Components

Initially, everything may live inside the App component. But instead of making it larger, we can extract parts like the item list or search form into separate components:

List Component:

function List() {
  return (
    

      {list.map(item => (
        

          {item.title}
          {item.author}
          {item.num_comments}
          {item.points}
        
      ))}
    
  );
}

Search Component:

function Search() {
  return (
    

      Search: 
      
    
  );
}

Component Hierarchy

React components form a tree structure. The App component is the root, and List and Search are its children. If we extract an Item component from List, the hierarchy looks like this:

• App: Root component
• List and Search: Children of App
• Item: Child of List

Components that don’t render other components are called leaf components.

Component Instantiation

Declaring a component is like defining a class. Using it in JSX is like creating an instance:

function List() { ... }

function App() {
  return (
    

      
      
    
  );
}

You can create multiple instances of a component as long as it’s declared. This is similar to class instantiation in JavaScript, though technically different.

Best Practices

• Each component should have a clear purpose.
• Extract components when they grow too large or have distinct functionality.
• Organize components into separate files for better structure and readability.

Conclusion

As React projects grow, organizing components into a clear hierarchy and extracting reusable units becomes essential. Component instantiation allows you to reuse logic and UI efficiently, while refactoring keeps your codebase clean and scalable.