{"id":11671,"library":"react-cookie","title":"React Cookie Management Library","description":"react-cookie is a utility library for React applications that provides a universal (isomorphic) solution for managing browser cookies, enabling consistent cookie handling across both client-side and server-side rendering (SSR) environments. Its current stable version is 8.1.0, with frequent updates addressing dependencies and minor improvements, typically on a monthly cadence for patch releases and less frequently for minor/major versions as features or breaking changes are introduced. Key differentiators include its integration with the underlying `universal-cookie` library for core logic, offering React-specific hooks (`useCookies`) and a provider pattern (`CookiesProvider`) for easy consumption within React component trees. It simplifies reading, setting, and removing cookies by abstracting away the browser's `document.cookie` API and Node.js server request headers, making it particularly useful for applications requiring robust cookie management in an SSR context.","status":"active","version":"8.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/ItsBenCodes/cookies","tags":["javascript","universal","isomophic","cookie","react","typescript"],"install":[{"cmd":"npm install react-cookie","lang":"bash","label":"npm"},{"cmd":"yarn add react-cookie","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-cookie","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency, required for React hooks and components.","package":"react","optional":false},{"reason":"Core runtime dependency providing the underlying cookie management logic.","package":"universal-cookie","optional":false}],"imports":[{"note":"Primary hook for accessing and modifying cookies. CommonJS `require` is generally discouraged in modern React projects using ESM.","wrong":"const useCookies = require('react-cookie').useCookies;","symbol":"useCookies","correct":"import { useCookies } from 'react-cookie';"},{"note":"Provides a cookie context to all children. It's a named export, not a default export.","wrong":"import CookiesProvider from 'react-cookie';","symbol":"CookiesProvider","correct":"import { CookiesProvider } from 'react-cookie';"},{"note":"Higher-order component (HOC) for injecting cookies into class components. Named export. Less common in functional components due to `useCookies` hook.","wrong":"import withCookies from 'react-cookie';","symbol":"withCookies","correct":"import { withCookies } from 'react-cookie';"},{"note":"Refers to the underlying `universal-cookie` instance for imperative access outside React components. It's a re-export from `universal-cookie`.","wrong":"import UniversalCookies from 'react-cookie/universal-cookie';","symbol":"Cookies","correct":"import { Cookies } from 'react-cookie';"}],"quickstart":{"code":"import React from 'react';\nimport { CookiesProvider, useCookies } from 'react-cookie';\n\nfunction MyComponent() {\n const [cookies, setCookie, removeCookie] = useCookies(['my-cookie-name']);\n\n const handleSetCookie = () => {\n setCookie('my-cookie-name', 'hello-world', { path: '/', maxAge: 3600 });\n };\n\n const handleRemoveCookie = () => {\n removeCookie('my-cookie-name', { path: '/' });\n };\n\n return (\n
This component demonstrates how to use `useCookies` to read, set, and remove cookies. The `CookiesProvider` makes the cookie context available throughout your app.
\n
\n );\n}\n\nexport default function App() {\n return (\n \n \n \n );\n}","lang":"typescript","description":"This quickstart demonstrates setting up `CookiesProvider` and using the `useCookies` hook to interact with a cookie named 'my-cookie-name'."},"warnings":[{"fix":"Ensure your project uses React.js version 16.3.0 or higher. For older React versions (15.x), use `react-cookie` versions 0.0-2.2.","message":"`react-cookie` v3.0+ requires React.js >= 16.3.0 due to its reliance on the new Context API and `forwardRef`.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Understand that `httpOnly` cookies are exclusively for server-side access to enhance security. Do not attempt to manipulate them from the browser. For client-accessible data, avoid the `httpOnly` flag.","message":"Cookies with the `httpOnly` flag cannot be accessed or modified from client-side JavaScript, including through `react-cookie` hooks or methods.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"On the server, pass the cookie instance obtained from the incoming request (e.g., `req.universalCookies` if using `universal-cookie-express`, or `new Cookies(req.headers.cookie)`) to the `CookiesProvider` prop, like ``.","message":"When using Server-Side Rendering (SSR), the `cookies` prop *must* be set on `CookiesProvider` using `req.universalCookies` or a `new Cookies(cookieHeader)` instance to correctly hydrate the server's cookie state.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Always specify the exact cookie names your component depends on in the `dependencies` array to optimize performance and prevent excessive re-renders, e.g., `useCookies(['my-specific-cookie'])`.","message":"The `useCookies` hook's `dependencies` array (optional) dictates when the component re-renders. If unspecified, it will re-render on *any* cookie change, which can lead to unnecessary re-renders.","severity":"gotcha","affected_versions":">=3.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Wrap your component tree, or at least the components using `useCookies`, with `CookiesProvider` at a higher level in your application.","cause":"The `useCookies` hook was called outside the context of a `CookiesProvider` component.","error":"Error: useCookies must be used within a CookiesProvider"},{"fix":"Ensure you are using `import { useCookies } from 'react-cookie';` and `react-cookie` is listed in your `package.json` and `node_modules`.","cause":"Incorrect named import for `useCookies` or `react-cookie` library not correctly installed/imported.","error":"TypeError: Cannot read properties of undefined (reading 'useCookies')"},{"fix":"The `setCookie` method automatically stringifies objects, so ensure you're providing the expected type or explicitly cast if TypeScript complains without real reason. If the `value` is an object, `react-cookie` handles serialization.","cause":"Attempting to pass a non-string value directly to `setCookie` without allowing `react-cookie` to stringify it, or a TypeScript type mismatch.","error":"Argument of type 'string | object' is not assignable to parameter of type 'string'."}],"ecosystem":"npm"}