What causes "The `useSlateSelector` hook must be used inside the component's context." in ianstormtaylor/slate?

Render the consuming component inside ...

ianstormtaylor/slate · error · Error

The `useSlateSelector` hook must be used inside the <Slate>

Error message

The `useSlateSelector` hook must be used inside the <Slate> component's context.

What it means

useSlateSelector requires SlateSelectorContext, which only <Slate> provides (its context exposes the change-event subscription API). Calling it — directly or via hooks like useSelected/useSlateSelection — outside a <Slate> subtree means there is no editor store to subscribe to, so it throws immediately.

Source

Thrown at packages/slate-react/src/hooks/use-slate-selector.tsx:55

 * type or for reference types (e.g. objects and arrays) add a custom equality
 * function.
 *
 * If `selector` is memoized using `useCallback`, then it will only be called
 * when it or the editor state changes. Otherwise, `selector` will be called
 * every time the component renders.
 *
 * @example
 * const isSelectionActive = useSlateSelector(editor => Boolean(editor.selection))
 */

export function useSlateSelector<T>(
  selector: (editor: Editor) => T,
  equalityFn: (a: T | null, b: T) => boolean = refEquality,
  { deferred }: SlateSelectorOptions = {}
): T {
  const context = useContext(SlateSelectorContext)
  if (!context) {
    throw new Error(
      `The \`useSlateSelector\` hook must be used inside the <Slate> component's context.`
    )
  }
  const { addEventListener } = context

  const editor = useSlateStatic()
  const genericSelector = useCallback(
    () => selector(editor),
    [editor, selector]
  )
  const [selectedState, update] = useGenericSelector(
    genericSelector,
    equalityFn
  )

  useIsomorphicLayoutEffect(() => {
    const unsubscribe = addEventListener(update, { deferred })
    update()

View on GitHub (pinned to 72a37c701e)

Solutions

Render the consuming component inside <Slate>...</Slate>
Create a test/Storybook wrapper that provides <Slate editor={...} initialValue={...}>
If only the static editor object is needed outside context, accept the editor as a prop instead of using context hooks

Example fix

// before
export const Leaf = props => { const selected = useSelected(); ... }
render(<Leaf .../>)

// after
render(
  <Slate editor={editor} initialValue={initialValue}>
    <Leaf .../>
  </Slate>
)

Defensive patterns

Strategy: validation

Validate before calling

// ensure consumers are children of <Slate>
<Slate editor={editor} initialValue={value}>
  <MyLeaf {...props} />
</Slate>

Prevention

Render useSelected/useSlateSelection consumers only under <Slate>
Wrap Storybook/RTL renders in a Slate provider decorator
Pass editor via props for truly out-of-tree components

When it happens

Trigger: Using useSelected(), useSlateSelection(), or useSlateSelector() in a component not rendered under <Slate>; rendering those components in tests or portals without the provider; importing leaf components in isolation (e.g. Storybook without the wrapper).

Common situations: Toolbar/leaf renderers used in isolation; RTL tests rendering single components; portals and external windows escaping the provider tree; refactors moving components above <Slate>.

Related errors

AI-assisted analysis of ianstormtaylor/slate@72a37c701e (2026-08-27). Data as JSON: /api/errors/1d53eabdd328cc1b. Report an issue: GitHub.