Exploring Popular Composition Patterns

In this chapter, we will learn how to make components communicate with each other effectively, which is a crucial part of building complex React applications using small, testable, and maintainable components. By mastering the popular composition patterns and tools in React, you will be able to take control of every single part of your application and build scalable and extensible software.

Let’s dive in and explore how we can leverage these patterns and tools to build better React applications. We will cover the following topics:

• How components communicate with each other using props and children
• The container and presentational patterns and how they can make our code more maintainable
• What higher-order components (HOCs) are and how, thanks to them, we can structure our applications in a better way
• What the function of the child component pattern is and what its benefits are

Technical requirements

To complete this chapter, you will need the following:

• Node.js 19+
• Visual Studio Code

You can find the code for this chapter in the book’s GitHub repository at https://github.com/PacktPublishing/React-18-Design-Patterns-and-Best-Practices-Fourth-Edition/tree/main/Chapter04.

Communicating components

Composing React components is one of the key benefits of building applications with React. By creating small, reusable components with clean interfaces, you can easily compose them together to create complex applications that are both powerful and maintainable.

Small components with a clean interface can be composed together to create complex applications that are powerful and maintainable at the same time.

Composing React components is straightforward; you just have to include them in the render:

const Profile = ({ user }) => ( 
  <>
    <Picture profileImageUrl={user.profileImageUrl} /> 
    <UserName name={user.name} screenName={user.screenName} /> 
  </> 
)

For example, you can create a Profile component by simply composing a Picture component to display the profile image and a UserName component to display the name and the screen name of the user.

In this way, you can produce new parts of the user interface...

Exploring the container and presentational patterns

In the last chapter, we saw how to take a coupled component and make it reusable step by step. Now we will see how to apply a similar pattern to our components to make them clearer and more maintainable.

React components typically contain a mix of logic and presentation. By logic, we refer to anything that is unrelated to the UI, such as API calls, data manipulation, and event handlers. The presentation is the part of the render where we create the elements to be displayed on the UI.

In React, there are simple and powerful patterns, known as container and presentational, which we can apply when creating components that help us to separate those two concerns.

Creating well-defined boundaries between logic and presentation not only makes components more reusable, but also provides many other benefits, which you will learn about in this section. Again, one of the best ways to learn new concepts is by seeing practical examples...

Understanding HOCs

In the functional programming section of Chapter 3, Cleaning Up Your Code, we introduced the concept of higher-order functions (HOFs). HOFs are functions that accept another function as an argument, enhance its behavior, and return a new function. Applying the idea of HOFs to components results in higher-order components (HOCs).

An HOC looks like this:

const HoC = Component => EnhancedComponent

HOCs are functions that take a component as input and return an enhanced component as output. Let’s start with a simple example to understand what an enhanced component looks like.

Suppose you need to attach the same className property to every component. You could manually add the className property to each render method, or you could write an HOC like this:

const withClassName = Component => props => (
  <Component {...props} className="my-class" />
)

In the React community, it’s common to use the with prefix...

Understanding FunctionAsChild

The FunctionAsChild pattern is gaining consensus within the React community. It is widely used in popular libraries like react-motion, which we will explore in Chapter 5, Writing Code for the Browser.

The main concept is that instead of passing a child as a component, we define a function that can receive parameters from the parent. Let’s see what it looks like:

const FunctionAsChild = ({ children }) => children()

As you can see, FunctionAsChild is a component with a children property defined as a function. Instead of being used as a JSX expression, it gets called.

The preceding component can be used like this:

<FunctionAsChild>
  {() => <div>Hello, World!</div>}
</FunctionAsChild>

This example is quite simple: the children function is executed within the parent’s render method, returning the Hello, World! text wrapped in a div tag, which is displayed on the screen.

Now, let’...

Summary

In this chapter, we learned how to effectively compose and communicate between our reusable components using props. By using props, we can create well-defined interfaces and decouple our components from each other.

We also explored two popular composition patterns: the container and presentational pattern, which help us separate our logic and presentation for more specialized and focused components. Additionally, we discovered Higher-Order Components (HOCs) as a way to handle context without tightly coupling our components to it, and the Function as Child pattern for composing components dynamically.

In the next chapter, we will dive into controlled vs. uncontrolled components, refs, handling events, and animations in React.