Registry / performance / remix-client-cache

remix-client-cache

library3.0.0jsnpmunverified

A utility library for caching client data in React Router applications, currently at version 3.0.0. It provides hooks and components to cache server data client-side, reducing redundant fetches and improving perceived performance. Released actively. Key differentiators: designed specifically for React Router v7+, leverages React 18/19 concurrent features, supports both ESM and TypeScript out of the box. Alternative to manual SWR or React Query setups with Router integration.

performance

npm install remix-client-cache

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REMIX-CLIENT-CACHE

remix-client-cache

performancejavascriptv3.0.0

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.

useCache

✓ import { useCache } from 'remix-client-cache'

✗ import useCache from 'remix-client-cache'

Named export, not default. Common mistake treating it as default export.

withCache

✓ import { withCache } from 'remix-client-cache'

✗ const withCache = require('remix-client-cache').withCache

This package is ESM-only; require() fails in Node environments expecting CommonJS.

CacheProvider

✓ import { CacheProvider } from 'remix-client-cache'

Wrap your app with <CacheProvider> to enable caching. Added in v2.

type UseCacheOptions

✓ import type { UseCacheOptions } from 'remix-client-cache'

✗ import { UseCacheOptions } from 'remix-client-cache'

UseCacheOptions is a TypeScript type export, not a runtime value. Use `import type`.

Shows wrapping app in CacheProvider and using useCache hook to fetch and cache data with a TTL of 5 minutes.

import { CacheProvider, useCache } from 'remix-client-cache'; import { BrowserRouter, Route, Routes } from 'react-router'; function App() { return ( <CacheProvider ttl={5 * 60 * 1000}> <BrowserRouter> <Routes> <Route path="/" element={<Home />} /> </Routes> </BrowserRouter> </CacheProvider> ); } function Home() { const { data, loading, error } = useCache('home', async () => { const res = await fetch('/api/home'); return res.json(); }); if (loading) return <p>Loading...</p>; if (error) return <p>Error: {error.message}</p>; return <div>{JSON.stringify(data)}</div>; }

Debug

Known issues

breakingCacheProvider is required to use any caching hooks; missing provider will cause errors.

fix

Wrap your application with <CacheProvider> at the root level.

affects: >=2.0.0

breakingVersion 3 drops support for React Router v6; only v7 is supported.

fix

Upgrade to React Router v7 or stay on remix-client-cache@2.x.

affects: 3.0.0

deprecatedThe `useCache` hook no longer accepts a `key` as second argument; use options object instead.

fix

Migrate to options object format: useCache('key', fetcher, { ttl: 5000 }).

affects: >=2.0.0 <3.0.0

gotchaThe cache key must be unique across your app; duplicate keys will override each other.

fix

Use descriptive keys that include route or component info, e.g., 'user-profile' instead of 'data'.

affects: >=1.0.0

gotchaESM-only package; using require() in Node.js results in a runtime error.

fix

Use import syntax or configure your environment for ESM.

affects: >=3.0.0

Errors

Common errors & fixes

Error: CacheProvider not found. Did you forget to wrap your application?

Missing CacheProvider wrapper at root level.

fix

Wrap app in <CacheProvider>.

TypeError: (0 , remix_client_cache.useCache) is not a function

Using CommonJS require() on an ESM-only package.

fix

Use import { useCache } from 'remix-client-cache' instead of require().

Unhandled Runtime Error: Cannot read properties of undefined (reading 'cache')

Attempting to use useCache outside of CacheProvider context.

fix

Ensure the component is inside <CacheProvider>.

Upgrade

Version history

3.0.0latest on npm

Audit

Dependencies

reactrequiredPeer dependency for React hooks

react-domrequiredPeer dependency for DOM rendering

react-routerrequiredPeer dependency for Router hooks

Agent activity

51 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/forge42dev/remix-client-cache ↗

packageremix-client-cache ↗

homepagehttps://github.com/forge42dev/remix-client-cache#readme ↗