correct-apricot

Difference isPending and the isLoading(isFetching && isPending ) in react-query @v5

Many times around my app I do something like this

  const {
    data: userInfoData,
    isLoading: isUserInfoLoading,
    error: isUserInfoError,
  } = useUserInfo();


  if (isLoading || isUserInfoLoading) {
    return (
      <Loading
        text={t(
          'features.bezwaarschrift-aanmaken.components.bezwaarschriftFormulier.laden.bezig',
        )}
        height="20rem"
        appearance="spinner"
      />
    );
  }

  const {
    data: userInfoData,
    isLoading: isUserInfoLoading,
    error: isUserInfoError,
  } = useUserInfo();


  if (isLoading || isUserInfoLoading) {
    return (
      <Loading
        text={t(
          'features.bezwaarschrift-aanmaken.components.bezwaarschriftFormulier.laden.bezig',
        )}
        height="20rem"
        appearance="spinner"
      />
    );
  }

this was when I was using react-query@v4, but now I see that isLoading has been changed to isPending, but I don't know if I should change these isLoading to isPending or just leave it as is since I still have that isLoading flag that combines 2 statuses. TL;DR: I'm having troubles understanding when and why to use isPending versus isLoading?

2 Replies

automatic-azure•2y ago

isPending is fine for most use cases isLoading is needed when a query is potentially not enabled

correct-apricotOP•2y ago

great, thanks

Gaming

Programming

Difference isPending and the isLoading(isFetching && isPending ) in react-query @v5

Did you find this page helpful?