Highlights

Preload API (#2026)

SWR now has a preload API that you can call programmatically to kick off the request early. For example, you can do preload('/api/user', fetcher) even outside of React:

import { useState } from 'react'
import useSWR, { preload } from 'swr'

const fetcher = (url) => fetch(url).then((res) => res.json())

// Preload the resource before rendering the User component below,
// this prevents potential waterfalls in your application.
// You can also start preloading when hovering the button or link, too.
preload('/api/user', fetcher)

function User() {
  const { data } = useSWR('/api/user', fetcher)
  ...
}

export default function App() {
  const [show, setShow] = useState(false)
  return (
    <div>
      <button onClick={() => setShow(true)}>Show User</button>
      {show ? <User /> : null}
    </div>
  )
}

So at the moment of clicking the button and actually rendering the User component, the resource is likely loaded already. If the request depends on some props or states, you can also preload it when hovering the button:

function App({ userId }) {
  const [show, setShow] = useState(false)
  return (
    <div>
      <button
        onClick={() => setShow(true)}
        onHover={() => preload('/api/user?id=' + userId, fetcher)}
      >
        Show User
      </button>
      {show ? <User /> : null}
    </div>
  )
}

Demo: https://codesandbox.io/s/swr-preloading-14bikv?file=/src/App.js

Function as SWRConfig value (#2024)

A new way to extend the SWR global configuration:

<SWRConfig value={{ revalidateOnFocus: false, dedupingInterval: 5000 }}>
  <div>
    <Header/>
    <SWRConfig value={config => ({ ...config, dedupingInterval: 1000 })}>
      <Main />
    </SWRConfig>
  </div>
</SWRConfig>

Where you can inherit the parent configuration and override the dedupingInterval value, but reuse the other options.

Breakings

SWRConfig.default → SWRConfig.defaultValue (#2023)

This is a currently undocumented API, but planned to go stable with the 2.0 release. You can access to SWR’s default options via the SWRConfig.defaultValue static and read-only property.

What's Changed

• breaking: Rename SWRConfig.default to SWRConfig.defaultValue by @huozhi in #2023
• feat: Add preload function by @koba04 in #2026
• feat: Support function as context config by @huozhi in #2024
• fix: Should always reset to the original data after mutating with optimistic data by @shuding in #1982
• fix: Should only update cache when actually start new request by @promer94 in #1986
• fix: useSWRMutation - clear error after successful trigger (#1973) by @anirudh1713 in #1995
• chore: Adding debounce for autocomplete-suggestions example by @Walkeryr in #2017
• chore: Remove useless ref copy by @promer94 in #1981
• chore: Switch to pnpm and turborepo by @promer94 in #1983
• test: Add test cases for mutate by @shuding in #1976
• chore: Save some bytes by @promer94 in #1991
• chore: getSWRCacahe -> getSWRCache by @sdornan in #2000
• chore: Do not abort on watch mode when ts erroring by @huozhi in #1992
• chore: Add engine field to limit pnpm version by @huozhi in #1990
• test: Add test case for #1974 by @promer94 in #2005
• test: Add test cases for mutate by @shuding in #1976
• test: Fix all act warnings by @koba04 in #2031

New Contributors

• @sdornan made their first contribution in #2000
• @Walkeryr made their first contribution in #2017

Full Changelog: 2.0.0-beta.3...2.0.0-beta.4