SWR state has undocumented and unexpected values on key change

[TmanTman]

Bug report

Description / Observed Behavior

Consider the following values during a key change:

const { data, isLoading } = useSWRImmutable(someKey)

If "someKey" changes, the "data" variable can go undefined before "isLoading" goes to true. This is the state progression:

someKey	data	isLoading	Notes
'a'	defined	false
'b'	undefined	false	unexpected
'b'	undefined	true
'b'	defined	false

This behaviour is not expected, and not documented on SWR under "key change + previous data" docs

A use cases that breaks here is, for example, if a useEffect looks at these variables and if someKey leads to undefined results, makes update to state

Expected Behavior

The following state progression:

someKey	data	isLoading
'a'	defined	false
'b'	undefined	true
'b'	defined	false

Repro Steps / Code Example

Here is a link to a StackBlitz. The console shows this state.

Additional Context

SWR version: Previous versions + Latest

[kawaaaas]

Hello,
I'm a big fan of SWR and use it regularly. I'd like to express my gratitude to the maintainers, contributors, and those who open issues.

Problem

I've encountered the same issue myself. This problem occurs when revalidateIfStale = false is set, which has been previously reported in other issues.
#2930

Proposed Solution

Here's my proposal for fixing this:
Modify the getSnapshot() logic to add an edge case handling for revalidateIfStale:

const getSnapshot = useMemo(() => {
    const shouldStartRequest = (() => {
      if (!key) return false
      if (!fetcher) return false
      // If `revalidateOnMount` is set, we take the value directly.
      if (!isUndefined(revalidateOnMount)) return revalidateOnMount
      // If it's paused, we skip revalidation.
      if (getConfig().isPaused()) return false
      return !suspense
    })()
    
    // Get the cache and merge it with expected states.
    const getSelectedCache = (state: ReturnType<typeof getCache>) => {
      // We only select the needed fields from the state.
      const snapshot = mergeObjects(state)
      delete snapshot._k
      
      if (!shouldStartRequest) {
        return snapshot
      }
      
　  // Added condition to handle revalidateIfStale=false edge case
      if (!(revalidateIfStale !== false)) {
        if (isUndefined(snapshot.data) && isUndefined(fallbackData)) {
          return {
            isValidating: true,
            isLoading: true,
            ...snapshot
          }
        } else {
          return snapshot
        }
      }
      
      return {
        isValidating: true,
        isLoading: true,
        ...snapshot
      }
    }
    // Rest of the code remains unchanged

Verification

I've verified that all tests pass, it returns true when there's no data, and the issue is resolved.
Would it be appropriate for me to create a PR with this approach? Please let me know if there are any requirements I haven't addressed in this solution.
Also, if this issue reflects the intended behavior, please close this and same issue.

[kaoths]

I ran into the same problem where there is a slight gap between isLoading set to true when the new key is introduced.
During the gap, my code thinks the data is valid and act accordingly. Causing unexpected result for me.

I think @kawaaaas solution works.

I roughly read through the code
I guess this behavior is caused by getSnapshot() memo, which I believe executed in render phase, return newly created snapshot when a new key is introduced.
Which initially has { data: undefined, isLoading: false }

Then, the key changed useIsomorphicLayoutEffect() executed and triggers another render, setting { isLoading: true }.

I'm not sure if I understand it correctly. I'd appreciated any thorough explanation.