reavalidateOnMount and revalidateIfStale

[burnoo]

Hi, I am working on Jetpack Compose version of this library. Currently I am trying to adapt 1.0.0 changes to my current work.

I am a bit confused about adding revalidateIfStale and not depracating reavalidateOnMount (it was depracated for a while but then depracation was removed in #1374)

Currently I think it is not clear how this both parameters works together. Also - there is no information in docs if previous reavalidateOnMount = (fallbackData != null) is still valid.

// How would that work? It's confusing
useSWR(key, fetcher, {
  revalidateIfStale: false,
  revalidateOnMount: true
})

In my library I'm thinking about removing revalidateOn... and refreshWhen... parameters and replace it with shouldRevalidate: () -> Boolean, shouldRefresh: () -> Boolean. I am planning to make library multiplatform and I don't want to implement refreshWhenHidden or revalidateOnFocus as its logic differs on different platforms.

[shuding]

The revalidateOnMount option (default to undefined) is used to force override the SWR revalidation behavior on mounting. The new revalidateIfStale (default to true) means if SWR should revalidate on mounting if the cache exists.

So basically it works like this:

1. A SWR hook mounts
2. Is recalidateOnMount defined? Start request if it’s true, stop if false.
3. Is there existing cache? If there isn’t, start the request.
4. Is revalidateIfStale true? If it is, start the request.

[nandorojo]

Thanks for this explanation!

To clarify, revalidateIfStale: false only refetches if there's no data in the cache, right?

[shuding]

Yeah, but it only controls the "mount" behavior (so it still revalidates on focus, which is controlled by another option).

[burnoo]

Thanks! It would be great to include this in docs

[shuding]

Will add it to the docs, thanks!

[dorgamliel1]

Just adding here that it might not have been included in the documentation. A clearer documentation would be greatly appreciated. Thanks!

[koba04]

@dorgamliel1 Is this document not enough for it?
https://swr.vercel.app/docs/revalidation#revalidate-on-mount

[marmotgary]

Not sure what it is, but the explanation above to me is much more clear than what is currently in the docs.

[PaulMJL]

yes the documentation specifies that revalidateOnMount defaults to undefined, but then doesn't explain what the behaviour is when it's set to undefined. the explanation above is better than what's in the docs.

[yinsang]

revalidateOnMount:undefined,
revalidateIfStale:false,
dedupingInterval:0,

request while component mount at the first time, then cache data, not request anymore whether cache is stale or not.

revalidateOnMount:undefined,
revalidateIfStale:true,
dedupingInterval:0,

request while component is mounted at the first time and cache.

1. http cache is not stale, mounted goes no request.
2. http cache is stale, mounted goes request.

revalidateOnMount:true,
revalidateIfStale:false / undefined /true,
dedupingInterval:0,

always request when component is mounted

revalidateOnMount:false,
revalidateIfStale:false / undefined /true,
dedupingInterval:0,

not request. Maybe you can use SSR fallback immutable data?

have a try

import React,{useState} from "react";
import useSWR from "swr";
export const Inner = () => {

  const fetcher = (url) => fetch(url).then((res) => res.json());
  
 const {error, isLoading, data, isValidating, mutate}  = useSWR(`https://dog.ceo/api/breeds/image/random`, fetcher,{

  revalidateOnMount:false,
  revalidateIfStale:true,
  dedupingInterval:0,
 })
 return <>
 123
 {data?.msg}</>
  
}
export default function App() {
  const [display, setDisplay] = useState(true)
  const handleClick = () => {
    setDisplay(e=>!e)
  }
  return (
    <div>
      <button onClick = {handleClick}>display block or none</button>

      {
        display &&
        <Inner/>
      }
    </div>
  );
}

[sb007ty]

Super helpful. Thanks!