useContext

Reads the current value of a context.

• For createContext<T>() (default-less): returns the value from the nearest enclosing Provider, or throws ContextNotFoundError if none is mounted. Return type is T (no narrowing required).
• For createContext<T>(defaultValue): returns the value from the nearest enclosing Provider, or defaultValue if none is mounted.

In Solid, useContext is the canonical way to read context. There is no need for a wrapper hook that throws on missing Provider — the default-less form already does that, and its return type is T.

Import

import { useContext } from "solid-js";

Type signature

function useContext<T>(context: Context<T>): T;

Parameters

context

• Type: Context<T>

A context returned from createContext

Return value

The value provided by the nearest enclosing Provider, or the default if one was supplied to createContext

Examples

const TodosContext = createContext<TodosCtx>();

function TodoList() {
  const [todos, { addTodo }] = useContext(TodosContext); // throws if no Provider
  // ...
  return null;
}

Caveats

• Call it in the component body or another owned scope. Calling it inside an event handler or after an await has no owner to read from.
• The value is whatever the nearest provider passed. Pass signals or stores, not their current values, to keep it reactive.

Learn more

• Context
• Components and JSX

Related types

ContextNotFoundError

class ContextNotFoundError extends Error {
  /**
   * In dev, a read site passes the context (and whether a provider above set
   * it to `undefined`) so the message can name it and say why it has no
   * value (#4181). Read through `arguments` so production — where the message
   * is empty — keeps the zero-parameter constructor byte for byte.
   */
  constructor(context?: { id: symbol }, providedUndefined?: boolean);
  constructor() {
    super(__DEV__ ? contextNotFoundMessage(arguments[0], arguments[1]) : "");
  }
}