Alternative to useActionData with Response for Easier Cookie Handling in React Router v7 (Framework Mode)?

[somersby10ml]

Hello React Router community,

I'm working with React Router v7 in framework mode and using useActionData along with my action function.

The basic example looks like this:

export async function action(actionData: ActionFunctionArgs<AppLoadContext>) {
  return {
    a: 1
  }
}

export default function Page() {
  const actionData = useActionData();
  console.log(actionData); // Output: { a: 1 }
  // I can directly access actionData.a here.
}

However, I need to set cookies upon successful login. To do this, I'm returning a Response object from my action:

// Example: Setting a cookie on successful login
const sessionId = 'generated-session-id'; // In reality, this would be a secure generated session ID
const cookieOptions = {
  httpOnly: true,
  secure: process.env.NODE_ENV === 'production',
  sameSite: 'lax' as const,
  maxAge: remember ? 30 * 24 * 60 * 60 : undefined, // 30 days if remember is true
};

const response = new Response(JSON.stringify({ success: true }), {
  status: 200,
  headers: response.headers,
});

response.headers.append(
  'Set-Cookie',
  `session=${sessionId}; ${Object.entries(cookieOptions)
    .map(([key, value]) => {
      if (value === true) return key;
      if (value) return `${key}=${value}`;
      return '';
    })
    .filter(Boolean)
    .join('; ')}`
);

return response;

The issue I'm facing is that when I use useActionData() in my component:

const actionData = useActionData();
console.log(actionData); // Output: "{ \"success\": true }" (a JSON string)

The actionData is a JSON string, and I have to manually parse it using JSON.parse() to access the data.

The BodyInit type for the first argument of Response includes string, which seems appropriate for my use case.

export type BodyInit =
  | ArrayBuffer
  | AsyncIterable<Uint8Array>
  | Blob
  | FormData
  | Iterable<Uint8Array>
  | NodeJS.ArrayBufferView
  | URLSearchParams
  | null
  | string

My goal is to be able to set cookies in the server-side action and then easily access the returned data in the client-side component (using useActionData) without having to manually parse a JSON string.

Is there a more idiomatic or recommended way to achieve this in React Router v7 (framework mode)? I'm looking for a proper solution, not a workaround.

Thanks in advance for any suggestions!