diff --git a/packages/slate-react/src/components/editable.tsx b/packages/slate-react/src/components/editable.tsx
index ebac078c0..6c2598745 100644
--- a/packages/slate-react/src/components/editable.tsx
+++ b/packages/slate-react/src/components/editable.tsx
@@ -13,7 +13,7 @@ import { HistoryEditor } from 'slate-history'
 import throttle from 'lodash/throttle'
 import scrollIntoView from 'scroll-into-view-if-needed'
 
-import Children from './children'
+import useChildren from '../hooks/use-children'
 import Hotkeys from '../utils/hotkeys'
 import {
   IS_FIREFOX,
@@ -986,14 +986,14 @@ export const Editable = (props: EditableProps) => {
           [readOnly, attributes.onPaste]
         )}
       >
-        <Children
-          decorate={decorate}
-          decorations={decorations}
-          node={editor}
-          renderElement={renderElement}
-          renderLeaf={renderLeaf}
-          selection={editor.selection}
-        />
+        {useChildren({
+          decorate,
+          decorations,
+          node: editor,
+          renderElement,
+          renderLeaf,
+          selection: editor.selection,
+        })}
       </Component>
     </ReadOnlyContext.Provider>
   )
diff --git a/packages/slate-react/src/components/element.tsx b/packages/slate-react/src/components/element.tsx
index 8d35cb581..2a54737ac 100644
--- a/packages/slate-react/src/components/element.tsx
+++ b/packages/slate-react/src/components/element.tsx
@@ -3,7 +3,7 @@ import getDirection from 'direction'
 import { Editor, Node, Range, NodeEntry, Element as SlateElement } from 'slate'
 
 import Text from './text'
-import Children from './children'
+import useChildren from '../hooks/use-children'
 import { ReactEditor, useSlateStatic, useReadOnly } from '..'
 import { SelectedContext } from '../hooks/use-selected'
 import { useIsomorphicLayoutEffect } from '../hooks/use-isomorphic-layout-effect'
@@ -42,16 +42,14 @@ const Element = (props: {
   const isInline = editor.isInline(element)
   const key = ReactEditor.findKey(editor, element)
 
-  let children: JSX.Element | null = (
-    <Children
-      decorate={decorate}
-      decorations={decorations}
-      node={element}
-      renderElement={renderElement}
-      renderLeaf={renderLeaf}
-      selection={selection}
-    />
-  )
+  let children: JSX.Element | null = useChildren({
+    decorate,
+    decorations,
+    node: element,
+    renderElement,
+    renderLeaf,
+    selection,
+  })
 
   // Attributes that the developer must mix into the element in their
   // custom node renderer component.
diff --git a/packages/slate-react/src/components/children.tsx b/packages/slate-react/src/hooks/use-children.tsx
similarity index 86%
rename from packages/slate-react/src/components/children.tsx
rename to packages/slate-react/src/hooks/use-children.tsx
index 2c206c4cb..564c692d0 100644
--- a/packages/slate-react/src/components/children.tsx
+++ b/packages/slate-react/src/hooks/use-children.tsx
@@ -1,18 +1,18 @@
 import React from 'react'
 import { Editor, Range, Element, NodeEntry, Ancestor, Descendant } from 'slate'
 
-import ElementComponent from './element'
-import TextComponent from './text'
+import ElementComponent from '../components/element'
+import TextComponent from '../components/text'
 import { ReactEditor } from '..'
-import { useSlateStatic } from '../hooks/use-slate-static'
+import { useSlateStatic } from './use-slate-static'
 import { NODE_TO_INDEX, NODE_TO_PARENT } from '../utils/weak-maps'
-import { RenderElementProps, RenderLeafProps } from './editable'
+import { RenderElementProps, RenderLeafProps } from '../components/editable'
 
 /**
  * Children.
  */
 
-const Children = (props: {
+const useChildren = (props: {
   decorate: (entry: NodeEntry) => Range[]
   decorations: Range[]
   node: Ancestor
@@ -81,7 +81,7 @@ const Children = (props: {
     NODE_TO_PARENT.set(n, node)
   }
 
-  return <React.Fragment>{children}</React.Fragment>
+  return children
 }
 
-export default Children
+export default useChildren