useLRUCache🪝

A React hook for managing an LRUCache (Least Recently Used Cache) in your React components.

Installation

npm install use-lru-cache

Usage

import React from "react";
import { useLRUCache } from "use-lru-cache";

type T = number;

const App: React.FC = () => {
  // Initialize an LRUCache with a capacity of 10 for numbers
  // It will hold a value of type number against keys
  const { get, put, getCachedData, clearCache } = useLRUCache<T>(10);

  const cachedValue = get("someKey"); // returns corresponding value if key is present else null.
  put("someKey", 42); // set key as "someKey" and corresponding value will be 42
  const cachedKeys = getCachedData(); // will return an array of all present keys

  return (
    <div>
      <p>Cached Value: {cachedValue}</p>
      {/* Render other components or UI elements */}
    </div>
  );
};

export default MyComponent;

Note: Replace someKey and 42 with your actual key and data. Adjust the generic type parameter based on the type of data you want to store in the cache corresponding to your key. A key can be a number or string.

Example: use-lru-cache.vercel.app

Checkout use-lru-cache on npm

Contributors