Using composition

In React, composition is a natural pattern of the component model. For instance, JSX’s markup language syntax enables us to pair a div with an h2 tag seamlessly, without the need to incorporate anything new.

The custom component is nothing more special than the built-in ones like a div; you can use your Cart component with a div just as you can use a p tag with it. This pattern enables more straightforward reuse of components, which can contribute to cleaner and more maintainable code.

Let’s consider an example. Suppose we’re building a UserDashboard component that displays user information. The profile includes an avatar, a name, and a list of the user’s friends and the latest posts. Here’s how it might look:

type User = {
  name: string;
  avatar: string;
  friends: string[];
};
type Post = {
  author: string;
  summary: string;
};
type UserDashboardProps = {
  ...