How Hook-Based Request Libraries Simplify Data Fetching in Modern Frontend Apps

Network requests have always been a core part of frontend applications. From jQuery's Ajax wrapper to modern libraries like axios, request handling has evolved rapidly, and with the advent of hooks, a new era has begun.

Simpler Request Handling

Modern request libraries encapsulate loading state within hooks, exposing only data, error, and a loading indicator. For example:

const { data, error, loading } = useRequest(fetcher);

const { data, error, isValidating } = useSwr('/getList', fetcher);

Simpler Caching: cacheKey Mechanism

By using a cacheKey, libraries can read cached data before fetching fresh data, improving user experience in weak network conditions. Example:

const { data, error, loading } = useRequest(getList, { cacheKey: 'list' });

const { data, error, isValidating } = useSwr('/getList', TodoService);

Cache-Based Pagination Preloading

Since the request path serves as the cache key, a hidden DOM can request the next page in advance, enabling instant page transitions.

Simpler Updating: Refetching Mechanism

In 2021, network speed is less of a bottleneck, allowing request libraries to support focused refetching, periodic refetching, and reconnection refetching, which benefit real‑time data‑sensitive applications.

Simpler Editing: mutate Mechanism

Using mutate, developers can optimistically update local data, send it to the server, and later verify the result, providing smooth editing even on slow networks.

const { data, error, isValidating } = useSwr('/getList', TodoService);
return (
  <div>
    {isValidating && <span className="spin" />}
    {data}
    {error}
    <button onClick={() => { mutate('/getList', 'local edit', false); }}>mutate</button>
  </div>
);

Differences Between react-query, useRequest, and SWR

All three libraries implement similar features, but their design philosophies differ. react-query offers fine‑grained customization (e.g., focus‑based refetching), while SWR provides a simple, elegant API, and useRequest aligns closely with Ant Design components and offers a manual trigger mode.

focusManager.setEventListener(handleFocus => { /* ... */ });

const {} = useSWR('/getList', { revalidateOnFocus: false });

react-query also exposes detailed request states (e.g., isLoading, isError), whereas useRequest keeps the API straightforward.

const { data, loading, pagination } = useRequest(({ current, pageSize }) => getUserList({ current, pageSize }), { paginated: true });
<Pagination {...pagination} />;

Why Hooks?

Hooks were designed to encapsulate reusable logic, overcoming the limitations of mixins and HOCs in class components. This makes request handling libraries more powerful and easier to integrate.

One More Thing… Modern Hook Model

After the rise of front‑back separation, the next frontier for frontend developers is enhancing user experience. Hook‑based request libraries enable independent web apps with caching, silent requests, and reduced full‑page reloads, making network latency virtually invisible.