React 应用程序使用自定义 useRequest 钩子不断重新渲染

Question

In my application I created a custom hook to make API requests:

const useRequest = (promise) => {
  const [data, setData] = useState({});
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState({});
  useEffect(() => {
    let ignore = false;
    const fetchProduct = async () => {
      try {
        setLoading(true);
        const response = await promise;
        if (!ignore) setData(response);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };
    fetchProduct();
    return () => {
      ignore = true;
    };
  }, [promise]);
  return { data, loading, error };
};
export default useRequest;

And in my component I use it as:

const { data, loading, error } = useRequest(api.user.getAll());

where api.user.getAll() is a function that returns a promise. The component renders and it displays the data however it keeps re-rendering and refetching data multiple times. What might be the problem that is causing this? Are there multiple instances of promises being created that trigger the hook to run again?

Answer 1

where api.user.getAll() is a function that returns a promise. [...] Are there multiple instances of promises being created that trigger the hook to run again?

Yes, every time your component gets rendered, it calls api.user.getAll() . Since new Promise (or an async function) will always return a fresh Promise object (and hook deps use strict equality for comparison), the effect is re-run.

My go-to hammer for requests like this these days is swr ; maybe look into it?