Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

startWaiting with useEffect hook overrides waiters array #13

Open
alexeybondarovitch opened this issue Mar 4, 2020 · 5 comments
Open

Comments

@alexeybondarovitch
Copy link

alexeybondarovitch commented Mar 4, 2020

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
Copy link

@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
Copy link

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
Copy link

mdaffan commented Aug 11, 2020

Same issue, Please resolve this

@canozgen9
Copy link

Same issue, a bit disappointed

@kaankilic
Copy link

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];
};

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants