[RFC] Draft State

[sergiodxa]

Background

Right now, when a revalidation happens the data is updated right away, most of the time this is the desired behavior, specially when navigating to another page where we already have the cached data and the use didn't have time to interact with the new page.

However, when doing interval revalidation of if the user had already interacted somehow with the page, a sudden change in the data could be a worst UX.

Possible Solution

A possible solution with current API is to keep the data in a state after the first request and use the SWR data as a "draft" version, we can now detect if the current and draft are different and tell the user the data is stale and let the user decide when to revalidate.

Suggested Solution

Add a flag to useSWR to enable a draft mode (another name works, I'm not sure if this is the best name). When enabled useSWR will return a boolean to let the component know the cached data changed and a function to apply this change. Note the cached data will be updated immediately, this will only affect the internal state of the hook.

const { data, isStale, apply } = useSWR("/api/timeline", fetcher, { draft: true });

[youjingwong]

Could this be implemented using a combination of isValidating and useEffect?

const { data, isValidating } = useSWR('/api/timeline', fetcher)

useEffect(() => {
    if (!isValidating && shouldSetState) {
      setState(data)
    }
  }, [isValidating])