react-idb-cache

library1.4.1jsnpmunverified

React hook-based caching library that combines IndexedDB persistence with React state synchronization, version 1.4.1. Provides a useCached hook to fetch, cache, and retrieve data asynchronously, automatically updating React components when data arrives. Uses idb-keyval for IndexedDB operations and supports custom drivers, optional context isolation via CacheProvider, and TypeScript with generic type parameters. Released on npm with moderate frequency.

storage

npm install react-idb-cache

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-IDB-CACHE

react-idb-cache

storagejavascriptv1.4.1

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

useCached

✓ import { useCached } from 'react-idb-cache'

✗ import useCached from 'react-idb-cache'

useCached is a named export, not default. Common mistake: trying default import.

CacheProvider

✓ import { CacheProvider } from 'react-idb-cache'

✗ import { CacheProvider } from 'react-idb-cache/driver/NullDB'

CacheProvider is exported from the main package, not from subpath. Subpath 'react-idb-cache/driver/NullDB' exports NullDB class, not CacheProvider.

NullDB

✓ import NullDB from 'react-idb-cache/driver/NullDB'

✗ import { NullDB } from 'react-idb-cache/driver/NullDB'

NullDB is a default export from the subpath module. Use default import, not named.

Shows basic setup with CacheProvider, useCached hook, loading data from API, and rendering cached value.

import { CacheProvider, useCached } from 'react-idb-cache'; function App() { return ( <CacheProvider> <MyComponent /> </CacheProvider> ); } function MyComponent() { const { get, set } = useCached(); const value = get('myKey', async () => { const res = await fetch('https://api.example.com/data'); const data = await res.json(); set('myKey', data.value, { fetchedAt: Date.now() }); }); return <div>{value ?? 'Loading...'}</div>; }

Debug

Known issues

breakinguseCached() without arguments no longer uses global context; must wrap in CacheProvider or pass { context: false } for local cache

fix

Wrap components with <CacheProvider> or call useCached({ context: false }) for local-only cache

affects: >=0.1.0 <1.0.0

deprecatedThe get() method's expire callback signature changed; old version used ({ data, meta }) => boolean, new version uses (key, value) => boolean

fix

Update expire callback signature: expire(key, value) instead of ({ data, meta }) => boolean

affects: <1.2.0

gotchaImporting from subpath 'react-idb-cache/driver/NullDB' requires default import, not named import

fix

Use `import NullDB from 'react-idb-cache/driver/NullDB'`

affects: >=1.0.0

gotchaTypeScript generic order: useCached<T, K, V>() where T is record shape, K is key type, V is value type; forgetting second generic can cause errors

fix

Specify generics as useCached<string, 'data', number>() for example

affects: >=1.0.0

Errors

Common errors & fixes

TypeError: (0 , react_idb_cache__WEBPACK_IMPORTED_MODULE_0__.useCached) is not a function

Default import of useCached instead of named import

fix

Change `import useCached from 'react-idb-cache'` to `import { useCached } from 'react-idb-cache'`

Module not found: Can't resolve 'react-idb-cache/driver/NullDB'

Import path uses wrong case or missing file extension

fix

Ensure import path is exactly 'react-idb-cache/driver/NullDB' (case-sensitive)

Uncaught TypeError: expire is not a function

Expire callback signature mismatch between versions

fix

Update expire callback: expire(key, value) => boolean instead of old ({ data, meta }) => boolean

Upgrade

Version history

1.4.1latest on npm

Audit

Dependencies

reactrequiredPeer dependency: React >=17 is required for hooks and context

Agent activity

17 hits · last 30 days

node

Resources

githubhttps://github.com/ph-fritsche/react-idb-cache ↗

packagereact-idb-cache ↗

homepagehttps://github.com/ph-fritsche/react-idb-cache#readme ↗