Component APIs

useContext

Used to grab context within a context provider scope to allow for deep passing of props without having to pass them through each Component function. It's therefore used in conjunction with createContext to consume the data from a context scope and thus avoid passing data through intermediate components (prop drilling).

Solid 2.0 Change

Context providers now use the context object directly as a component (<MyContext value={...}>) instead of the removed .Provider property (<MyContext.Provider value={...}>). See createContext for details.

const [state, { increment, decrement }] = useContext(CounterContext)

Recommended usage

It is often a good idea to wrap useContext in a function like so:

function useCounterContext() {
  const context = useContext(CounterContext)

  if (!context) {
    throw new Error("useCounterContext: cannot find a CounterContext")
  }

  return context
}

See the API reference of createContext for how to set up a context provider. And check the Context concepts for more information on how to architecture your contexts.

Type signature

import { type Context } from "solid-js"

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

Report an issue with this page