TanStack•3y ago•

3 replies

sad-indigo

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

react-query@v4

, but now I see that

isLoading

isLoading

has been changed to

isPending

isPending

, but I don't know if I should change these

isLoading

isLoading

isPending

isPending

or just leave it as is since I still have that

isLoading

isLoading

flag that combines 2 statuses.

TL;DR: I'm having troubles understanding when and why to use

isPending

isPending

versus

isLoading

isLoading

TanStack•3y ago•

3 replies

sad-indigo

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

react-query@v4

, but now I see that

isLoading

isLoading

has been changed to

isPending

isPending

, but I don't know if I should change these

isLoading

isLoading

isPending

isPending

or just leave it as is since I still have that

isLoading

isLoading

flag that combines 2 statuses.

TL;DR: I'm having troubles understanding when and why to use

isPending

isPending

versus

isLoading

isLoading

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

Similar Threads

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

Similar Threads

Similar Threads

Similar Threads