context

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

createContext function signature

createContext is a function that creates a type-safe RouterContext object. It has the signature: function createContext<T>(defaultValue?: T): RouterContext<T>. The defaultValue parameter is optional and specifies a default value that will be returned from context.get() when no value has been set for the context. If no defaultValue is provided, reading the context when no value has been set will throw an error.

createContext returns RouterContext

The createContext function returns a RouterContext object that can be used with context.get() and context.set() methods in actions, loaders, and middleware.

createContext usage in middleware

In middleware, you can set values in the RouterContext using context.set(contextObject, value). The contextObject is the RouterContext returned by createContext, and the value is the data to store. Example: context.set(userContext, user);

createContext usage in loaders

In loaders, you can retrieve values from the RouterContext using context.get(contextObject). The contextObject is the RouterContext returned by createContext. Example: const user = context.get(userContext);

createContext purpose and design

createContext creates a type-safe RouterContext object for storing and retrieving arbitrary values in actions, loaders, and middleware. It is similar to React's createContext but specifically designed for React Router's request/response lifecycle rather than component rendering.

createContext complete example

Example of createContext usage: In app/context.ts: import { createContext } from "react-router"; export const userContext = createContext<User | null>(null); In app/middleware/auth.ts: import { getUserFromSession } from "~/auth.server"; import { userContext } from "~/context"; export const authMiddleware = async ({ context, request }) => { const user = await getUserFromSession(request); context.set(userContext, user); }; In app/routes/profile.tsx: import { userContext } from "~/context"; export async function loader({ context }: Route.LoaderArgs) { const user = context.get(userContext); if (!user) { throw new Response("Unauthorized", { status: 401 }); } return { user }; }

createMemorySessionStorage function signature and return type

createMemorySessionStorage is a function that creates and returns a SessionStorage object for in-memory session storage. It accepts optional parameters of type MemorySessionStorageOptions (with a cookie property) and returns a SessionStorage object. The function is generic over Data and FlashData types, both defaulting to SessionData.

createMemorySessionStorage intended use cases

createMemorySessionStorage is intended for local development and testing. It does not scale beyond a single process, and all session data is lost when the server process stops or restarts.

createMemorySessionStorage generic type parameters

createMemorySessionStorage accepts two generic type parameters: Data (defaults to SessionData) and FlashData (defaults to Data). These define the types of session data and flash data stored in the SessionStorage object.

Give your agent this brain