Add custom hash functions for specific arguments

[nwleedev]

In useSWR, if complex objects are in key, caching behavior do not work like what I expected.

function useUser(id) {
  const { data: user, isLoading } = useSWR([id], fetcher)
  return {user}
}
function User(props) {
  useUser(props.id)
  useUser(props.id)
  useUser(props.id)
}

In this example, three hooks are called. The first hooks is able to cache response, so second, and third hooks do not need to request data.

class User {
  id: string
  name: string
  email: string
  constructor(id: string) {
    this.id = id
    this.name = ""
    this.email = ""
  }
  addName(name: string) {
    this.name = name
  }
  addEmail(email: string) {
    this.email = email
  }
}
function useUser(id) {
  const { data: user, isLoading } = useSWR([new User(id)], fetcher)
  return {user}
}
function User(props) {
  useUser(props.id)
  useUser(props.id)
  useUser(props.id)
}

In this example, three hooks are called, and each hook request data because they can not find cached data.
I have found how key argument is cached in useSWR. In the key hash function, class instances are not allowed by default.

I tried to add custom hash functions for specific objects. stableHash converts key arguments to string to identify caches.

export const stableHash = (
  arg: any,
  customHash: ((instance: unknown) => string | undefined)[] = []
): string => {
  const type = typeof arg
  const constructor = arg && arg.constructor
  const isDate = constructor == Date
  let result: string | number | undefined = undefined
  let index: any

  if (OBJECT(arg) === arg && !isDate && constructor != RegExp) {
    result = table.get(arg)
    if (typeof result === 'string') {
      return result
    } else if (typeof result === 'number') {
      return result.toString()
    }
    result = ++counter + '~'

    for (const hash of customHash) {
      const hashed = hash(arg)
      if (hashed !== undefined && hashed !== null) {
        result = hashed
        break
      }
    }
    table.set(arg, result)

    if (constructor == Array) {
      result = '@'
      for (index = 0; index < arg.length; index++) {
        result += stableHash(arg[index], customHash) + ','
      }
      table.set(arg, result)
    }
    if (constructor == OBJECT) {
      result = '#'
      const keys = OBJECT.keys(arg).sort()
      while (!isUndefined((index = keys.pop() as string))) {
        if (!isUndefined(arg[index])) {
          result += index + ':' + stableHash(arg[index], customHash) + ','
        }
      }
      table.set(arg, result)
    }
  } else {
    // ...
  }

  return result
}

The custom hash function can be injected by swr configs.

export default class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props
    return (
      <SWRConfig
        value={{
          customHash: [
            ins => {
              if (ins instanceof User) {
                return `User$id=${ins.id},name=${ins.name},email=${ins.email}`
              }
            }
          ]
        }}
      >
        <Component {...pageProps} />
      </SWRConfig>
    )
  }
}

With custom hash functions, class instances could be cached like string, number, boolean.
Now I am working with this custom hash feature.

Can I suggest this discussion?