How to Properly Build Components for React or Any Other Library/Framework

The Code Example

By the end of this article, I will show you how to build a simple search application and you can view the full code on my CodePen example page.

Type of Components

Whether you are building components that will be used among many applications or for a single one, there is always the same type of components you can use. It is very important to respect their types and to think about your components beforehand to decide how to split and build them.

  1. View Component
  2. Higher-Order Component
  3. Page Component
  4. Global Component

Display Component

A display component is one that does just that. It displays what it is provided or based on what it is provided. It wastes no time in including complex logic, and for the small logic, it may have, it all has to do with how to display what it was given. It should be kept simple and small, preferably a single thing (an atom). Display components come in 3 main flavors:

Dumb Component

A dumb component is a display component that does not contain any state management. It may set something that helps it in the rendering but its only focus is rendering.

Stateful Component

A display component can contain simple state management related to rendering or user interaction. It is very important to keep it simple. These types of components normally expand on stateless components in order to handle some user interaction logic.

Utility Component

A utility component is a much special display component. You can use it to remove any logic from simpler components. For example, we could create a utility component that handles the field input for the above example so we could use it for other Input Field derived components.

View Component

A view component is a little more elaborated but still should be kept simple and small. View components are a composition of Display components, a container. It combines many smaller components and handles the communication between them. It should not take care of fetching and managing data. They are often stateful and when they are, all states are related to components communication.

Template Component

Template components are more generic view components. Their sole purpose is to render components in a specific fashion, not just about layout and style though. A famous example of a logic template component can be a dialog which can be used to render anything in the container but it always works the same way. You can create a dialog template that you can use to build any specific dialog upon.

Higher-Order Component

Higher-order components are Functions that take a component and returns a new component, perfect for stripping view components from any logic related to fetching and managing data. A common mistake here would overload it with a lot of data handling. Ideal, you should have many higher-order components and make them specific to something. Put all your redux, flux, services, context, and data related logic in them.

Page Component

A page component can be a view component or a collection of many view components in a template that is rendered under a URL path. To put it simply, page components are view components with a URL location.

Global Component

Global components are components that do not need to be included inside any component. They are available globally which means they are included in the App once and are normally tight to some service or global state to control when they show to the user. These components can be triggered into view by any component and at any path.

Building Strategy

Whenever you are building components try to go from a single component to composition by breaking your components down into smaller pieces then use them to compose bigger components.

Optimization and Test of Components

From the examples I provided, notice that the props are simple and easier to memoize which makes it easier to optimize these components for a minimum possible re-render. The components are simple and easy to wrap inside React.memo or use with useMemo for even better performance.

Conclusion

Planning your app UI is crucial to make it work and be maintained easily. I’d say, start with the design or a sketch of what you want. Start creating the smallest components first by breaking the UI into its smallest parts. Then start composing abstracting and splitting logic into utility for feasibility. Any component, small or big, that is meant to be reused should not contain anything that ties it to the App. Move as much logic as possible to HOC and utilities that may or not be specific to the app itself.

Blog & YouTube Channel for Web, UI & Software Development - beforesemicolon.comyoutube.com/c/BeforeSemicolon — Writer: Elson Correia

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store