Component Composition

Component composition is a fundamental concept in React that allows you to build complex UI components from smaller, reusable pieces. This approach enables you to create modular, maintainable, and scalable applications. In React 19, component composition is more powerful than ever, thanks to new features and improvements.

Basic Example

Let’s start with a simple example of component composition. Suppose we want to create a UserProfile component that displays a user’s name, avatar, and bio. We can break this down into smaller components:

// Avatar.js
import React from 'react';
 
const Avatar = ({ src, alt }) => {
  return <img src={src} alt={alt} />;
};
 
export default Avatar;

// UserInfo.js
import React from 'react';
import Avatar from './Avatar';
 
const UserInfo = ({ name, avatarSrc, bio }) => {
  return (
    <div>
      <Avatar src={avatarSrc} alt={name} />
      <h2>{name}</h2>
      <p>{bio}</p>
    </div>
  );
};
 
export default UserInfo;

// UserProfile.js
import React from 'react';
import UserInfo from './UserInfo';
 
const UserProfile = () => {
  return (
    <div>
      <UserInfo
        name="John Doe"
        avatarSrc="https://example.com/johndoe.jpg"
        bio="Software engineer and React enthusiast"
      />
    </div>
  );
};
 
export default UserProfile;

In this example, we define separate components for the avatar, user info, and user profile. We then compose these components to create the final UserProfile component.

Advanced Usage

Let’s consider a more complex example, where we want to create a CommentSection component that displays a list of comments, each with its own Comment component. We can use React’s map function to render an array of comments:

// Comment.js
import React from 'react';
 
const Comment = ({ text, author }) => {
  return (
    <div>
      <p>{text}</p>
      <p>— {author}</p>
    </div>
  );
};
 
export default Comment;

// CommentSection.js
import React from 'react';
import Comment from './Comment';
 
const CommentSection = ({ comments }) => {
  return (
    <div>
      {comments.map((comment, index) => (
        <Comment key={index} text={comment.text} author={comment.author} />
      ))}
    </div>
  );
};
 
export default CommentSection;

In this example, we define a Comment component and a CommentSection component that renders an array of comments using the map function.

Best Practices

When composing components, keep the following best practices in mind:

• Keep each component focused on a single responsibility to ensure maintainability and reusability.
• Use props to pass data from parent components to child components, rather than relying on global state or complex state management.
• Use React’s built-in features, such as map and filter, to simplify your code and improve performance.
• Avoid deeply nested components, as this can lead to complexity and performance issues.

Key Takeaways

• Component composition is a powerful technique for building complex UI components from smaller, reusable pieces.
• Keep each component focused on a single responsibility to ensure maintainability and reusability.
• Use props to pass data from parent components to child components, rather than relying on global state or complex state management.
• Use React’s built-in features, such as map and filter, to simplify your code and improve performance.