Why SWR is not refetching data after remounting component?

[skorphil]

Hi, i'm struggling to understand how SWR works after all. Let's start with overview what I have:
Parent.jsx - component with button. When I press button, the <Children /> component is mounted

export function Parent() {
  const [mountCounter, setMountCounter] = useState(0);
  const [mountedChild, setMountedChild] = useState(false);

const closeTest = () => {
    setMountedChild(false);
  };

  const openTest = () => {
    setMountedChild(true);
  };

  let childComponent = mountedChild ? <Child unmountSelf={closeTest} /> : "";
  return (
    <>
      <button onClick={openTest}>Open Child</button>
      <div>---</div>
      {childComponent}
    </>
  );
}

Child.jsx - component with has to fetch data from API. Also it can be closed with a button, which use method from Parent.jsx

  export function Child({ unmountSelf }) {
  const [mountCounter, setMountCounter] = useState(0);
  
  let { data, error, isLoading } = useSWR(
    `https://cdn.jsdelivr.net/gh/fawazahmed0/currency-api@1/latest/currencies.json`,
    fetcher,
    {
      revalidateOnFocus: false,
      revalidateIfStale: true,
      revalidateOnMount: true,
      onSuccess: (data) => {
      },
    },
  );

  if (isLoading) {
    return <div>Loading</div>;
  }

  let contextValue = data.usd;

  return (
    <>
      <TestContext.Provider value={contextValue}>
        <div>{contextValue}</div>
        <button onClick={unmountSelf}>Close Child</button>
      </TestContext.Provider>
    </>
  );
}

const fetcher = (...args) => fetch(...args).then((res) => res.json());

Well, when I first click button, so Child being mounted for the first time, everything is working as expected:

1. SWR is fetching data
2. SWR isLoading == true
3. After success the onSuccess code is executed
   ...

• Finally, Child component get to return statement and returned fetched content

But, if I close (press button) and open child component again, the behavior becomes very illogical:

1. The component immediately get to return statement without fetching
2. useSwr never returns isLoading state
   ...

• At the end onSuccess SWR code is executed

You can play with this stuff here - Codesandbox (Console output worked for me only if open preview in separated tab)

Can someone explain me why swr not refetching normally?

[sshellmann]

Late response and I'm just making a guess since I'm not an expert with SWR but I would assume that it's just returning the cached value. If you need it to get a new value each time, you can look at someone with a similar problem here:

#456 (reply in thread)