{"id":46238,"library":"remix-client-cache","title":"Remix Client Cache","description":"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.","status":"active","version":"3.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/forge42dev/remix-client-cache","tags":["javascript","React","Remix","Remix.run","hooks","cache","client-cache","typescript"],"install":[{"cmd":"npm install remix-client-cache","lang":"bash","label":"npm"},{"cmd":"yarn add remix-client-cache","lang":"bash","label":"yarn"},{"cmd":"pnpm add remix-client-cache","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React hooks","package":"react","optional":false},{"reason":"Peer dependency for DOM rendering","package":"react-dom","optional":false},{"reason":"Peer dependency for Router hooks","package":"react-router","optional":false}],"imports":[{"note":"Named export, not default. Common mistake treating it as default export.","wrong":"import useCache from 'remix-client-cache'","symbol":"useCache","correct":"import { useCache } from 'remix-client-cache'"},{"note":"This package is ESM-only; require() fails in Node environments expecting CommonJS.","wrong":"const withCache = require('remix-client-cache').withCache","symbol":"withCache","correct":"import { withCache } from 'remix-client-cache'"},{"note":"Wrap your app with <CacheProvider> to enable caching. Added in v2.","wrong":null,"symbol":"CacheProvider","correct":"import { CacheProvider } from 'remix-client-cache'"},{"note":"UseCacheOptions is a TypeScript type export, not a runtime value. Use `import type`.","wrong":"import { UseCacheOptions } from 'remix-client-cache'","symbol":"type UseCacheOptions","correct":"import type { UseCacheOptions } from 'remix-client-cache'"}],"quickstart":{"code":"import { CacheProvider, useCache } from 'remix-client-cache';\nimport { BrowserRouter, Route, Routes } from 'react-router';\n\nfunction App() {\n  return (\n    <CacheProvider ttl={5 * 60 * 1000}>\n      <BrowserRouter>\n        <Routes>\n          <Route path=\"/\" element={<Home />} />\n        </Routes>\n      </BrowserRouter>\n    </CacheProvider>\n  );\n}\n\nfunction Home() {\n  const { data, loading, error } = useCache('home', async () => {\n    const res = await fetch('/api/home');\n    return res.json();\n  });\n\n  if (loading) return <p>Loading...</p>;\n  if (error) return <p>Error: {error.message}</p>;\n  return <div>{JSON.stringify(data)}</div>;\n}","lang":"typescript","description":"Shows wrapping app in CacheProvider and using useCache hook to fetch and cache data with a TTL of 5 minutes."},"warnings":[{"fix":"Wrap your application with <CacheProvider> at the root level.","message":"CacheProvider is required to use any caching hooks; missing provider will cause errors.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Upgrade to React Router v7 or stay on remix-client-cache@2.x.","message":"Version 3 drops support for React Router v6; only v7 is supported.","severity":"breaking","affected_versions":"3.0.0"},{"fix":"Migrate to options object format: useCache('key', fetcher, { ttl: 5000 }).","message":"The `useCache` hook no longer accepts a `key` as second argument; use options object instead.","severity":"deprecated","affected_versions":">=2.0.0 <3.0.0"},{"fix":"Use descriptive keys that include route or component info, e.g., 'user-profile' instead of 'data'.","message":"The cache key must be unique across your app; duplicate keys will override each other.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use import syntax or configure your environment for ESM.","message":"ESM-only package; using require() in Node.js results in a runtime error.","severity":"gotcha","affected_versions":">=3.0.0"}],"env_vars":null,"search_vec":"'18/19':50 '3.0.0':18 'activ':39 'altern':62 'applic':14 'box':61 'cach':3,8,25,78,81 'client':2,9,29,80 'client-cach':79 'client-sid':28 'compon':23 'concurr':51 'current':15 'data':10,27 'design':42 'differenti':41 'esm':55 'featur':52 'fetch':33 'hook':21,77 'improv':35 'integr':72 'javascript':73 'key':40 'leverag':48 'librari':6 'manual':64 'perceiv':36 'perform':37 'provid':20 'queri':68 'react':12,45,49,67,74 'reduc':31 'redund':32 'releas':38 'remix':1,75 'remix.run':76 'router':13,46,71 'server':26 'setup':69 'side':30 'specif':43 'support':53 'swr':65 'typescript':57,82 'util':5 'v7':47 'version':17","created_at":"2026-06-07T12:58:57.990174+00:00","updated_at":"2026-06-07T12:58:57.990174+00:00","problems":[{"fix":"Wrap app in <CacheProvider>.","cause":"Missing CacheProvider wrapper at root level.","error":"Error: CacheProvider not found. Did you forget to wrap your application?"},{"fix":"Use import { useCache } from 'remix-client-cache' instead of require().","cause":"Using CommonJS require() on an ESM-only package.","error":"TypeError: (0 , remix_client_cache.useCache) is not a function"},{"fix":"Ensure the component is inside <CacheProvider>.","cause":"Attempting to use useCache outside of CacheProvider context.","error":"Unhandled Runtime Error: Cannot read properties of undefined (reading 'cache')"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null,"cli_version":null,"type":"library","homepage":"https://github.com/forge42dev/remix-client-cache#readme","github":"https://github.com/forge42dev/remix-client-cache","docs":null,"changelog":null,"pypi":null,"npm":"remix-client-cache","openapi_spec":null,"status_page":null,"smithery":null,"categories":["performance"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-07","next_check":"2026-09-05","install_tag":null}}