SWR is a lightweight and performant React Hooks library for remote data fetching, currently at version 2.4.1. It implements the 'stale-while-revalidate' cache invalidation strategy, popularized by HTTP RFC 5861, to provide an always-fresh and responsive user interface. Maintained by Vercel, SWR ensures components receive a continuous stream of data updates automatically. It offers robust features like built-in caching, request deduplication, real-time revalidation on focus/network recovery, polling, pagination, local mutation for optimistic UI, smart error retry, and comprehensive TypeScript support. Its predictable release cadence, with frequent minor updates and patches, ensures ongoing stability and feature enhancements. Key differentiators include its simplicity with a single `useSWR` hook, strong focus on performance and developer experience, and broad support for modern React features like Suspense.
npm install swrVerified import paths — ran on the pinned version, not inferred.
Demonstrates basic data fetching using `useSWR` with a custom `fetcher` function, handling loading and error states for a user profile.
Review the SWR v2 migration guide on the official documentation. Update `isValidating` to `isLoading` for initial load checks. Adjust `mutate` calls to `mutate(key, data, { revalidate: false })` for preventing revalidation.Ensure your project is configured to handle ESM imports, especially for bundlers like Webpack or Rollup. For Node.js, ensure `"type": "module"` in `package.json` or use `.mjs` extensions. If strictly using CommonJS, explicit `require('swr/dist/index.cjs')` might be necessary, though not officially recommended.Ensure `useSWRImmutable` explicitly overrides any global `refreshInterval` via its options: `useSWRImmutable(key, fetcher, { refreshInterval: 0 })`. Version 2.4.0 and later should correctly handle this override, but explicit setting provides clarity and robustness.Immediately upgrade SWR to version 2.3.8 or newer to patch these critical security vulnerabilities. Review any potentially affected deployments for signs of compromise.
Always wrap components using `useSWR` with `suspense: true` in a `<Suspense>` boundary. Remove `if (isLoading)` or `if (!data)` checks as they are not needed; the component will only render once data is available. Handle errors using `error` boundary components.
Change your import statement from `import { useSWR } from 'swr'` to `import useSWR from 'swr'`.Always check for `isLoading` or `error` before accessing `data`. Example: `if (isLoading) return <div>loading...</div>; if (error) return <div>failed to load</div>; return <div>hello {data.name}!</div>`.Ensure your project uses `import` statements for SWR. If using Node.js, confirm `"type": "module"` is set in your `package.json` or use `.mjs` extensions for files importing SWR. Check bundler configuration (e.g., Webpack, Rollup) to correctly resolve ESM modules.
Configure TypeScript by ensuring `"compilerOptions": { "exactOptionalPropertyTypes": true }` is not set to `false` if it conflicts. More practically, if `suspense: true` is used, TypeScript should infer `data` as non-nullable. If it doesn't, ensure your TypeScript version is compatible and explicitly assert type if necessary (e.g., `data!.name`), though this should ideally be avoided.