useCookie

React hook that facilitates the storage, updating and deletion of values within the CookieStore

useCookie manages a single browser cookie by key. It returns a tuple of [cookieValue, updateCookie, refreshCookie]. Call updateCookie with a string to set the cookie or with undefined to delete it. The refreshCookie function re-reads the cookie from the store, which is useful when the cookie may have been modified externally. Options are passed through to js-cookie for controlling path, domain, expiration, and other cookie attributes.

When to Use

Persisting user preferences (locale, theme, consent flags) in cookies for server-side access
Reading and writing authentication or session tokens stored in cookies
Synchronizing cookie state in a component when external code (analytics, third-party scripts) may also modify the cookie

Notes

SSR considerations: Pass a defaultValue when using SSR so the hook has a value before document.cookie is available on the client.
Same-tab sync: Updating a cookie in one component automatically re-renders sibling useCookie instances using the same key in the same tab. Cookies fire no native cross-tab event, so this does not propagate across tabs (unlike useLocalStorage/useSessionStorage).
refreshCookie: Only needed to pick up changes made outside the hook — a server Set-Cookie, a direct document.cookie write, or the CookieStore API. Sibling hook instances no longer need it.

Usage

Live Editor

function Demo() {
  const defaultOption = {
    path: "/",
  };

  const cookieName = "cookie-key";
  const [cookieValue, updateCookie, refreshCookie] = useCookie(
    cookieName,
    defaultOption,
    "default-value"
  );

  const updateButtonClick = () => {
    updateCookie("new-cookie-value");
  };

  const deleteButtonClick = () => {
    updateCookie(undefined);
  };

  const change = () => {
    if ("cookieStore" in window) {
      const store = window.cookieStore as any;
      store.set({ name: cookieName, value: "changed" });
    } else {
      document.cookie = `${cookieName}=changed; path=/`;
    }
  };

  return (
    <div>
      <p>Click on the button to update or clear the cookie</p>
      <p color="blue">cookie: {cookieValue || "no value"}</p>
      <button onClick={updateButtonClick}>Update the cookie</button>
      <button onClick={deleteButtonClick}>Clear the cookie</button>
      <button onClick={change}>
        Changing the cookie through other methods
      </button>
      <button onClick={refreshCookie}>Refresh the cookie</button>
    </div>
  );
};

Result

Same-tab sync

Two components using the same cookie key stay in sync within the tab — click a button in either panel and the other updates immediately, no manual broadcast and no reload:

Live Editor

function CookiePanel({ label }) {
  const [value, updateCookie] = useCookie("shared-demo-cookie", { path: "/" }, "A");
  return (
    <div
      style={{
        border: "1px solid var(--sl-color-gray-5, #ccc)",
        borderRadius: 6,
        padding: 12,
        marginBottom: 8,
      }}
    >
      <strong>{label}</strong> reads: <code>{value ?? "(empty)"}</code>
      <div style={{ display: "flex", gap: 8, marginTop: 8 }}>
        <button onClick={() => updateCookie("A")}>Set A</button>
        <button onClick={() => updateCookie("B")}>Set B</button>
        <button onClick={() => updateCookie("C")}>Set C</button>
        <button onClick={() => updateCookie(undefined)}>Clear</button>
      </div>
    </div>
  );
}

function Demo() {
  return (
    <div>
      <p>Click a button in either panel — the other updates in the same tab:</p>
      <CookiePanel label="Component A" />
      <CookiePanel label="Component B" />
    </div>
  );
}

render(<Demo />);

Result

API

useCookie

Returns

readonly [UseCookieState, (newValue: UseCookieState | ((prevState: UseCookieState) => UseCookieState)) => void, () => void]: A tuple with the following elements:

The current value of the cookie.
A function to update the value of the cookie.
A function to refresh the value of the cookie, incase other events change it.

Arguments

Argument	Description	Type	DefaultValue
key	key	string (Required)	-
options	option pass to `js-cookie`	any	-
defaultValue	defaultValue, must be required in ssr	string \| undefined	-

useCookieState

Type

export type UseCookieState = string | undefined