startWaiting with useEffect hook overrides waiters array

[alexeybondarovitch]

Hi there! Thank you for this awesome library. I experienced a kind of weird behavior while working with this library.

Description if I use method startWaiting in useEffect hook like

useEffect(() => {
   startWaiting('first');
   startWaiting('second');
}, []); 

Result waiters array contains only 'second' waiter, so waiters array is overwritten.

the same issue would be in the example below:

component1:

const Component1 = () => {

 useEffect(() => {
     const fetchData = async () => {
         startWaiting('first');
         const response = await apiCall();
         endWaiting('first');
     }
     fetchData();
 }, []);

return (/*react markup and Wait component inside*/);

component2:

const Component2 = () => {

 useEffect(() => {
     const fetchData = async () => {
         startWaiting('second');
         const response = await anotherApiCall();
         endWaiting('second');
     }
     fetchData(); 
 }, []);

return (/*react markup and Wait component inside*/);

component3:

const Component3 = () => 
(
<Waiter>
   <Component1 />
   <Component2 />
</Waiter>
);

in this case, every time I am trying to receive waiters array it will contain only 'second'.

[isartyukhov]

@alexeybondarovitch I've got the same problem!

For about an hour ago I finally found out the reason, but you've already created the issue. :D

[321ckatz123]

I'm not sure if it's the same issue or not, but using createWaitingContext has the same behavior.

I will say that

  useEffect(() => {
    if (loading && isWaiting(waitKey) === false) {
      startWaiting(waitKey);
    } else if (isWaiting(waitKey) && loading === false) {
      endWaiting(waitKey);
    }
  }, [loading, isWaiting, startWaiting, endWaiting, waitKey]);

has and continues to work for us, so it's possible it's a quirk of having an async function in the useEffect

[mdaffan]

Same issue, Please resolve this

[canozgen9]

Same issue, a bit disappointed

[kaankilic]

Most likely, the function below is causing this issue on api.js.

export const startWaiting = (waiters, waiter) => {
  if (isWaiting(waiters, waiter)) return waiters;
  return [...waiters, waiter];
};