Reading cookies in Client Components during server-rendering with React's use() hook (Next.js 15)

[anicioalexandre]

Summary

Context
With Next.js 15, cookies() is now async. I need to read cookies in Client Components during their server-side rendering phase. I've implemented this pattern using React's use() hook:

// useCookie.ts
"use client"
import { use } from 'react'

export function useCookie(name: string) {
  if (typeof window === 'undefined') {
    const cookies: () => Promise<ReadonlyRequestCookies> = require('next/headers').cookies 
    const cookieStore = use(cookies())
    return cookieStore.get(name)?.value
  }
  return getCookieClient(name) // getting a cookie using client side tools, like js-cookie
}

// ClientComponent.tsx
"use client"
import { useCookie } from "./useCookie"

const ClientComponent = () => {
  const cookie = useCookie("myCookie")
  
  return (
    <div>
      <h1>This is a Client Component</h1>
      <p>Getting a Cookie: {cookie}</p>
    </div>
  )
}

export default ClientComponent

Then we would just render this component in a server component page.

• Is using use() to handle async cookies in Client Components during SSR considered an anti-pattern?
• Is it ok to have such a hybrid function to get cookies during server and client renders of a component?
• Would you recommend a different way to achieve this?

My goal is to have a better UX during reloads and phase rendering transitions. For example, I have a cookie that saves the state of the sidebar menu (collapsed or expanded). During a reload, I want to ensure that it remains in the last state during both server and client renders of a client component.

Additional information

No response

Example

No response

[baljir0901]

Hey! 👋 Really interesting question — I explored this too.

❗ TL;DR: Using use(cookies()) inside a "use client" component is not recommended

While it technically works during the server-rendering phase of a Client Component, it risks:

• ⚠️ Breaking hydration or causing mismatch warnings
• ⚠️ Becoming unsupported in future React versions
• ⚠️ Mixing server logic into client space, which goes against React’s model

---

✅ Recommended Pattern

Instead, read cookies in a Server Component and pass them to the Client Component as props:

// page.tsx (or layout.tsx)
import { cookies } from "next/headers";
import ClientComponent from "./ClientComponent";

export default function Page() {
  const sidebarState = cookies().get("myCookie")?.value ?? "expanded";
  return <ClientComponent initialSidebar={sidebarState} />;
}

[anicioalexandre]

Hey @baljir0901, thanks for replying. Regarding the points you mentioned:

⚠️ Breaking hydration or causing mismatch warnings

I am doing this function to exactly avoid these mismatches, if the client component is not able to get the cookie during the server render, the UI risks to be mismatched

⚠️ Becoming unsupported in future React versions

You mean use being deprecated or something? Because it doesn't seem likely, they actually incentivize its use over useContext for example:

use is preferred over useContext because it is more flexible.

⚠️ Mixing server logic into client space, which goes against React’s model

Right, I'm not so sure if I got it, because server and client components are close together, since client components should be rendered during SSR by default

[anicioalexandre]

@icyJoseph could you advise please?