{"record":{"id":"4ef757e71b61e21b","repo":"ianstormtaylor/slate","slug":"the-useelement-hook-must-be-used-inside-rendere","errorCode":null,"errorMessage":"The `useElement` hook must be used inside `renderElement`.","messagePattern":"The `useElement` hook must be used inside `renderElement`\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/slate-react/src/hooks/use-element.ts","lineNumber":14,"sourceCode":"import { createContext, useContext } from 'react'\nimport { Element } from 'slate'\n\nexport const ElementContext = createContext<Element | null>(null)\n\n/**\n * Get the current element.\n */\n\nexport const useElement = (): Element => {\n  const context = useContext(ElementContext)\n\n  if (!context) {\n    throw new Error(\n      'The `useElement` hook must be used inside `renderElement`.'\n    )\n  }\n\n  return context\n}\n\n/**\n * Get the current element, or return null if not inside `renderElement`.\n */\nexport const useElementIf = () => useContext(ElementContext)\n","sourceCodeStart":1,"sourceCodeEnd":26,"githubUrl":"https://github.com/ianstormtaylor/slate/blob/72a37c701e5da4bb13a305d416d9c070d19d3a45/packages/slate-react/src/hooks/use-element.ts#L1-L26","documentation":"useElement is a slate-react hook that returns the current Element via React context (ElementContext). That context is only provided by Slate's internal component that renders elements inside renderElement. Calling useElement outside a component that is rendered as part of renderElement means the context is undefined, so the hook throws to make the misuse obvious.","triggerScenarios":"Calling useElement() in a component rendered outside renderElement — e.g. inside renderLeaf, renderPlaceholder, a toolbar, or at the top level of your app; using it in a custom hook invoked from a non-Slate component.","commonSituations":"Copy-pasting a leaf component that also tries to read the element; refactoring element rendering so the component is no longer mounted via renderElement; using useElement in decorations rendering.","solutions":["Move the useElement() call into a component that is returned from your renderElement prop","Use useSelected()/useSlate() only if you don't need the element, or pass the element down as a prop instead","Double-check the component tree: useElement must be a descendant of the component Slate renders per element"],"exampleFix":"// before\nconst Leaf = props => {\n  const el = useElement() // throws: leaf components have no ElementContext\n  return <span {...props.attributes}>{props.children}</span>\n}\n\n// after\nconst Element = ({ attributes, children, element }) => {\n  const el = useElement() // ok: inside renderElement\n  return <p {...attributes}>{children}</p>\n}","handlingStrategy":"type-guard","validationCode":null,"typeGuard":"const useElementOrNull = () => {\n  const ctx = useContext(ElementContext)\n  return ctx // undefined when outside renderElement\n}","tryCatchPattern":null,"preventionTips":["Only call useElement in components returned by renderElement","Pass element as a prop when the component is used elsewhere","Prefer props.attributes/props.element given to renderElement components"],"tags":["slate-react","react-hooks","context","renderelement"],"backgroundTag":"react-hook-outside-provider","analyzedSha":"72a37c701e5da4bb13a305d416d9c070d19d3a45","analyzedAt":"2026-08-27T23:04:51.145Z","schemaVersion":2},"datasetVersion":"2026-08-28T00:17:15.603Z"}