{"record":{"id":"1d53eabdd328cc1b","repo":"ianstormtaylor/slate","slug":"the-useslateselector-hook-must-be-used-inside-th","errorCode":null,"errorMessage":"The `useSlateSelector` hook must be used inside the <Slate> component's context.","messagePattern":"The `useSlateSelector` hook must be used inside the <Slate> component's context\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/slate-react/src/hooks/use-slate-selector.tsx","lineNumber":55,"sourceCode":" * type or for reference types (e.g. objects and arrays) add a custom equality\n * function.\n *\n * If `selector` is memoized using `useCallback`, then it will only be called\n * when it or the editor state changes. Otherwise, `selector` will be called\n * every time the component renders.\n *\n * @example\n * const isSelectionActive = useSlateSelector(editor => Boolean(editor.selection))\n */\n\nexport function useSlateSelector<T>(\n  selector: (editor: Editor) => T,\n  equalityFn: (a: T | null, b: T) => boolean = refEquality,\n  { deferred }: SlateSelectorOptions = {}\n): T {\n  const context = useContext(SlateSelectorContext)\n  if (!context) {\n    throw new Error(\n      `The \\`useSlateSelector\\` hook must be used inside the <Slate> component's context.`\n    )\n  }\n  const { addEventListener } = context\n\n  const editor = useSlateStatic()\n  const genericSelector = useCallback(\n    () => selector(editor),\n    [editor, selector]\n  )\n  const [selectedState, update] = useGenericSelector(\n    genericSelector,\n    equalityFn\n  )\n\n  useIsomorphicLayoutEffect(() => {\n    const unsubscribe = addEventListener(update, { deferred })\n    update()","sourceCodeStart":37,"sourceCodeEnd":73,"githubUrl":"https://github.com/ianstormtaylor/slate/blob/72a37c701e5da4bb13a305d416d9c070d19d3a45/packages/slate-react/src/hooks/use-slate-selector.tsx#L37-L73","documentation":"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.","triggerScenarios":"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).","commonSituations":"Toolbar/leaf renderers used in isolation; RTL tests rendering single components; portals and external windows escaping the provider tree; refactors moving components above <Slate>.","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"],"exampleFix":"// before\nexport const Leaf = props => { const selected = useSelected(); ... }\nrender(<Leaf .../>)\n\n// after\nrender(\n  <Slate editor={editor} initialValue={initialValue}>\n    <Leaf .../>\n  </Slate>\n)","handlingStrategy":"validation","validationCode":"// ensure consumers are children of <Slate>\n<Slate editor={editor} initialValue={value}>\n  <MyLeaf {...props} />\n</Slate>","typeGuard":null,"tryCatchPattern":null,"preventionTips":["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"],"tags":["react","context","hooks","selector","provider","slate"],"backgroundTag":"missing-react-context-provider","analyzedSha":"72a37c701e5da4bb13a305d416d9c070d19d3a45","analyzedAt":"2026-08-27T23:04:51.145Z","schemaVersion":2},"datasetVersion":"2026-08-28T00:17:15.603Z"}