Several best practices are available for developing components. But developing new components requires a substantial amount of work. But, the problem is keeping track of them is hard while writing them. Being a developer, there are a million little things that you need to worry about during writing reusable components.
Here’s why I’ve compiled a checklist that you can bear in mind while building highly reusable components in both React and Vue. No matter which library or framework you use, since the principles of component composition are the same.
Let’s get started!
Avoid Hypothetical Generality
It’s essential to understand your use case before implementing anything. For instance, if you dive into code without thinking, you’ll end up writing unnecessary features, which will never be used. That’s a colossal waste of your time. Thus, Thus, it would help if you avoided hypothetical generality.
While writing a component that is supposed to be reused across different use cases, the temptation to provide more abstraction is easier to justify. However, if you write the component well, it should be easy to add in new use cases, which you could not expect. This is where the 80/20 rule (Pareto Principle) comes in handy. It means that a few features you implement will be responsible for handling most of the use cases.
Simplify the API: It’s pivotal to simplify the API as much as possible. Some techniques help to maintain a balance between simplicity and flexibility. Techniques like render props and compound components allow you to achieve more flexibility while lessening complexity.
Break up components into bite-sized pieces
To break up components into bite-sized pieces, you can take the following advantages:
- It encourages the reusability of code.
- It provides a better abstraction that makes your code cleaner, easier to understand, and easier to maintain.
- It allows you to use more advanced composition techniques.
There is a way of breaking up components into bite-sized pieces by splitting up by level of abstraction.
Split up by level of abstraction: It’s often a great idea to keep the level of abstraction consistent within the component. Either the component would deal with native DOM elements or framework components. Make sure not to go overboard and create too many components.
Use powerful composition patterns
The patterns like render props, state reducer, provider pattern, and higher-order components are considered as powerful composition patterns. However, these patterns are not always the right tool for the job. Knowing when to use each pattern is important. There are some powerful composition patterns in React vs Vue:
- Compound Components
- Render props and renderles components
- Higher-order components
- State reducer
- Provider pattern
- Controlled/Uncontrolled props
- Component Declaration: Single file component
- Component Composition: Props and Events
Make it easy for styling
It is essential to style your component the way others need it. All you need to make sure is that other developers can easily style and change the layout of your component without restoring to unpleasant CSS. Using renderless components can make this super simple. Renderless components make this super simple. There is a good approach to use BEM (Block Element Modifier) in your component and provide CSS classes that can be overridden.
Great documentation can make the difference
Documentation is an important aspect of writing reusable components. Proper documentation can make the difference as it turns a good component into a great component. It is pivotal to note that don’t let brand new components go wasted because of a lack of proper documentation.
Conclusion
The key to successful writing reusable components in React and Vue is to bear the checklist in mind. Having a condensed checklist of creating reusable components can help you cut down on code duplication and think more carefully about the core interface behaviors.
Top comments (1)
Nice