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

Beta feedback issue: isLoading and isValidating are changing indefinitely like in a loop in 2.0.0-beta.3 #1974

Closed
mislavmiocevic opened this issue May 16, 2022 · 2 comments · Fixed by #1986

Comments

@mislavmiocevic
Copy link

DISCLAIMER

I am using beta version, and I want to give an early feedback. Probably you will encounter the issue but I wanted to help a bit. Sorry but I do not have a time atm to dig more. Ignore this issue if you do not take bug reports for beta versions.
And thanks for SWR 2 :)

Bug report

Description / Observed Behavior

isLoading and isValidating is updating all the time from true to false and again in a loop even if there is no revalidation or mutation.

Expected Behavior

If there is no mutation or revalidation, isLoading and isValidating props should NOT transition from true to false and again in a loop.

Additional Context

It is working in SWR version: 2.0.0-beta.1
It is NOT working in SWR version: 2.0.0-beta.3

@promer94
Copy link
Collaborator

promer94 commented May 16, 2022

Thanks for reporting.
Would you mind create a repro based on this codesandbox. It would be really helpful !

@mislavmiocevic
Copy link
Author

mislavmiocevic commented May 20, 2022

@promer94 here it is (I also updated the codesandbox example):

import "./styles.css";
import useSWR from "swr";

const fetcher = async (url) => {
  await new Promise((resolve) => {
    setTimeout(() => resolve(true), 2000);
  });

  return "hello";
};

const useDummyData = () => {
  return useSWR("some-key", fetcher);
};

const Child = () => {
  const { data } = useDummyData();

  if (!data) {
    return null;
  }

  return <div>{data}</div>;
};

const Parent = () => {
  const { data, isValidating } = useDummyData();

  console.log('hi');
  
  // if you comment in this block, all is working again
  if (isValidating) {
    return "Loading...";
  }

  return (
    <div>
      <div>{data}</div>
      <Child />
    </div>
  );
};

export default function App() {
  return (
    <div className="App">
      <Parent />
    </div>
  );
}

For some reason, when using swr with the same key in the parent and in the child, and if there is isValidating usage such as return loading state, then the component gets into some loop. It is not behaving like that in v2.0.0-beta.1

swr.2.beta.3.issue.mov

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

Successfully merging a pull request may close this issue.

2 participants