In software development, code reusability is a key factor that can save developers a lot of time and effort. With reusable code, developers can easily reuse code blocks and components across multiple projects, which allows us to focus on other important tasks.
Let’s see, how React Composition can help us achieve code reusability.
What is React Composition?
React Composition is a technique that involves building complex components by combining smaller, reusable components.
Imagine that we have a pile of Lego blocks in front of us and we want to build a house. Instead of starting with a single large block, we would start by combining smaller blocks to create the different parts of the house, such as the walls, roof, windows, and doors. Each of these parts is a component that can be combined with other components to build the entire house.
We can create small, reusable components that can be combined together to create more complex components and use them across all projects which can save us time.
Here are a few practical examples:
1. Button Component:
We can create a Button component that can be used throughout our application.
This Button component might consist of smaller components such as a
Text component and an
Icon component, which are combined to create the Button component.
2. Form component:
Similar to button components, we can create reusable form components
Select. These can be composed together
to create more complex forms, and the individual components can be reused in other forms as well.
3. Layout components:
Instead of creating a layout for each page or component in your application,
we can create reusable layout components like
These can be composed together to create a consistent layout across your entire application.
What is Prop drilling and how to fix it using React Composition?
Prop drilling is a common problem in React where data needs to be passed through several layers of components as props, even if those intermediate components don’t actually use the data.
With Composition, we can avoid prop drilling by passing props only to the components that need them. Just by doing a little code restructure, we can avoid the need to pass data through all the intermediate components. This makes our code easier to read, easier to maintain, and faster to render.
Alex Sidorenko has given a wonderful example showing how React Composition can help us solve prop drilling.
To understand this concept in detail we will compare the example of
with and without Composition.
In this code-sandbox,
we have 2 files -
we are passing props from the
Over time this can become complex, cluttered, and error-prone if we want to add some more data.
To fix these issues,
we restructured our components in
AppWithComposition.js to make them independent
from their surroundings using the
DialogFooter components to accept
From the parent component
AppWithComposition passed the data to these components.
This way we can use these components anywhere without modifying them which leads to reusability.
Clean and simple, right?
We have achieved two use cases by breaking down a big component into smaller, reusable components.
React composition is an excellent technique for achieving code reusability in React applications. By breaking down complex components into smaller, reusable components, we can create more maintainable and scalable code.
It can help us avoid prop drilling by breaking down our UI into smaller components and composing them together in a way that minimizes the need for prop drilling.