Merge branch 'master' into patch-1

Author: jakubriedl

package.json

@@ -1,6 +1,6 @@
 {
   "name": "swr",
-  "version": "0.5.1",
+  "version": "0.5.3",
   "description": "React Hooks library for remote data fetching",
   "main": "./dist/index.js",
   "module": "./esm/index.js",

src/cache.ts

@@ -2,42 +2,42 @@ import { Cache as CacheType, Key, CacheListener } from './types'
 import hash from './libs/hash'
 
 export default class Cache implements CacheType {
-  private __cache: Map<string, any>
-  private __listeners: CacheListener[]
+  private cache: Map<string, any>
+  private subs: CacheListener[]
 
   constructor(initialData: any = {}) {
-    this.__cache = new Map(Object.entries(initialData))
-    this.__listeners = []
+    this.cache = new Map(Object.entries(initialData))
+    this.subs = []
   }
 
   get(key: Key): any {
     const [_key] = this.serializeKey(key)
-    return this.__cache.get(_key)
+    return this.cache.get(_key)
   }
 
   set(key: Key, value: any): any {
     const [_key] = this.serializeKey(key)
-    this.__cache.set(_key, value)
+    this.cache.set(_key, value)
     this.notify()
   }
 
   keys() {
-    return Array.from(this.__cache.keys())
+    return Array.from(this.cache.keys())
   }
 
   has(key: Key) {
     const [_key] = this.serializeKey(key)
-    return this.__cache.has(_key)
+    return this.cache.has(_key)
   }
 
   clear() {
-    this.__cache.clear()
+    this.cache.clear()
     this.notify()
   }
 
   delete(key: Key) {
     const [_key] = this.serializeKey(key)
-    this.__cache.delete(_key)
+    this.cache.delete(_key)
     this.notify()
   }
 
@@ -74,22 +74,22 @@ export default class Cache implements CacheType {
     }
 
     let isSubscribed = true
-    this.__listeners.push(listener)
+    this.subs.push(listener)
 
     return () => {
       if (!isSubscribed) return
       isSubscribed = false
-      const index = this.__listeners.indexOf(listener)
+      const index = this.subs.indexOf(listener)
       if (index > -1) {
-        this.__listeners[index] = this.__listeners[this.__listeners.length - 1]
-        this.__listeners.length--
+        this.subs[index] = this.subs[this.subs.length - 1]
+        this.subs.length--
       }
     }
   }
 
   // Notify Cache subscribers about a change in the cache
   private notify() {
-    for (let listener of this.__listeners) {
+    for (let listener of this.subs) {
       listener()
     }
   }

src/env.ts

@@ -0,0 +1,16 @@
+import { useEffect, useLayoutEffect } from 'react'
+
+export const IS_SERVER =
+  typeof window === 'undefined' ||
+  // @ts-ignore
+  !!(typeof Deno !== 'undefined' && Deno && Deno.version && Deno.version.deno)
+
+// polyfill for requestAnimationFrame
+export const rAF = IS_SERVER
+  ? null
+  : window['requestAnimationFrame'] || (f => setTimeout(f, 1))
+
+// React currently throws a warning when using useLayoutEffect on the server.
+// To get around it, we can conditionally useEffect on the server (no-op) and
+// useLayoutEffect in the browser.
+export const useIsomorphicLayoutEffect = IS_SERVER ? useEffect : useLayoutEffect

src/use-swr-infinite.ts

@@ -1,7 +1,8 @@
 // TODO: use @ts-expect-error
-import { useContext, useRef, useState, useEffect, useCallback } from 'react'
+import { useContext, useRef, useState, useCallback } from 'react'
 
 import defaultConfig, { cache } from './config'
+import { useIsomorphicLayoutEffect } from './env'
 import SWRConfigContext from './swr-config-context'
 import useSWR from './use-swr'
 
@@ -68,34 +69,40 @@ function useSWRInfinite<Data = any, Error = any>(
     // not ready
   }
 
-  const [, rerender] = useState<boolean>(false)
+  const rerender = useState({})[1]
 
   // we use cache to pass extra info (context) to fetcher so it can be globally shared
   // here we get the key of the fetcher context cache
   let contextCacheKey: string | null = null
   if (firstPageKey) {
-    contextCacheKey = 'context@' + firstPageKey
+    contextCacheKey = 'ctx@' + firstPageKey
   }
 
-  // page count is cached as well, so when navigating the list can be restored
-  let pageCountCacheKey: string | null = null
-  let cachedPageSize
+  // page size is also cached to share the page data between hooks having the same key
+  let pageSizeCacheKey: string | null = null
   if (firstPageKey) {
-    pageCountCacheKey = 'size@' + firstPageKey
-    cachedPageSize = cache.get(pageCountCacheKey)
+    pageSizeCacheKey = 'len@' + firstPageKey
   }
-  const pageCountRef = useRef<number>(cachedPageSize || initialSize)
   const didMountRef = useRef<boolean>(false)
 
+  const resolvePageSize = useCallback((): number => {
+    const cachedPageSize = cache.get(pageSizeCacheKey)
+    return typeof cachedPageSize !== 'undefined' ? cachedPageSize : initialSize
+  }, [pageSizeCacheKey, initialSize])
+  // keep the last page size to restore it with the persistSize option
+  const lastPageSizeRef = useRef<number>(resolvePageSize())
+
   // every time the key changes, we reset the page size if it's not persisted
-  useEffect(() => {
-    if (didMountRef.current) {
-      if (!persistSize) {
-        pageCountRef.current = initialSize
-      }
-    } else {
+  useIsomorphicLayoutEffect(() => {
+    if (!didMountRef.current) {
       didMountRef.current = true
+      return
     }
+    // If the key has been changed, we keep the current page size if persistSize is enabled
+    cache.set(
+      pageSizeCacheKey,
+      persistSize ? lastPageSizeRef.current : initialSize
+    )
     // initialSize isn't allowed to change during the lifecycle
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [firstPageKey])
@@ -105,16 +112,17 @@ function useSWRInfinite<Data = any, Error = any>(
 
   // actual swr of all pages
   const swr = useSWR<Data[], Error>(
-    firstPageKey ? ['many', firstPageKey] : null,
+    firstPageKey ? ['inf', firstPageKey] : null,
     async () => {
       // get the revalidate context
-      const { originalData, force } = cache.get(contextCacheKey) || {}
+      const { data: originalData, force } = cache.get(contextCacheKey) || {}
 
       // return an array of page data
       const data: Data[] = []
 
+      const pageSize = resolvePageSize()
       let previousPageData = null
-      for (let i = 0; i < pageCountRef.current; ++i) {
+      for (let i = 0; i < pageSize; ++i) {
         const [pageKey, pageArgs] = cache.serializeKey(
           getKey(i, previousPageData)
         )
@@ -165,7 +173,7 @@ function useSWRInfinite<Data = any, Error = any>(
   )
 
   // update dataRef
-  useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     dataRef.current = swr.data
   }, [swr.data])
 
@@ -174,7 +182,7 @@ function useSWRInfinite<Data = any, Error = any>(
       if (shouldRevalidate && typeof data !== 'undefined') {
         // we only revalidate the pages that are changed
         const originalData = dataRef.current
-        cache.set(contextCacheKey, { originalData, force: false })
+        cache.set(contextCacheKey, { data: originalData, force: false })
       } else if (shouldRevalidate) {
         // calling `mutate()`, we revalidate all pages
         cache.set(contextCacheKey, { force: true })
@@ -188,23 +196,26 @@ function useSWRInfinite<Data = any, Error = any>(
   )
 
   // extend the SWR API
-  const size = pageCountRef.current
   const setSize = useCallback(
-    arg => {
+    (arg: number | ((size: number) => number)) => {
+      let size
       if (typeof arg === 'function') {
-        pageCountRef.current = arg(pageCountRef.current)
+        size = arg(resolvePageSize())
       } else if (typeof arg === 'number') {
-        pageCountRef.current = arg
+        size = arg
+      }
+      if (typeof size === 'number') {
+        cache.set(pageSizeCacheKey, size)
+        lastPageSizeRef.current = size
       }
-      cache.set(pageCountCacheKey, pageCountRef.current)
-      rerender(v => !v)
+      rerender({})
       return mutate(v => v)
     },
-    [mutate, pageCountCacheKey]
+    [pageSizeCacheKey, resolvePageSize, mutate]
   )
 
   // Use getter functions to avoid unnecessary re-renders caused by triggering all the getters of the returned swr object
-  const swrInfinite = { size, setSize, mutate }
+  const swrInfinite = { size: resolvePageSize(), setSize, mutate }
   Object.defineProperties(swrInfinite, {
     error: {
       get: () => swr.error,

src/use-swr.ts

@@ -2,15 +2,14 @@
 import {
   useCallback,
   useContext,
-  useEffect,
-  useLayoutEffect,
   useState,
   useRef,
   useMemo,
   useDebugValue
 } from 'react'
 
 import defaultConfig, { cache } from './config'
+import { IS_SERVER, rAF, useIsomorphicLayoutEffect } from './env'
 import SWRConfigContext from './swr-config-context'
 import {
   Action,
@@ -25,21 +24,6 @@ import {
   SWRConfiguration
 } from './types'
 
-const IS_SERVER =
-  typeof window === 'undefined' ||
-  // @ts-ignore
-  !!(typeof Deno !== 'undefined' && Deno && Deno.version && Deno.version.deno)
-
-// polyfill for requestAnimationFrame
-const rAF = IS_SERVER
-  ? null
-  : window['requestAnimationFrame'] || (f => setTimeout(f, 1))
-
-// React currently throws a warning when using useLayoutEffect on the server.
-// To get around it, we can conditionally useEffect on the server (no-op) and
-// useLayoutEffect in the browser.
-const useIsomorphicLayoutEffect = IS_SERVER ? useEffect : useLayoutEffect
-
 type Revalidator = (...args: any[]) => void
 
 // global state managers
@@ -292,7 +276,7 @@ function useSWR<Data = any, Error = any>(
   // display the data label in the React DevTools next to SWR hooks
   useDebugValue(stateRef.current.data)
 
-  const rerender = useState<unknown>(null)[1]
+  const rerender = useState<unknown>({})[1]
 
   let dispatch = useCallback(
     (payload: Action<Data, Error>) => {
@@ -352,26 +336,21 @@ function useSWR<Data = any, Error = any>(
     revalidators: Record<string, Revalidator[]>,
     callback: Revalidator
   ) => {
-    if (!callback) return
     if (!revalidators[key]) {
       revalidators[key] = [callback]
     } else {
       revalidators[key].push(callback)
     }
-  }
 
-  const removeRevalidator = (
-    revlidators: Record<string, Revalidator[]>,
-    callback: Revalidator
-  ) => {
-    if (revlidators[key]) {
-      const revalidators = revlidators[key]
-      const index = revalidators.indexOf(callback)
+    return () => {
+      const keyedRevalidators = revalidators[key]
+      const index = keyedRevalidators.indexOf(callback)
+
       if (index >= 0) {
-        // 10x faster than splice
-        // https://jsperf.com/array-remove-by-index
-        revalidators[index] = revalidators[revalidators.length - 1]
-        revalidators.pop()
+        // O(1): faster than splice
+        keyedRevalidators[index] =
+          keyedRevalidators[keyedRevalidators.length - 1]
+        keyedRevalidators.pop()
       }
     }
   }
@@ -573,9 +552,8 @@ function useSWR<Data = any, Error = any>(
     const latestKeyedData = resolveData()
 
     // update the state if the key changed (not the inital render) or cache updated
-    if (keyRef.current !== key) {
-      keyRef.current = key
-    }
+    keyRef.current = key
+
     if (!config.compare(currentHookData, latestKeyedData)) {
       dispatch({ data: latestKeyedData })
     }
@@ -662,9 +640,9 @@ function useSWR<Data = any, Error = any>(
       return false
     }
 
-    addRevalidator(FOCUS_REVALIDATORS, onFocus)
-    addRevalidator(RECONNECT_REVALIDATORS, onReconnect)
-    addRevalidator(CACHE_REVALIDATORS, onUpdate)
+    const unsubFocus = addRevalidator(FOCUS_REVALIDATORS, onFocus)
+    const unsubReconnect = addRevalidator(RECONNECT_REVALIDATORS, onReconnect)
+    const unsubUpdate = addRevalidator(CACHE_REVALIDATORS, onUpdate)
 
     return () => {
       // cleanup
@@ -673,9 +651,9 @@ function useSWR<Data = any, Error = any>(
       // mark it as unmounted
       unmountedRef.current = true
 
-      removeRevalidator(FOCUS_REVALIDATORS, onFocus)
-      removeRevalidator(RECONNECT_REVALIDATORS, onReconnect)
-      removeRevalidator(CACHE_REVALIDATORS, onUpdate)
+      unsubFocus()
+      unsubReconnect()
+      unsubUpdate()
     }
   }, [key, revalidate])
 

test/use-swr-config-callbacks.test.tsx

@@ -160,7 +160,7 @@ describe('useSWR - config callbacks', () => {
     expect(state).toEqual(null)
 
     // should trigger a loading slow event
-    await act(() => sleep(LOADING_TIMEOUT))
+    await act(() => sleep(LOADING_TIMEOUT * 1.5))
     screen.getByText('hello, , a')
     expect(state).toEqual('a')
 

test/use-swr-configs.test.tsx

@@ -7,7 +7,7 @@ import defaultConfig from '../src/config'
 describe('useSWR - configs', () => {
   it('should read the config fallback from the context', async () => {
     let value = 0
-    const INTERVAL = 10
+    const INTERVAL = 100
     const fetcher = () => value++
 
     function Section() {