usePromiseTracker - simultaneous multiple calls

[ssukienn]

I have a question. Should usePromiseTracker hook work with simultaneous calls from different places?

I have a scenario where I have Loader component to which I can pass area etc. and render something after promise resolves. But until now, call to the same area hook was happening only from loader component itself. Now I would like to use this hook inside some other component (it is HOC) to check if specific promise is finished (apart from Loader).

So in fact I call the hook in the same time from different places:

1. In Loader
2. In HOC (which in fact is nested under the Loader component, so calls from Loader happens first)

What I observe is that second hook (in HOC) is always returning inProgress as false no matter what. The hook in loader works fine. The component is not rendered until promise resolves but the hoc logic and hooks execution still happens.

Is it something on my end and it is suppossed to work like that or there might be some implementation details of the hook itself which prevent this scenario?

Unfortunately to use case is too complicated to easily reproduce it so for now I am just asking. Right now I am workarounding this with putting tracking info in state store, but would rather avoid it and thought it will work in the first place.

[brauliodiez]

Just going through your case, are you using the hook version in both scenarios? (usePromiseTracker), the HOC version needs some fixing.

I would need a codesanbox with the repro to play with

thanks

[ssukienn]

Thanks for the response.
Yes, I am using just the hook version in both cases. No hoc tracker at all.

I will try to reproduce this in codesandbox in some spare time.

[doiya46]

Hi, i use usePromiseTracker but it will render 4 times in debug:

false "render"
call api
true "render"
true "render"
false "render"

import { useEffect } from "react";
import { trackPromise, usePromiseTracker } from "react-promise-tracker";

const apiGetList = () => {
  return new Promise((resolve) => {
    console.log("call api");
    setTimeout(() => {
      resolve('success');
    }, 4000)
  })
}

const AREA = 'DemoListView';

const trackGetList = () => {
  return trackPromise(
    apiGetList(),
    AREA,
  );
};

export const DemoListView = () => {
  const { promiseInProgress } = usePromiseTracker({ area: AREA, delay: 0 });

  useEffect(() => {
    console.log('cal api');
    trackGetList();
  }, [])

  console.log(promiseInProgress, 'render')
  return (
    <div>
      {
        (promiseInProgress === true) ?
          <h3>Loading....</h3>
          :
          <h3>Loading success!</h3>
      }
    </div>
  )
};

export default DemoListView

[Cristy94]

I have a similar issue, where listening with usePromiseTracker({ area, delay }) multiple times, only correctly updates the state the first time it's used.

So, in my case, I have a spinner that's included 3 times, but one fetch call is made. The first spinner works ok, but for the other 2 the delay is not working and they instantly appear as loading somehow.