Building Reusable components in Next.js

Every once in a while, we come across a code which makes us realize didn’t I write that code before and we realize we have been repeating the same logic or UI elements across multiple pages. Not only is it demoralizing and unproductive it’s not efficient in a large scale application. If only we had thought of using the same code again .But it’s hard to know beforehand which piece of code you need to write again and which piece of code is one time thing .I have faced such problems many times .I tried to make reusable components and many times I faced situations where I had created reusable code and used it very less and also used same code many times without making it reusable. The in-depth understanding of why we do what we do hadn’t hit me yet .As I made growth in my development journey, I had the opportunity to work as an Full Stack Intern in Ewan Byte I am getting the real world understanding of the value of making reusable components in a workspace there.

Firstly, lets understand what makes any component reusable ? 

Reusable components are those components that acts as a container and takes certain parameters as input to provide an desired functionality. These containers can provide multiple output  based on the input parameters . Consider it like a mathematical function f(n) which takes an input and provides output and in order to gain desired output we have to describe the function that can do so. That function is a reusable component.

Why make components reusable ?

Reusable components are one of the core principles of frontend development. There are many advantages as to why we should adapt to these principles .Let me share few of them.

1. Design consistency
2. Flexible
3. Easy Maintenances
4. Improved Productivity
5. Scalability
6. Faster Development

Which components to make reusable ?

There are various factors to consider which helps to decide which components to make reusable like number of repetitions of the component , its complexity, use cases ,scale of the project etc. However I think its  better to make following components reusable.

1. Small UI Elements (examples : Buttons, Textbox, Radios etc.)
2. Form Components
3. API call functions
4. Fallback UI components
5. Layout Components (examples: Headers, Footers, Page Layouts, Containers etc.)
6. Data Display Components (examples : Card, Table ,List etc.)

Keeping above components reusable makes the project clean, structured, consistent and centralized.

How to make components reusable?

Before coding there are few factors you should consider like will this component appear again? if yes what changes could be made to this component ?

Lets take an example .

These are two buttons now we have to identify some patterns to make them reusable like they are both buttons with two different styles and labels. Notice the similarities and differences .The similarities can be used to make a base reusable component which takes  the differences as props and make different variations of the buttons. In this case we can make a reusable button that take className and label as props  to fulfill our requirements.

Now we can use this button component as ,

Sometimes we might not know what would be the value that goes inside the component in such cases we can use props as children .

and we can use this as ,

These are some instances that we can use on regular basis to achieve reusability in components on any project.

How Reusability Impacts on the team ?

1. Improve Team Productivity
2. Improves Code Consistency
3. Ease in Improvements and Maintenance
4. Better Collaboration
5. Scalability
6. Minimizes Work
7. Fewer bugs, better testing and faster development

Best Practices for Reusability 

Think in Components

We should try to break down the UI of an project into small individual atomic components as possible. Each component should do one thing well and other responsibilities should be passed as props.

Use Props Effectively

We should make components configurable through props, not by rewriting logic .We can use props for variations (e.g., type="primary" size="small") instead of making new components for each version and also allow flexible content using children when the content is unknown.

Abstract Common Logic

We can abstract repeated logic into custom hooks or utility functions that can be used again and again. Example: form validation, fetching data, authentication.

Use Clean Naming Conventions

We should use clean and understandable names for the components to better understand the context and use of the components. The names should be both purposeful and meaningful.

Avoid Hardcoding

We generally shouldn't hardcode text, URLs, or logic inside reusable components. Instead, we can use props or configuration objects to pass them dynamically.

These are some of best practices that I learned over time on how to make components reusable, its importance and usage.

Bonus Tips

We could use ComponentPropsWithRef<Type> that gives you a html element with all basic props for element including the ref prop. This utility basically provides all the necessary props for an HTML element that it usually accepts including the ability to pass a ref without listing them. If you don't want to use forwardRef you could also use ComponentPropsWithoutRef<Type> .Its the same as ComponentPropsWithRef<Type> but without forwardRef.

Note: You must have good understanding of forwardRef concept.

Lets have a look at an example without using ComponentPropsWithRef<Type>

Here we have to manually define every prop like placeholder, value, onChange, type, className etc.

Instead we can use ComponentPropsWithRef<Type> utility to simplify that.

Any further queries and advanced topics will be covered in the next release.