createContext

Creates a Context for sharing state with descendants of a Provider in the component tree.

The returned Context is itself a provider component — pass it a value prop to scope a value to its children. Read it inside descendants with useContext.

Two forms:

• createContext<T>() (default-less, the canonical form). Reading via useContext outside an enclosing Provider throws ContextNotFoundError. Use this for everything that carries reactive state — signals, stores, [state, actions] tuples, services. The Provider is mandatory by construction; the throw makes a missing Provider a loud bug instead of a silent no-op. The annotation <T> is required because there is no value to infer from.
• createContext<T>(defaultValue) (default form). Reserved for the narrow case of contexts whose value is a primitive with a meaningful static fallback (theme, locale, frozen config). Outside any Provider, useContext returns defaultValue.

If you want truly app-wide state, don't use Context — a module-scope signal/store is a global. Context is for scoping state to a subtree; that's why a Provider is required.

Import

import { createContext } from "solid-js";

Type signature

function createContext<T>(
  defaultValue?: T,
  options?: EffectOptions
): Context<T>;

Parameters

defaultValue

Optional default; only meaningful for primitive fallbacks. Omit for any context carrying reactive state.

options

{ name } for debugging in development

Return value

A context object that doubles as its own provider component

Examples

// Reactive payload — default-less, throws if no Provider.
type TodosCtx = readonly [Store<Todo[]>, TodoActions];
const TodosContext = createContext<TodosCtx>();

function App() {
  return (
    <TodosContext value={createTodos()}>
      <TodoList />
    </TodosContext>
  );
}

function TodoList() {
  const [todos, { addTodo }] = useContext(TodosContext); // typed as TodosCtx
  // ...
}

// Primitive default — falls back to "light" outside a Provider.
const ThemeContext = createContext<"light" | "dark">("light");

function Button() {
  const theme = useContext(ThemeContext); // "light" | "dark"
  return <button class={theme}>Click</button>;
}

Related types

ContextRecord

type ContextRecord = Record<string | symbol, unknown>;