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.
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:
function List() {
return (
{list.map(item => (
-
{item.title}
{item.author}
{item.num_comments}
{item.points}
))}
);
}function Search() {
return (
);
}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:
Components that don’t render other components are called leaf components.
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.
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.