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鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

First render after key changes has isLoading == false #81

Open
smackfu opened this issue Jun 9, 2023 · 1 comment
Open

First render after key changes has isLoading == false #81

smackfu opened this issue Jun 9, 2023 · 1 comment

Comments

@smackfu
Copy link
Member

smackfu commented Jun 9, 2023

馃悶 Bug Report

Describe the bug

On the initial render of a component using fetchye, the returned values are:

{data: undefined, error: undefined, isLoading: true}

Then when the data finishes loading, it changes to:

{data: {鈥, error: undefined, isLoading: false}

When the fetchye key (for instance the body of the request) changes, you would expect the state to change back to loading. But instead the first render is this:

{data: undefined, error: undefined, isLoading: false}

This makes it difficult to write any code that is dependent on isLoading to render a loading indicator.

To Reproduce

Example code:

  const [id, setId] = useState(1);
  useEffect(() => {
    setTimeout(() => setId(2), 1000);
  });

  const { data, error, isLoading } = useFetchye(id);
  console.log({ data, error, isLoading });
  return <div>test</div>;

Prints this to console:

{data: undefined, error: undefined, isLoading: true}
{data: undefined, error: undefined, isLoading: true}
{data: {鈥, error: undefined, isLoading: false}
{data: undefined, error: undefined, isLoading: false} <====
{data: undefined, error: undefined, isLoading: true}
{data: undefined, error: undefined, isLoading: true}
{data: {鈥, error: undefined, isLoading: false}
{data: {鈥, error: undefined, isLoading: false}

Expected behavior

isLoading should be true after the key changes.

@smackfu
Copy link
Member Author

smackfu commented Jun 9, 2023

The root cause seems to be due to this line:
https://github.com/americanexpress/fetchye/blob/main/packages/fetchye/src/queryHelpers.js#L21

This has special handling for render count == 1. But the render count is not reset when the key changes, so this logic is not used later, even though it's the same case as the first render.

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

1 participant