Using Reusable Components

Madhuri Dange

August 01, 2024 09:50

Utilizing reusable components can streamline development and ensure a consistent user experience. This article will guide you on how to effectively integrate reusable components into your application. We will demonstrate the process by using reusable components in React, taking the SimpleButton component as our example.

This topic is divided into following sub-topics:

Why Reuse Components?
Importing Components
How the SimpleButton Component Works
Props and State Management Best Practices
Component Composition Techniques

Why Reuse Components?

Reusing components is an essential part of building maintainable, scalable, and efficient software applications. Here are some reasons why you should reuse components:

Reduced Code Duplication: By reusing components, you can avoid duplicating code, which reduces the overall size of your codebase and makes it easier to maintain.
Improved Consistency: Reusing components ensures consistency in your application's UI and behavior, which enhances the user experience.
Faster Development: Reusing components saves time and effort, as you don't have to rebuild the same functionality from scratch.
Easier Maintenance: When you reuse components, you only need to update the component in one place, which makes maintenance easier and reduces the risk of introducing bugs.
Better Testability: Reusing components makes it easier to test your application, as you can test individual components in isolation.

Importing Components

To use a reusable component, you need to import it into your application. Below are the Instructions on how to import reusable components into different parts of the application:

Step 1: Import the Component
Import the SimpleButton component into your application:

import SimpleButton from './SimpleButton';

Step 2: Use the Component

Use the SimpleButton component in your application:

<div className="col-12 md:col-5">

<SimpleButton label="Add New Address" onClick={() => setVisibleDialog(true)} />

</div>

How the SimpleButton Component Works

The SimpleButton component allows us to pass a function through the onClick prop, which is executed when the button is clicked. This component also manages loading and disabled states, enabling customization of the button's behavior for various scenarios.

In this example, the SimpleButton component is utilized to display a button labeled "Add New Address." Upon clicking the button, the onClick function is triggered, setting the visibleDialog state to true.

Props and State Management Best Practices

When utilizing reusable components, effective management of props and state is crucial. Consider the following best practices for passing props and managing state in reusable components:

Pass Props: Pass props to the component using the propName={value} syntax.
Use State Management: Use state management solutions like React's useState hook or the Context API to manage state.
Below screenshot depicts the usage of useState() for state management to set disabled and isloading property.

Component Composition Techniques

When composing complex UI elements, it is essential to use multiple reusable components effectively. Here are some techniques to keep in mind for composing complex UI Elements using multiple reusable components:

Use a Container Component: Use a container component to wrap multiple reusable components.
Below screenshots shows Toast container added in our App to give uniform toaster notification throughout the application.
Use Props to Customize Components: Use props to customize reusable components.
Below screenshot shows the implementation of SimpleButton in AddressForm.jsx form

Below screenshot shows the UI of SimpleButton on Add New Address form.

Below screenshot shows the implementation of reusable component SimpleButton in ViewCartCard.jsxform by passing different props.

Below screenshot shows the UI of SimpleButton on Cart page.