createCookie custom encode/decode functions are still being b64-encoded (and more)

[tylercrumpton]

I'm using React Router as a...

framework

Reproduction

https://stackblitz.com/edit/github-sbic1hau?file=app%2Froutes%2Fhome.tsx

System Info

System:
    OS: macOS 14.7.6
    CPU: (10) arm64 Apple M1 Pro
    Memory: 71.19 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 24.0.1 - ~/.nvm/versions/node/v24.0.1/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.14.2/bin/yarn
    npm: 11.3.0 - ~/.nvm/versions/node/v24.0.1/bin/npm
  Browsers:
    Brave Browser: 131.1.73.89
    Chrome: 137.0.7151.57
    Safari: 18.4
    Safari Technology Preview: 18.4
  npmPackages:
    @react-router/dev: ^7.5.3 => 7.6.0 
    @react-router/node: ^7.5.3 => 7.6.0 
    @react-router/serve: ^7.5.3 => 7.6.0 
    react-router: ^7.5.3 => 7.6.0 
    vite: ^6.3.3 => 6.3.5

Used Package Manager

npm

Expected Behavior

When using createCookie() with custom encode and decode functions, the cookie value should transformed using those functions instead of the default base64+URI+escaping+stringify transformations that React Router uses.

// Example no-op transformers
const testCookie = createCookie("test", {
  encode: (value) => value, // `value` input should be "test" 
  decode: (value) => value,
});

Actual Behavior

When using createCookie() is custom encode and decode functions, the cookie value is first transformed using the default base64+URI+escaping+stringify transformations that React Router uses., and then passed into the custom functions.

// Example no-op transformers
const testCookie = createCookie("test", {
  encode: (value) => value, // `value` input is already "ImhlbGxvIg==" 
  decode: (value) => value,
});

[tylercrumpton]

Here is the encoding/decoding that is being applied regardless of a custom encode/decode being passed in:

react-router/packages/react-router/lib/server-runtime/cookies.ts

Line 175 in 6d542b9

return btoa(myUnescape(encodeURIComponent(JSON.stringify(value))));

Happy to take a look at making this change if it seems reasonable to y'all! I'm thinking that if a custom encode/decode is passed in, we would bypass the default encode/decode functions and instead let the cookie library handle the encode/decode using the passed in functions.