useCache

Cache data for a certain period of time. And you can synchronize data in different components. The CacheConfig component can set some default options for this hook.

API

function useCache<T>(
  key: {},
  options?: {
    defaultValue?: T;
    cache?: CacheInterface;
    cacheTime?: number;
    cacheSync?: boolean | { set?: boolean; delete?: boolean };
    validate?: (value: any) => boolean;
    onSet?: (value: any) => void;
    onDelete?: (value: any) => void;
  }
): [value: T | undefined, setCache: (newValue: T | undefined) => void];

interface CacheInterface {
  has(key: any): boolean;
  get(key: any): any;
  getCacheTimestamp(key: any): number | undefined;
  set(key: any, data: any, options?: { cacheTime?: number }): any;
  delete(key: any): any;
  isReady(): boolean;
  once(name: "ready", listener: () => void): any;
  off(name: "ready", listener: () => void): any;
  for(key: any): {
    on(name: "set" | "delete", listener: (data: any) => void): any;
    off(name: "set" | "delete", listener: (data: any) => void): any;
  };
}

Params:

• key: Cache key. It can be any type except null and undefined.
• options: Options object.
  • options.defaultValue: Default value when the cache value does not exist.
  • options.cache: Cache instance. Use MemoryCache by default. You can pass an instance that implements the CacheInterface.
  • options.cacheTime: Cache time, in milliseconds. Default is 5 minutes. You can set a permanent cache by setting this option greater than or equal to Number.MAX_SAFE_INTEGER, for example Infinity.
  • options.cacheSync: Synchronize data on set and/or delete data. Default is false. It can be an object to synchronize data in different events.
    • options.cacheSync.set: Synchronize data on set cache.
    • options.cacheSync.delete: Synchronize data on delete cache or when cache time expires.
  • options.validate: Validate the cache value. If it returns falsy, the defaultValue will be used.
  • options.onSet: Data set event. The value param will not be validated by the validate function.
  • options.onDelete: Data delete event (cache time expired or setCache(undefined) called). The value param will not be validated by the validate function.

Results:

• value: Cache value or default value.
• setCache: The function to set cache. It the newValue param is undefined, the cache will be deleted.

Examples

Basic

You can input some text, jump to other page, and then go back to this page to see the effect.

Initial cached data:

import React, { useState } from "react";
import { useCache } from "@lilib/hooks";

function Example() {
  const [cache, setCache] = useCache("cache-basic", { defaultValue: "" });
  const [value, setValue] = useState(cache);

  return (
    <>
      <input
        value={value}
        onChange={(event) => {
          if (event.target.value) {
            setValue(event.target.value);
            setCache(event.target.value);
          } else {
            setValue("");
            setCache(undefined);
          }
        }}
      />{" "}
      <span>Initial cached data: {cache}</span>
    </>
  );
}

export default Example;

Synchronization

Cached data:
Cached data:

import React from "react";
import { useCache } from "@lilib/hooks";

function Component() {
  const [cache, setCache] = useCache("cache-sync", {
    defaultValue: "",
    cacheSync: true,
  });

  return (
    <>
      <input
        value={cache}
        onChange={(event) => {
          setCache(event.target.value || undefined);
        }}
      />{" "}
      <span>Cached data: {cache}</span>
    </>
  );
}

function Example() {
  return (
    <>
      <Component />
      <br />
      <Component />
    </>
  );
}

export default Example;

Set cache time

The cache data will be deleted after 3 seconds (default is 5 minutes).

Data:

import React, { useState } from "react";
import { useCache } from "@lilib/hooks";

function Example() {
  const [data, setData] = useState("");
  const [cache, setCache] = useCache("cache-time", {
    defaultValue: "",
    cacheSync: true,
    cacheTime: 3000,
    onSet: (data) => setData(data),
    onDelete: () => setData("deleted"),
  });

  return (
    <>
      <input
        value={cache}
        onChange={(event) => {
          setCache(event.target.value);
        }}
      />{" "}
      Data: {data}
    </>
  );
}

export default Example;