在写业务的过程中，我们总是会遇到这样的需求，在请求时显示一个 loading，然后请求结束后展示数据。以一个是不是 vip 的场景为例，如果不加入 loading 状态，页面可能在未请求的时候显示非 vip，数据请求完成之后，发现是 vip，再改成 vip。这样无疑体验较差，但是我们又不希望一直使用 useState 来声明 loading 状态，这无疑是乏味的：
const [loading, setLoading] = useState(false); ...所以，不如使用 hooks 来封装这部分逻辑，来实现一个 useLoading hook。
在写这个 hook 之前，我们要先理清楚这个 hook 的入参和出参。我们希望这个 hook 有这样的效果，我们传入一个请求的函数，得到这个函数是否在 loading，以及一个包装后的请求函数。代码如下：
const [isLoading, wrappedAjax] = useLoading(ajax); 实现直接上代码：
import { useState, useCallback } from "react"; export default function useLoading(req) { const [loading, setLoading] = useState(false); const wrapReq = useCallback( (...args) => { setLoading(true); return req(...args).then((data) => { setLoading(false); return Promise.resolve(data); }); }, [req] ); return [loading, wrapReq]; }代码也很简单，就是对原先的 api 请求进行了包装，在调用前，设置 loading 为 true，拿到数据之后，设置 loading 为 false。调用方式如下：
const [loading, req] = useLoading(checkVip); useEffect(() => { req().then(({ vip }) => { console.log(vip); setVip(vip); }).catch((err) => alert(err)); }, [req]);下面是一个简单的 demo（没看到效果请点击刷新按钮）。可以看到，当不设置 loading 状态的时候，页面是由 no vip 跳到 vip 的，体验是比较差的。
why not React Query当我们只是需要一个 loading 状态，而又不想写重复的 useState 来管理 loading 状态时，上面这个小 hook 就显得更轻量了。但是如果需要一整套完整的解决方案，使用 React Query 则是更好的选择。(本文完)