React useEffect has a spread element in its dependency array

Question

I'm trying to build a custom hook that will handle loading and error behavior of an async call.

I'd like to use it like so :

const { loading, error} = useFetch(fetchUser, id)

or

const {loading, error } = useFetch(updateUserName, id, name)

I have something that look like this so far :

function useFetch(fetchFn, ...params) {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);

  useEffect(() => {
    fetchFn(...params)
      .then(() => {
        setLoading(false);
      })
      .catch(() => {
        setError(true);
      });
  }, [...params, fetchFn]);

  return { loading, error };
}

I'm having trouble with the useFetch(fetchFn, ...params) since a new params array is created on every call. So I cannot use it in the dependency array. But i can't use spread operator.

Is it possible to achieve what i'm trying to do ?

Answer 1

EDIT: I now use react-query and my life is simpler

I managed to have the wanted behavior :

function useFetch(fetchFn, ...params) {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);

  useEffect(() => {
    fetchFn(...params)
      .then(() => {
        setLoading(false);
      })
      .catch(() => {
        setError(true);
      });
  }, params);

  return { loading, error };
}

I simply pass the params as the dependency array. Of course eslint isn't happy but we can simply disable it. I believe this implementation is correct.

Please feel free to share your opinions, i'm really interested on your feedbacks