{"id":49104,"library":"react-use-storage","title":"react-use-storage","description":"React hook for syncing state with localStorage and sessionStorage. Current version 0.5.1, stable and feature-complete. Provides two hooks: useLocalStorage and useSessionStorage, each returning a [value, setter, remover] tuple similar to useState. Values are automatically synchronized across tabs/windows via the storage event. Differentiator: simple API with no dependencies beyond React 16.8+. Ships TypeScript definitions. Low release cadence, actively maintained.","status":"active","version":"0.5.1","language":"javascript","source_language":"en","source_url":"https://github.com/leny/react-use-storage","tags":["javascript","react","hook","hooks","storage","localstorage","sessionstorage","typescript"],"install":[{"cmd":"npm install react-use-storage","lang":"bash","label":"npm"},{"cmd":"yarn add react-use-storage","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-use-storage","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React hooks","package":"react","optional":false},{"reason":"Peer dependency (for React DOM)","package":"react-dom","optional":true}],"imports":[{"note":"Named export, not default.","wrong":"import useLocalStorage from 'react-use-storage'","symbol":"useLocalStorage","correct":"import { useLocalStorage } from 'react-use-storage'"},{"note":"CommonJS require is possible but discouraged; use named import.","wrong":"const useSessionStorage = require('react-use-storage').useSessionStorage","symbol":"useSessionStorage","correct":"import { useSessionStorage } from 'react-use-storage'"},{"note":"TypeScript type export for the return type: [T, (value: T | ((prev: T) => T)) => void, () => void].","wrong":"","symbol":"StorageHookReturn","correct":"import type { StorageHookReturn } from 'react-use-storage'"}],"quickstart":{"code":"import { useLocalStorage } from 'react-use-storage';\n\nfunction Counter() {\n  const [count, setCount, removeCount] = useLocalStorage('counter', 0);\n  return (\n    <div>\n      <p>Count: {count}</p>\n      <button onClick={() => setCount(c => c + 1)}>+</button>\n      <button onClick={() => setCount(0)}>Reset</button>\n      <button onClick={removeCount}>Remove</button>\n    </div>\n  );\n}","lang":"typescript","description":"Shows basic usage of useLocalStorage with a counter, including set, reset, and remove operations."},"warnings":[{"fix":"Use a constant or namespace for storage keys.","message":"Ensure the key string is consistent across your app to avoid data overlap.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Guard usage with typeof window !== 'undefined' or use a dynamic import.","message":"The hook only works in browser environments; calling it during SSR (e.g., Next.js) will throw.","severity":"gotcha","affected_versions":">=0.0.0"}],"env_vars":null,"search_vec":"'0.5.1':16 '16.8':56 'across':42 'activ':63 'api':50 'automat':40 'beyond':54 'cadenc':62 'complet':21 'current':14 'definit':59 'depend':53 'differenti':48 'event':47 'featur':20 'feature-complet':19 'hook':6,24,67,68 'javascript':65 'localstorag':11,70 'low':60 'maintain':64 'provid':22 'react':2,5,55,66 'react-use-storag':1 'releas':61 'remov':33 'return':29 'sessionstorag':13,71 'setter':32 'ship':57 'similar':35 'simpl':49 'stabl':17 'state':9 'storag':4,46,69 'sync':8 'synchron':41 'tabs/windows':43 'tupl':34 'two':23 'typescript':58,72 'use':3 'uselocalstorag':25 'usesessionstorag':27 'usest':37 'valu':31,38 'version':15 'via':44","created_at":"2026-06-07T17:00:04.381559+00:00","updated_at":"2026-06-07T17:00:04.381559+00:00","problems":[{"fix":"Check that window is defined before calling the hook, or use a safe wrapper.","cause":"Trying to use the hook during server-side rendering or when window is undefined.","error":"TypeError: Cannot read properties of undefined (reading 'getItem')"},{"fix":"Ensure the hook is always called in the same order at the top level of a React component.","cause":"Conditionally calling the hook or calling it inside loops/conditions.","error":"Warning: React has detected a change in the order of Hooks called by ComponentName"}],"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/leny/react-use-storage#readme","github":"https://github.com/leny/react-use-storage","docs":null,"changelog":null,"pypi":null,"npm":"react-use-storage","openapi_spec":null,"status_page":null,"smithery":null,"categories":["storage"],"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}}