Write Better Frontend Components with This Tip

Nov 14 2019 | By Taha Shashtari

Components are the basic building blocks used in modern frontend frameworks like React, Vue, and Svelte. Well-written components can improve the overall structure of your app and make it clean and maintainable.

It's likely that you've heard about the presentational and container components pattern. In some cases, this might be a helpful pattern to use — but not always. I've used this pattern throughout a complex project and I've ended up with a lot of boiler-platy components.

After writing lots of components and building complex frontend applications, I realized that we have only two types of components: UI general-purpose components and app-specific components.

Understanding what they are for and how to write them will help you design better components and ultimately better application architecture.

UI general-purpose components

They are pure UI components that are not made for a specific application. They are used for general UI elements like multi-select inputs, modal boxes, pagination links, etc.

So these components:

So UI libraries like Vuetify and Material-UI are considered UI general-purpose components.

App-specific components

They are components that you implement specifically for your app, and it doesn't make sense to use them somewhere else.

These components:

A good example is a form component. This component will only work inside your app. It can render its fields based on the state of your app, submit its data directly with an AJAX request, and be reused when updating the data instead of creating it.

So the key to writing better components is to not confuse the two component types. For example, you don't have to create a single component called Form and reuse it for all forms in your app. Instead create as many form components (with specific fields) as you need.