How to Write Reusable Code in Frontend Development

Reusable code refers to using the same piece of code in similar business scenarios.

It reduces duplicate work and the risk of missing changes when requirements evolve, such as changing the color of a submit button across many pages by updating a single location.

Writing reusable code essentially means identifying and separating the reusable parts.

Typical reusable parts in frontend development include UI presentation, API calls, business processes, shared data, and utility functions.

UI presentation is the visual layer (HTML/CSS) without data fetching or event handling. Component libraries like Ant Design provide display components. An example of a reusable React news list component:

import React from 'react';
import s from './style.scss';
import Item, { IItem } from './item';

export interface INewsListProps {
  list: IItem[];
  onItemClick: (id: number) => void;
}

const NewsList: FC
= ({ list, onItemClick }) => {
  return (
{list.map(item => (
))}
);
};

export default React.memo(NewsList);

API calls can be split into common handling (e.g., request/response interceptors) and specific endpoint functions. Common handling with axios:

// request interceptor
axios.interceptors.request.use(...);
// response interceptor
axios.interceptors.response.use(...);

Specific endpoint functions are usually placed in a service file:

export const fetchList = ...;
export const fetchDetail = ...;
export const createItem = ...;
export const updateItem = ...;
export const deleteItem = ...;

Business processes such as a typical admin list page (fetch list on page entry, fetch on search, paginate) can be encapsulated in a custom hook. An example using Vue 3 composition API:

import { onMounted, reactive, ref, Ref } from 'vue';

export interface Params {
  url: string;
  searchConditions: Record
;
}

interface Return
{
  searchConditions: Record
;
  resetConditions: () => void;
  pagination: Record
;
  fetchList: (isReset: boolean) => void;
  list: Ref
;
  isLoading: Ref
;
}

function useList
>({ url, searchConditions: initCondition }: Params): Return
{
  const searchConditions = reactive({ ...initCondition });
  const pagination = reactive({ pageSize: 10 });
  const list = ref
([]) as Ref
;
  const isLoading = ref(false) as Ref
;

  // fetchList implementation ...
  // onMounted fetchList
  onMounted(() => {
    fetchList();
  });

  return { searchConditions, pagination, fetchList, list, isLoading };
}

export default useList;

Shared data such as user info or permissions can be managed with state‑management libraries (Redux, MobX, Context API for React; Vuex for Vue).

Utility functions are business‑agnostic helpers like date formatting or ID generation, often provided by libraries such as Lodash or moment.js.

In summary, writing reusable frontend code means recognizing and extracting reusable parts from UI, API, business logic, data, and utilities; the next level of code quality is refactorable code, which will be covered in a future article.