cookies

16 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

IsCookieFunction signature

IsCookieFunction is a type that defines a function taking a single parameter named 'object' of type 'any', and returning a type predicate 'object is Cookie'. The function signature is: type IsCookieFunction = (object: any) => object is Cookie;

IsCookieFunction parameter

The 'object' parameter of IsCookieFunction accepts any value to check whether it is a React Router Cookie object.

IsCookieFunction return value

IsCookieFunction returns true if the value is a React Router Cookie object; otherwise, it returns false.

IsCookieFunction purpose

IsCookieFunction is a utility function type that determines whether a value is a React Router Cookie object.

createCookie function summary

createCookie creates a logical container for managing a browser cookie from the server. It is available in framework and data modes.

createCookie parameters

createCookie takes two parameters: name (the name of the cookie as a string) and cookieOptions (options for parsing and serializing the cookie).

createCookie return type

createCookie returns a Cookie object for parsing and serializing the cookie.

createCookieSessionStorage function signature

createCookieSessionStorage is a generic function that takes CookieSessionStorageOptions (with a cookie property) and returns a SessionStorage object. The generic parameters are Data (defaults to SessionData) and FlashData (defaults to Data). The function signature is: function createCookieSessionStorage<Data = SessionData, FlashData = Data>({ cookie: cookieArg }: CookieSessionStorageOptions = {}): SessionStorage<Data, FlashData>

createCookieSessionStorage purpose

createCookieSessionStorage creates and returns a SessionStorage object that stores all session data directly in the session cookie itself. This approach requires no database or backend services and can simplify load-balanced scenarios, but has the limitation that serialized session data may not exceed the browser's maximum cookie size.

createCookieSessionStorage return type

createCookieSessionStorage returns a SessionStorage object typed with the generic Data and FlashData parameters.

Cookies for persistent UI state across server rendering

Cookies offer a comprehensive solution for persistent UI state because state is available on the server for rendering and even for server actions, eliminating state synchronization hassles with a single source of truth. Use createCookie to create a cookie object, read it in a loader using request.headers.get('Cookie'), and write it in an action using Set-Cookie headers. This approach enables state persistence across page loads, component mounts/unmounts, and even across devices with database-backed sessions.

createCookie usage example

To create a cookie in React Router, call createCookie with a cookie name: `import { createCookie } from "react-router"; export const prefs = createCookie("prefs");`

Reading and writing cookies in loader and action

In a loader, read the cookie using: `const cookieHeader = request.headers.get("Cookie"); const cookie = (await prefs.parse(cookieHeader)) || {};`. In an action, read formData, update the cookie object, and return data with Set-Cookie header: `return data(isOpen, { headers: { "Set-Cookie": await prefs.serialize(cookie) } });`

Optimistic UI with fetcher and cookies

When using cookies for state, employ optimistic UI by checking fetcher.formData to immediately reflect the UI change before the server responds. Example: `if (fetcher.formData?.has("sidebar")) { sidebarIsOpen = fetcher.formData.get("sidebar") === "open"; }`

Benefits of cookies over local storage

Cookies offer: (1) Server rendering—state is available on the server for rendering and server actions; (2) Single source of truth—eliminates state synchronization hassles; (3) Persistence—maintains state across page loads, component mounts/unmounts, and across devices with database-backed sessions; (4) Progressive enhancement—functions even before JavaScript loads.

Drawbacks of cookies

Cookies require more boilerplate code because of network requests and responses. State is not encapsulated to a single component; other parts of the app must be aware of the cookie.

Give your agent this brain