From 9892cf0ffbd741cc2880d1f0bd0d7c1b36145bbd Mon Sep 17 00:00:00 2001
From: Eric Meier <ericmeier@protonmail.com>
Date: Sun, 3 Apr 2022 16:52:32 +0100
Subject: [PATCH] Make onChange prop optional, update examples and docs to
 treat slate as uncontrolled (#4922)

* Make onChange prop optional, update examples and docs to treat slate as uncontrolled

* Add changeset
---
 .changeset/red-bottles-peel.md                |  5 ++
 docs/walkthroughs/01-installing-slate.md      | 70 +++++--------------
 docs/walkthroughs/02-adding-event-handlers.md | 45 ++++++------
 .../03-defining-custom-elements.md            | 60 ++++++++--------
 .../04-applying-custom-formatting.md          | 49 +++++++------
 docs/walkthroughs/05-executing-commands.md    | 45 ++++++------
 docs/walkthroughs/06-saving-to-a-database.md  | 50 ++++++-------
 packages/slate-react/src/components/slate.tsx |  7 +-
 site/examples/check-lists.tsx                 |  5 +-
 site/examples/code-highlighting.tsx           |  3 +-
 site/examples/custom-placeholder.tsx          | 19 +++--
 site/examples/embeds.tsx                      |  5 +-
 site/examples/forced-layout.tsx               |  5 +-
 site/examples/hovering-toolbar.tsx            |  5 +-
 site/examples/huge-document.tsx               |  5 +-
 site/examples/iframe.tsx                      |  3 +-
 site/examples/images.tsx                      |  5 +-
 site/examples/inlines.tsx                     |  9 +--
 site/examples/markdown-preview.tsx            |  7 +-
 site/examples/markdown-shortcuts.tsx          |  5 +-
 site/examples/mentions.tsx                    |  6 +-
 site/examples/paste-html.tsx                  |  5 +-
 site/examples/plaintext.tsx                   |  5 +-
 site/examples/read-only.tsx                   |  7 +-
 site/examples/richtext.tsx                    |  5 +-
 site/examples/scroll-into-view.tsx            |  5 +-
 site/examples/search-highlighting.tsx         |  3 +-
 site/examples/shadow-dom.tsx                  |  5 +-
 site/examples/tables.tsx                      |  5 +-
 29 files changed, 207 insertions(+), 246 deletions(-)
 create mode 100644 .changeset/red-bottles-peel.md

diff --git a/.changeset/red-bottles-peel.md b/.changeset/red-bottles-peel.md
new file mode 100644
index 0000000000..a087a3bddc
--- /dev/null
+++ b/.changeset/red-bottles-peel.md
@@ -0,0 +1,5 @@
+---
+'slate-react': patch
+---
+
+Make Slate component onChange optional
diff --git a/docs/walkthroughs/01-installing-slate.md b/docs/walkthroughs/01-installing-slate.md
index 7f4ea02aa1..75987f503c 100644
--- a/docs/walkthroughs/01-installing-slate.md
+++ b/docs/walkthroughs/01-installing-slate.md
@@ -66,53 +66,23 @@ declare module 'slate' {
 }
 ```
 
-```typescript
-// Also you must annotate `useState<Descendant[]>` and the editor's initial value.
-const App = () => {
-  const initialValue: CustomElement[] = []
-  const [value, setValue] = useState<Descendant[]>(initialValue)
-  return (
-    <Slate value={value} onChange={setValue}>
-      ...
-    </Slate>
-  )
-}
-```
-
-Next we want to create state for `value`:
-
-```jsx
-const App = () => {
-  const [editor] = useState(() => withReact(createEditor()))
-
-  // Keep track of state for the value of the editor.
-  const [value, setValue] = useState([])
-  return null
-}
-```
-
 Next up is to render a `<Slate>` context provider.
 
 The provider component keeps track of your Slate editor, its plugins, its value, its selection, and any changes that occur. It **must** be rendered above any `<Editable>` components. But it can also provide the editor state to other components like toolbars, menus, etc. using the `useSlate` hook.
 
 ```jsx
+const initialValue = []
+
 const App = () => {
   const [editor] = useState(() => withReact(createEditor()))
-  const [value, setValue] = useState([])
   // Render the Slate context.
-  return (
-    <Slate
-      editor={editor}
-      value={value}
-      onChange={newValue => setValue(newValue)}
-    />
-  )
+  return <Slate editor={editor} value={initialValue} />
 }
 ```
 
 You can think of the `<Slate>` component as providing a context to every component underneath it.
 
-> As of v0.67 the Slate Provider's "value" prop is now only used as initial state for editor.children. If your code relies on replacing editor.children you should do so by replacing it directly instead of relying on the "value" prop to do this for you. See [Slate PR 4540](https://github.com/ianstormtaylor/slate/pull/4540) for a more in-depth discussion.
+> Slate Provider's "value" prop is only used as initial state for editor.children. If your code relies on replacing editor.children you should do so by replacing it directly instead of relying on the "value" prop to do this for you. See [Slate PR 4540](https://github.com/ianstormtaylor/slate/pull/4540) for a more in-depth discussion.
 
 This is a slightly different mental model than things like `<input>` or `<textarea>`, because richtext documents are more complex. You'll often want to include toolbars, or live previews, or other complex components next to your editable content.
 
@@ -121,16 +91,14 @@ By having a shared context, those other components can execute commands, query t
 Okay, so the next step is to render the `<Editable>` component itself:
 
 ```jsx
+const initialValue = []
+
 const App = () => {
   const [editor] = useState(() => withReact(createEditor()))
   const [value, setValue] = useState([])
   return (
     // Add the editable component inside the context.
-    <Slate
-      editor={editor}
-      value={value}
-      onChange={newValue => setValue(newValue)}
-    >
+    <Slate editor={editor} value={initialValue}>
       <Editable />
     </Slate>
   )
@@ -144,22 +112,20 @@ There's only one last step. So far we've been using an empty `[]` array as the i
 The value is just plain JSON. Here's one containing a single paragraph block with some text in it:
 
 ```jsx
+// Add the initial value.
+const initialValue = [
+  {
+    type: 'paragraph',
+    children: [{ text: 'A line of text in a paragraph.' }],
+  },
+]
+
 const App = () => {
-  const [editor] = useState(() => withReact(createEditor()))
-  // Add the initial value when setting up our state.
-  const [value, setValue] = useState([
-    {
-      type: 'paragraph',
-      children: [{ text: 'A line of text in a paragraph.' }],
-    },
-  ])
+  const [editor] = useState(() => withReact(createEditor())
+  const [value, setValue] = useState()
 
   return (
-    <Slate
-      editor={editor}
-      value={value}
-      onChange={newValue => setValue(newValue)}
-    >
+    <Slate editor={editor} value={initialValue}>
       <Editable />
     </Slate>
   )
diff --git a/docs/walkthroughs/02-adding-event-handlers.md b/docs/walkthroughs/02-adding-event-handlers.md
index 00246ac8bd..6ab214b438 100644
--- a/docs/walkthroughs/02-adding-event-handlers.md
+++ b/docs/walkthroughs/02-adding-event-handlers.md
@@ -9,17 +9,18 @@ Let's use the `onKeyDown` handler to change the editor's content when we press a
 Here's our app from earlier:
 
 ```jsx
+const initialValue = [
+  {
+    type: 'paragraph',
+    children: [{ text: 'A line of text in a paragraph.' }],
+  },
+]
+
 const App = () => {
   const editor = useMemo(() => withReact(createEditor()), [])
-  const [value, setValue] = useState([
-    {
-      type: 'paragraph',
-      children: [{ text: 'A line of text in a paragraph.' }],
-    },
-  ])
 
   return (
-    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
+    <Slate editor={editor} value={initialValue}>
       <Editable />
     </Slate>
   )
@@ -29,17 +30,18 @@ const App = () => {
 Now we add an `onKeyDown` handler:
 
 ```jsx
+const initialValue = [
+  {
+    type: 'paragraph',
+    children: [{ text: 'A line of text in a paragraph.' }],
+  },
+]
+
 const App = () => {
   const editor = useMemo(() => withReact(createEditor()), [])
-  const [value, setValue] = useState([
-    {
-      type: 'paragraph',
-      children: [{ text: 'A line of text in a paragraph.' }],
-    },
-  ])
 
   return (
-    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
+    <Slate editor={editor} value={initialValue}>
       <Editable
         // Define a new handler which prints the key that was pressed.
         onKeyDown={event => {
@@ -58,17 +60,18 @@ Now we want to make it actually change the content. For the purposes of our exam
 Our `onKeyDown` handler might look like this:
 
 ```jsx
+const initialValue = [
+  {
+    type: 'paragraph',
+    children: [{ text: 'A line of text in a paragraph.' }],
+  },
+]
+
 const App = () => {
   const editor = useMemo(() => withReact(createEditor()), [])
-  const [value, setValue] = useState([
-    {
-      type: 'paragraph',
-      children: [{ text: 'A line of text in a paragraph.' }],
-    },
-  ])
 
   return (
-    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
+    <Slate editor={editor} value={initialValue}>
       <Editable
         onKeyDown={event => {
           if (event.key === '&') {
diff --git a/docs/walkthroughs/03-defining-custom-elements.md b/docs/walkthroughs/03-defining-custom-elements.md
index 5e7fde7b15..aad26742db 100644
--- a/docs/walkthroughs/03-defining-custom-elements.md
+++ b/docs/walkthroughs/03-defining-custom-elements.md
@@ -7,17 +7,18 @@ But that's not all you can do. Slate lets you define any type of custom blocks y
 We'll show you how. Let's start with our app from earlier:
 
 ```jsx
+const initialValue = [
+  {
+    type: 'paragraph',
+    children: [{ text: 'A line of text in a paragraph.' }],
+  },
+]
+
 const App = () => {
   const editor = useMemo(() => withReact(createEditor()), [])
-  const [value, setValue] = useState([
-    {
-      type: 'paragraph',
-      children: [{ text: 'A line of text in a paragraph.' }],
-    },
-  ])
 
   return (
-    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
+    <Slate editor={editor} value={initialValue}>
       <Editable
         onKeyDown={event => {
           if (event.key === '&') {
@@ -65,14 +66,15 @@ const DefaultElement = props => {
 Now, let's add that renderer to our `Editor`:
 
 ```jsx
+const initialValue = [
+  {
+    type: 'paragraph',
+    children: [{ text: 'A line of text in a paragraph.' }],
+  },
+]
+
 const App = () => {
   const editor = useMemo(() => withReact(createEditor()), [])
-  const [value, setValue] = useState([
-    {
-      type: 'paragraph',
-      children: [{ text: 'A line of text in a paragraph.' }],
-    },
-  ])
 
   // Define a rendering function based on the element passed to `props`. We use
   // `useCallback` here to memoize the function for subsequent renders.
@@ -86,7 +88,7 @@ const App = () => {
   }, [])
 
   return (
-    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
+    <Slate editor={editor} value={initialValue}>
       <Editable
         // Pass in the `renderElement` function.
         renderElement={renderElement}
@@ -120,14 +122,15 @@ Okay, but now we'll need a way for the user to actually turn a block into a code
 // Import the `Editor` and `Transforms` helpers from Slate.
 import { Editor, Transforms } from 'slate'
 
+const initialValue = [
+  {
+    type: 'paragraph',
+    children: [{ text: 'A line of text in a paragraph.' }],
+  },
+]
+
 const App = () => {
   const editor = useMemo(() => withReact(createEditor()), [])
-  const [value, setValue] = useState([
-    {
-      type: 'paragraph',
-      children: [{ text: 'A line of text in a paragraph.' }],
-    },
-  ])
 
   const renderElement = useCallback(props => {
     switch (props.element.type) {
@@ -139,7 +142,7 @@ const App = () => {
   }, [])
 
   return (
-    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
+    <Slate editor={editor} value={initialValue}>
       <Editable
         renderElement={renderElement}
         onKeyDown={event => {
@@ -177,14 +180,15 @@ Now, if you press ``Ctrl-``` the block your cursor is in should turn into a code
 But we forgot one thing. When you hit ``Ctrl-``` again, it should change the code block back into a paragraph. To do that, we'll need to add a bit of logic to change the type we set based on whether any of the currently selected blocks are already a code block:
 
 ```jsx
+const initialValue = [
+  {
+    type: 'paragraph',
+    children: [{ text: 'A line of text in a paragraph.' }],
+  },
+]
+
 const App = () => {
   const editor = useMemo(() => withReact(createEditor()), [])
-  const [value, setValue] = useState([
-    {
-      type: 'paragraph',
-      children: [{ text: 'A line of text in a paragraph.' }],
-    },
-  ])
 
   const renderElement = useCallback(props => {
     switch (props.element.type) {
@@ -196,7 +200,7 @@ const App = () => {
   }, [])
 
   return (
-    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
+    <Slate editor={editor} value={initialValue}>
       <Editable
         renderElement={renderElement}
         onKeyDown={event => {
diff --git a/docs/walkthroughs/04-applying-custom-formatting.md b/docs/walkthroughs/04-applying-custom-formatting.md
index c00958b376..7872398ffe 100644
--- a/docs/walkthroughs/04-applying-custom-formatting.md
+++ b/docs/walkthroughs/04-applying-custom-formatting.md
@@ -7,26 +7,27 @@ In this guide, we'll show you how to add custom formatting options, like **bold*
 So we start with our app from earlier:
 
 ```jsx
-const renderElement = (props) => {
+const renderElement = props => {
   switch (props.element.type) {
     case 'code':
       return <CodeElement {...props} />
     default:
       return <DefaultElement {...props} />
   }
-})
+}
+
+const initialValue = [
+  {
+    type: 'paragraph',
+    children: [{ text: 'A line of text in a paragraph.' }],
+  },
+]
 
 const App = () => {
   const editor = useMemo(() => withReact(createEditor()), [])
-  const [value, setValue] = useState([
-    {
-      type: 'paragraph',
-      children: [{ text: 'A line of text in a paragraph.' }],
-    },
-  ])
 
   return (
-    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
+    <Slate editor={editor} value={initialValue}>
       <Editable
         renderElement={renderElement}
         onKeyDown={event => {
@@ -52,14 +53,15 @@ const App = () => {
 And now, we'll edit the `onKeyDown` handler to make it so that when you press `control-B`, it will add a `bold` format to the currently selected text:
 
 ```jsx
+const initialValue = [
+  {
+    type: 'paragraph',
+    children: [{ text: 'A line of text in a paragraph.' }],
+  },
+]
+
 const App = () => {
   const editor = useMemo(() => withReact(createEditor()), [])
-  const [value, setValue] = useState([
-    {
-      type: 'paragraph',
-      children: [{ text: 'A line of text in a paragraph.' }],
-    },
-  ])
 
   const renderElement = useCallback(props => {
     switch (props.element.type) {
@@ -71,7 +73,7 @@ const App = () => {
   }, [])
 
   return (
-    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
+    <Slate editor={editor} value={value}>
       <Editable
         renderElement={renderElement}
         onKeyDown={event => {
@@ -137,14 +139,15 @@ Pretty familiar, right?
 And now, let's tell Slate about that leaf. To do that, we'll pass in the `renderLeaf` prop to our editor.
 
 ```jsx
+const initialValue = [
+  {
+    type: 'paragraph',
+    children: [{ text: 'A line of text in a paragraph.' }],
+  },
+]
+
 const App = () => {
   const editor = useMemo(() => withReact(createEditor()), [])
-  const [value, setValue] = useState([
-    {
-      type: 'paragraph',
-      children: [{ text: 'A line of text in a paragraph.' }],
-    },
-  ])
 
   const renderElement = useCallback(props => {
     switch (props.element.type) {
@@ -161,7 +164,7 @@ const App = () => {
   }, [])
 
   return (
-    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
+    <Slate editor={editor} value={initialValue}>
       <Editable
         renderElement={renderElement}
         // Pass in the `renderLeaf` function.
diff --git a/docs/walkthroughs/05-executing-commands.md b/docs/walkthroughs/05-executing-commands.md
index d295ba939e..9ff08029dd 100644
--- a/docs/walkthroughs/05-executing-commands.md
+++ b/docs/walkthroughs/05-executing-commands.md
@@ -11,14 +11,15 @@ Let's see how this works.
 We'll start with our app from earlier:
 
 ```jsx
+const initialValue = [
+  {
+    type: 'paragraph',
+    children: [{ text: 'A line of text in a paragraph.' }],
+  },
+]
+
 const App = () => {
   const editor = useMemo(() => withReact(createEditor()), [])
-  const [value, setValue] = useState([
-    {
-      type: 'paragraph',
-      children: [{ text: 'A line of text in a paragraph.' }],
-    },
-  ])
 
   const renderElement = useCallback(props => {
     switch (props.element.type) {
@@ -34,7 +35,7 @@ const App = () => {
   }, [])
 
   return (
-    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
+    <Slate editor={editor} value={initialValue}>
       <Editable
         renderElement={renderElement}
         renderLeaf={renderLeaf}
@@ -117,14 +118,15 @@ const CustomEditor = {
   },
 }
 
+const initialValue = [
+  {
+    type: 'paragraph',
+    children: [{ text: 'A line of text in a paragraph.' }],
+  },
+]
+
 const App = () => {
   const editor = useMemo(() => withReact(createEditor()), [])
-  const [value, setValue] = useState([
-    {
-      type: 'paragraph',
-      children: [{ text: 'A line of text in a paragraph.' }],
-    },
-  ])
 
   const renderElement = useCallback(props => {
     switch (props.element.type) {
@@ -140,7 +142,7 @@ const App = () => {
   }, [])
 
   return (
-    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
+    <Slate editor={editor} value={initialValue}>
       <Editable
         renderElement={renderElement}
         renderLeaf={renderLeaf}
@@ -173,14 +175,15 @@ const App = () => {
 Now our commands are clearly defined and you can invoke them from anywhere we have access to our `editor` object. For example, from hypothetical toolbar buttons:
 
 ```jsx
+const initialValue = [
+  {
+    type: 'paragraph',
+    children: [{ text: 'A line of text in a paragraph.' }],
+  },
+]
+
 const App = () => {
   const editor = useMemo(() => withReact(createEditor()), [])
-  const [value, setValue] = useState([
-    {
-      type: 'paragraph',
-      children: [{ text: 'A line of text in a paragraph.' }],
-    },
-  ])
 
   const renderElement = useCallback(props => {
     switch (props.element.type) {
@@ -197,7 +200,7 @@ const App = () => {
 
   return (
     // Add a toolbar with buttons that call the same methods.
-    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
+    <Slate editor={editor} value={initialValue}>
       <div>
         <button
           onMouseDown={event => {
diff --git a/docs/walkthroughs/06-saving-to-a-database.md b/docs/walkthroughs/06-saving-to-a-database.md
index 48dc91abe3..03a255c5e2 100644
--- a/docs/walkthroughs/06-saving-to-a-database.md
+++ b/docs/walkthroughs/06-saving-to-a-database.md
@@ -7,17 +7,18 @@ In this guide, we'll show you how to add logic to save your Slate content to a d
 Let's start with a basic editor:
 
 ```jsx
+const initialValue = [
+  {
+    type: 'paragraph',
+    children: [{ text: 'A line of text in a paragraph.' }],
+  },
+]
+
 const App = () => {
   const editor = useMemo(() => withReact(createEditor()), [])
-  const [value, setValue] = useState([
-    {
-      type: 'paragraph',
-      children: [{ text: 'A line of text in a paragraph.' }],
-    },
-  ])
 
   return (
-    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
+    <Slate editor={editor} value={initialValue}>
       <Editable />
     </Slate>
   )
@@ -31,22 +32,21 @@ What we need to do is save the changes you make somewhere. For this example, we'
 So, in our `onChange` handler, we need to save the `value` if anything besides the selection was changed:
 
 ```jsx
+const initialValue = [
+  {
+    type: 'paragraph',
+    children: [{ text: 'A line of text in a paragraph.' }],
+  },
+]
+
 const App = () => {
   const editor = useMemo(() => withReact(createEditor()), [])
-  const [value, setValue] = useState([
-    {
-      type: 'paragraph',
-      children: [{ text: 'A line of text in a paragraph.' }],
-    },
-  ])
 
   return (
     <Slate
       editor={editor}
-      value={value}
+      value={initialValue}
       onChange={value => {
-        setValue(value)
-
         const isAstChange = editor.operations.some(
           op => 'set_selection' !== op.type
         )
@@ -71,21 +71,21 @@ But... if you refresh the page, everything is still reset. That's because we nee
 const App = () => {
   const editor = useMemo(() => withReact(createEditor()), [])
   // Update the initial content to be pulled from Local Storage if it exists.
-  const [value, setValue] = useState(
+  const initialValue = useMemo(
     JSON.parse(localStorage.getItem('content')) || [
       {
         type: 'paragraph',
         children: [{ text: 'A line of text in a paragraph.' }],
       },
-    ]
+    ],
+    []
   )
 
   return (
     <Slate
       editor={editor}
-      value={value}
+      value={initialValue}
       onChange={value => {
-        setValue(value)
         const isAstChange = editor.operations.some(
           op => 'set_selection' !== op.type
         )
@@ -136,16 +136,16 @@ const deserialize = string => {
 const App = () => {
   const editor = useMemo(() => withReact(createEditor()), [])
   // Use our deserializing function to read the data from Local Storage.
-  const [value, setValue] = useState(
-    deserialize(localStorage.getItem('content')) || ''
+  const initialValue = useMemo(
+    deserialize(localStorage.getItem('content')) || '',
+    []
   )
 
   return (
     <Slate
       editor={editor}
-      value={value}
+      value={initialValue}
       onChange={value => {
-        setValue(value)
         const isAstChange = editor.operations.some(
           op => 'set_selection' !== op.type
         )
@@ -167,7 +167,7 @@ You can emulate this strategy for any format you like. You can serialize to HTML
 
 > 🤖 Note that even though you _can_ serialize your content however you like, there are tradeoffs. The serialization process has a cost itself, and certain formats may be harder to work with than others. In general we recommend writing your own format only if your use case has a specific need for it. Otherwise, you're often better leaving the data in the format Slate uses.
 
-If you want to update the editor's content in response to events from outside of slate, you need to change the children property directly. The simplest way is to replace the value of editor.children `editor.children = newValue` and trigger a re-rendering (e.g. by calling `setValue(newValue)` in the example above). Alternatively, you can use slate's internal operations to transform the value, for example:
+If you want to update the editor's content in response to events from outside of slate, you need to change the children property directly. The simplest way is to replace the value of editor.children `editor.children = newValue` and trigger a re-rendering (e.g. by calling `editor.onChange()` in the example above). Alternatively, you can use slate's internal operations to transform the value, for example:
 
 ```javascript
   /**
diff --git a/packages/slate-react/src/components/slate.tsx b/packages/slate-react/src/components/slate.tsx
index ddaea451f3..a963184846 100644
--- a/packages/slate-react/src/components/slate.tsx
+++ b/packages/slate-react/src/components/slate.tsx
@@ -20,7 +20,7 @@ export const Slate = (props: {
   editor: ReactEditor
   value: Descendant[]
   children: React.ReactNode
-  onChange: (value: Descendant[]) => void
+  onChange?: (value: Descendant[]) => void
 }) => {
   const { editor, children, onChange, value, ...rest } = props
   const unmountRef = useRef(false)
@@ -48,7 +48,10 @@ export const Slate = (props: {
   } = getSelectorContext(editor)
 
   const onContextChange = useCallback(() => {
-    onChange(editor.children)
+    if (onChange) {
+      onChange(editor.children)
+    }
+
     setContext([editor])
     handleSelectorChange(editor)
   }, [onChange])
diff --git a/site/examples/check-lists.tsx b/site/examples/check-lists.tsx
index 4ab5fae1b1..5ae76e3e30 100644
--- a/site/examples/check-lists.tsx
+++ b/site/examples/check-lists.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useCallback } from 'react'
+import React, { useMemo, useCallback } from 'react'
 import {
   Slate,
   Editable,
@@ -66,7 +66,6 @@ const initialValue: Descendant[] = [
 ]
 
 const CheckListsExample = () => {
-  const [value, setValue] = useState<Descendant[]>(initialValue)
   const renderElement = useCallback(props => <Element {...props} />, [])
   const editor = useMemo(
     () => withChecklists(withHistory(withReact(createEditor()))),
@@ -74,7 +73,7 @@ const CheckListsExample = () => {
   )
 
   return (
-    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
+    <Slate editor={editor} value={initialValue}>
       <Editable
         renderElement={renderElement}
         placeholder="Get to work…"
diff --git a/site/examples/code-highlighting.tsx b/site/examples/code-highlighting.tsx
index c7d7cfc10b..655eedd6b6 100644
--- a/site/examples/code-highlighting.tsx
+++ b/site/examples/code-highlighting.tsx
@@ -10,7 +10,6 @@ import { withHistory } from 'slate-history'
 import { css } from '@emotion/css'
 
 const CodeHighlightingExample = () => {
-  const [value, setValue] = useState<Descendant[]>(initialValue)
   const [language, setLanguage] = useState('html')
   const renderLeaf = useCallback(props => <Leaf {...props} />, [])
   const editor = useMemo(() => withHistory(withReact(createEditor())), [])
@@ -46,7 +45,7 @@ const CodeHighlightingExample = () => {
   )
 
   return (
-    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
+    <Slate editor={editor} value={initialValue}>
       <div
         contentEditable={false}
         style={{ position: 'relative', top: '5px', right: '5px' }}
diff --git a/site/examples/custom-placeholder.tsx b/site/examples/custom-placeholder.tsx
index 9181e633d8..0a1c022c01 100644
--- a/site/examples/custom-placeholder.tsx
+++ b/site/examples/custom-placeholder.tsx
@@ -1,13 +1,19 @@
-import React, { useState, useMemo } from 'react'
+import React, { useMemo } from 'react'
 import { createEditor, Descendant } from 'slate'
 import { Slate, Editable, withReact } from 'slate-react'
 import { withHistory } from 'slate-history'
 
+const initialValue: Descendant[] = [
+  {
+    type: 'paragraph',
+    children: [{ text: '' }],
+  },
+]
+
 const PlainTextExample = () => {
-  const [value, setValue] = useState<Descendant[]>(initialValue)
   const editor = useMemo(() => withHistory(withReact(createEditor())), [])
   return (
-    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
+    <Slate editor={editor} value={initialValue}>
       <Editable
         placeholder="Type something"
         renderPlaceholder={({ children, attributes }) => (
@@ -24,11 +30,4 @@ const PlainTextExample = () => {
   )
 }
 
-const initialValue: Descendant[] = [
-  {
-    type: 'paragraph',
-    children: [{ text: '' }],
-  },
-]
-
 export default PlainTextExample
diff --git a/site/examples/embeds.tsx b/site/examples/embeds.tsx
index e6d7bd1c34..4e86ed945e 100644
--- a/site/examples/embeds.tsx
+++ b/site/examples/embeds.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useMemo } from 'react'
+import React, { useMemo } from 'react'
 import {
   Transforms,
   createEditor,
@@ -14,10 +14,9 @@ import {
 } from 'slate-react'
 
 const EmbedsExample = () => {
-  const [value, setValue] = useState<Descendant[]>(initialValue)
   const editor = useMemo(() => withEmbeds(withReact(createEditor())), [])
   return (
-    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
+    <Slate editor={editor} value={initialValue}>
       <Editable
         renderElement={props => <Element {...props} />}
         placeholder="Enter some text..."
diff --git a/site/examples/forced-layout.tsx b/site/examples/forced-layout.tsx
index ea3eae31d2..2ec9bb135c 100644
--- a/site/examples/forced-layout.tsx
+++ b/site/examples/forced-layout.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useMemo } from 'react'
+import React, { useCallback, useMemo } from 'react'
 import { Slate, Editable, withReact } from 'slate-react'
 import {
   Transforms,
@@ -64,14 +64,13 @@ const withLayout = editor => {
 }
 
 const ForcedLayoutExample = () => {
-  const [value, setValue] = useState<Descendant[]>(initialValue)
   const renderElement = useCallback(props => <Element {...props} />, [])
   const editor = useMemo(
     () => withLayout(withHistory(withReact(createEditor()))),
     []
   )
   return (
-    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
+    <Slate editor={editor} value={initialValue}>
       <Editable
         renderElement={renderElement}
         placeholder="Enter a title…"
diff --git a/site/examples/hovering-toolbar.tsx b/site/examples/hovering-toolbar.tsx
index bb04b7b9ad..d8b4e2e29e 100644
--- a/site/examples/hovering-toolbar.tsx
+++ b/site/examples/hovering-toolbar.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useRef, useEffect } from 'react'
+import React, { useMemo, useRef, useEffect } from 'react'
 import { Slate, Editable, withReact, useSlate, useFocused } from 'slate-react'
 import {
   Editor,
@@ -14,11 +14,10 @@ import { withHistory } from 'slate-history'
 import { Button, Icon, Menu, Portal } from '../components'
 
 const HoveringMenuExample = () => {
-  const [value, setValue] = useState<Descendant[]>(initialValue)
   const editor = useMemo(() => withHistory(withReact(createEditor())), [])
 
   return (
-    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
+    <Slate editor={editor} value={initialValue}>
       <HoveringToolbar />
       <Editable
         renderLeaf={props => <Leaf {...props} />}
diff --git a/site/examples/huge-document.tsx b/site/examples/huge-document.tsx
index 20746e9990..6d4b91b343 100644
--- a/site/examples/huge-document.tsx
+++ b/site/examples/huge-document.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useCallback } from 'react'
+import React, { useMemo, useCallback } from 'react'
 import faker from 'faker'
 import { createEditor, Descendant } from 'slate'
 import { Slate, Editable, withReact } from 'slate-react'
@@ -22,11 +22,10 @@ for (let h = 0; h < HEADINGS; h++) {
 }
 
 const HugeDocumentExample = () => {
-  const [value, setValue] = useState<Descendant[]>(initialValue)
   const renderElement = useCallback(props => <Element {...props} />, [])
   const editor = useMemo(() => withReact(createEditor()), [])
   return (
-    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
+    <Slate editor={editor} value={initialValue}>
       <Editable renderElement={renderElement} spellCheck autoFocus />
     </Slate>
   )
diff --git a/site/examples/iframe.tsx b/site/examples/iframe.tsx
index 7898633755..b15247bb67 100644
--- a/site/examples/iframe.tsx
+++ b/site/examples/iframe.tsx
@@ -15,7 +15,6 @@ const HOTKEYS = {
 }
 
 const IFrameExample = () => {
-  const [value, setValue] = useState<Descendant[]>(initialValue)
   const renderElement = useCallback(
     ({ attributes, children }) => <p {...attributes}>{children}</p>,
     []
@@ -26,7 +25,7 @@ const IFrameExample = () => {
   const handleBlur = useCallback(() => ReactEditor.deselect(editor), [editor])
 
   return (
-    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
+    <Slate editor={editor} value={initialValue}>
       <Toolbar>
         <MarkButton format="bold" icon="format_bold" />
         <MarkButton format="italic" icon="format_italic" />
diff --git a/site/examples/images.tsx b/site/examples/images.tsx
index f7003d7286..6bdb959ccf 100644
--- a/site/examples/images.tsx
+++ b/site/examples/images.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useMemo } from 'react'
+import React, { useMemo } from 'react'
 import imageExtensions from 'image-extensions'
 import isUrl from 'is-url'
 import { Transforms, createEditor, Descendant } from 'slate'
@@ -18,14 +18,13 @@ import { Button, Icon, Toolbar } from '../components'
 import { ImageElement } from './custom-types'
 
 const ImagesExample = () => {
-  const [value, setValue] = useState<Descendant[]>(initialValue)
   const editor = useMemo(
     () => withImages(withHistory(withReact(createEditor()))),
     []
   )
 
   return (
-    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
+    <Slate editor={editor} value={initialValue}>
       <Toolbar>
         <InsertImageButton />
       </Toolbar>
diff --git a/site/examples/inlines.tsx b/site/examples/inlines.tsx
index a54b2e4c6c..db1d20055a 100644
--- a/site/examples/inlines.tsx
+++ b/site/examples/inlines.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useMemo } from 'react'
+import React, { useMemo } from 'react'
 import isUrl from 'is-url'
 import { isKeyHotkey } from 'is-hotkey'
 import { css } from '@emotion/css'
@@ -61,7 +61,6 @@ const initialValue: Descendant[] = [
   },
 ]
 const InlinesExample = () => {
-  const [value, setValue] = useState<Descendant[]>(initialValue)
   const editor = useMemo(
     () => withInlines(withHistory(withReact(createEditor()))),
     []
@@ -92,11 +91,7 @@ const InlinesExample = () => {
   }
 
   return (
-    <SlateReact.Slate
-      editor={editor}
-      value={value}
-      onChange={value => setValue(value)}
-    >
+    <SlateReact.Slate editor={editor} value={initialValue}>
       <Toolbar>
         <AddLinkButton />
         <RemoveLinkButton />
diff --git a/site/examples/markdown-preview.tsx b/site/examples/markdown-preview.tsx
index 5dc42f7dc1..78811540f7 100644
--- a/site/examples/markdown-preview.tsx
+++ b/site/examples/markdown-preview.tsx
@@ -1,7 +1,7 @@
 import Prism from 'prismjs'
-import React, { useState, useCallback, useMemo } from 'react'
+import React, { useCallback, useMemo } from 'react'
 import { Slate, Editable, withReact } from 'slate-react'
-import { Text, createEditor, Element, Descendant } from 'slate'
+import { Text, createEditor, Descendant } from 'slate'
 import { withHistory } from 'slate-history'
 import { css } from '@emotion/css'
 
@@ -9,7 +9,6 @@ import { css } from '@emotion/css'
 ;Prism.languages.markdown=Prism.languages.extend("markup",{}),Prism.languages.insertBefore("markdown","prolog",{blockquote:{pattern:/^>(?:[\t ]*>)*/m,alias:"punctuation"},code:[{pattern:/^(?: {4}|\t).+/m,alias:"keyword"},{pattern:/``.+?``|`[^`\n]+`/,alias:"keyword"}],title:[{pattern:/\w+.*(?:\r?\n|\r)(?:==+|--+)/,alias:"important",inside:{punctuation:/==+$|--+$/}},{pattern:/(^\s*)#+.+/m,lookbehind:!0,alias:"important",inside:{punctuation:/^#+|#+$/}}],hr:{pattern:/(^\s*)([*-])([\t ]*\2){2,}(?=\s*$)/m,lookbehind:!0,alias:"punctuation"},list:{pattern:/(^\s*)(?:[*+-]|\d+\.)(?=[\t ].)/m,lookbehind:!0,alias:"punctuation"},"url-reference":{pattern:/!?\[[^\]]+\]:[\t ]+(?:\S+|<(?:\\.|[^>\\])+>)(?:[\t ]+(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\)))?/,inside:{variable:{pattern:/^(!?\[)[^\]]+/,lookbehind:!0},string:/(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\))$/,punctuation:/^[\[\]!:]|[<>]/},alias:"url"},bold:{pattern:/(^|[^\\])(\*\*|__)(?:(?:\r?\n|\r)(?!\r?\n|\r)|.)+?\2/,lookbehind:!0,inside:{punctuation:/^\*\*|^__|\*\*$|__$/}},italic:{pattern:/(^|[^\\])([*_])(?:(?:\r?\n|\r)(?!\r?\n|\r)|.)+?\2/,lookbehind:!0,inside:{punctuation:/^[*_]|[*_]$/}},url:{pattern:/!?\[[^\]]+\](?:\([^\s)]+(?:[\t ]+"(?:\\.|[^"\\])*")?\)| ?\[[^\]\n]*\])/,inside:{variable:{pattern:/(!?\[)[^\]]+(?=\]$)/,lookbehind:!0},string:{pattern:/"(?:\\.|[^"\\])*"(?=\)$)/}}}}),Prism.languages.markdown.bold.inside.url=Prism.util.clone(Prism.languages.markdown.url),Prism.languages.markdown.italic.inside.url=Prism.util.clone(Prism.languages.markdown.url),Prism.languages.markdown.bold.inside.italic=Prism.util.clone(Prism.languages.markdown.italic),Prism.languages.markdown.italic.inside.bold=Prism.util.clone(Prism.languages.markdown.bold); // prettier-ignore
 
 const MarkdownPreviewExample = () => {
-  const [value, setValue] = useState<Descendant[]>(initialValue)
   const renderLeaf = useCallback(props => <Leaf {...props} />, [])
   const editor = useMemo(() => withHistory(withReact(createEditor())), [])
   const decorate = useCallback(([node, path]) => {
@@ -51,7 +50,7 @@ const MarkdownPreviewExample = () => {
   }, [])
 
   return (
-    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
+    <Slate editor={editor} value={initialValue}>
       <Editable
         decorate={decorate}
         renderLeaf={renderLeaf}
diff --git a/site/examples/markdown-shortcuts.tsx b/site/examples/markdown-shortcuts.tsx
index d648e67993..80e5f16729 100644
--- a/site/examples/markdown-shortcuts.tsx
+++ b/site/examples/markdown-shortcuts.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useMemo } from 'react'
+import React, { useCallback, useMemo } from 'react'
 import { Slate, Editable, withReact } from 'slate-react'
 import {
   Editor,
@@ -26,14 +26,13 @@ const SHORTCUTS = {
 }
 
 const MarkdownShortcutsExample = () => {
-  const [value, setValue] = useState<Descendant[]>(initialValue)
   const renderElement = useCallback(props => <Element {...props} />, [])
   const editor = useMemo(
     () => withShortcuts(withReact(withHistory(createEditor()))),
     []
   )
   return (
-    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
+    <Slate editor={editor} value={initialValue}>
       <Editable
         renderElement={renderElement}
         placeholder="Write some markdown..."
diff --git a/site/examples/mentions.tsx b/site/examples/mentions.tsx
index 44d56e9891..2d03fbaaf3 100644
--- a/site/examples/mentions.tsx
+++ b/site/examples/mentions.tsx
@@ -15,7 +15,6 @@ import { MentionElement } from './custom-types'
 
 const MentionExample = () => {
   const ref = useRef<HTMLDivElement | null>()
-  const [value, setValue] = useState<Descendant[]>(initialValue)
   const [target, setTarget] = useState<Range | undefined>()
   const [index, setIndex] = useState(0)
   const [search, setSearch] = useState('')
@@ -73,9 +72,8 @@ const MentionExample = () => {
   return (
     <Slate
       editor={editor}
-      value={value}
-      onChange={value => {
-        setValue(value)
+      value={initialValue}
+      onChange={() => {
         const { selection } = editor
 
         if (selection && Range.isCollapsed(selection)) {
diff --git a/site/examples/paste-html.tsx b/site/examples/paste-html.tsx
index 15f313ffd0..a3feceaf53 100644
--- a/site/examples/paste-html.tsx
+++ b/site/examples/paste-html.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useMemo } from 'react'
+import React, { useCallback, useMemo } from 'react'
 import { jsx } from 'slate-hyperscript'
 import { Transforms, createEditor, Descendant } from 'slate'
 import { withHistory } from 'slate-history'
@@ -84,7 +84,6 @@ export const deserialize = el => {
 }
 
 const PasteHtmlExample = () => {
-  const [value, setValue] = useState<Descendant[]>(initialValue)
   const renderElement = useCallback(props => <Element {...props} />, [])
   const renderLeaf = useCallback(props => <Leaf {...props} />, [])
   const editor = useMemo(
@@ -92,7 +91,7 @@ const PasteHtmlExample = () => {
     []
   )
   return (
-    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
+    <Slate editor={editor} value={initialValue}>
       <Editable
         renderElement={renderElement}
         renderLeaf={renderLeaf}
diff --git a/site/examples/plaintext.tsx b/site/examples/plaintext.tsx
index 9ba20dda7f..f4be6913e1 100644
--- a/site/examples/plaintext.tsx
+++ b/site/examples/plaintext.tsx
@@ -1,13 +1,12 @@
-import React, { useState, useMemo } from 'react'
+import React, { useMemo } from 'react'
 import { createEditor, Descendant } from 'slate'
 import { Slate, Editable, withReact } from 'slate-react'
 import { withHistory } from 'slate-history'
 
 const PlainTextExample = () => {
-  const [value, setValue] = useState<Descendant[]>(initialValue)
   const editor = useMemo(() => withHistory(withReact(createEditor())), [])
   return (
-    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
+    <Slate editor={editor} value={initialValue}>
       <Editable placeholder="Enter some plain text..." />
     </Slate>
   )
diff --git a/site/examples/read-only.tsx b/site/examples/read-only.tsx
index 566b9e32cf..f17060e1b9 100644
--- a/site/examples/read-only.tsx
+++ b/site/examples/read-only.tsx
@@ -1,12 +1,11 @@
-import React, { useState, useMemo } from 'react'
-import { createEditor, Descendant, Element } from 'slate'
+import React, { useMemo } from 'react'
+import { createEditor, Descendant } from 'slate'
 import { Slate, Editable, withReact } from 'slate-react'
 
 const ReadOnlyExample = () => {
-  const [value, setValue] = useState<Descendant[]>(initialValue)
   const editor = useMemo(() => withReact(createEditor()), [])
   return (
-    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
+    <Slate editor={editor} value={initialValue}>
       <Editable readOnly placeholder="Enter some plain text..." />
     </Slate>
   )
diff --git a/site/examples/richtext.tsx b/site/examples/richtext.tsx
index cc1d4f19d3..09a90adae9 100644
--- a/site/examples/richtext.tsx
+++ b/site/examples/richtext.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState } from 'react'
+import React, { useCallback, useMemo } from 'react'
 import isHotkey from 'is-hotkey'
 import { Editable, withReact, useSlate, Slate } from 'slate-react'
 import {
@@ -23,13 +23,12 @@ const LIST_TYPES = ['numbered-list', 'bulleted-list']
 const TEXT_ALIGN_TYPES = ['left', 'center', 'right', 'justify']
 
 const RichTextExample = () => {
-  const [value, setValue] = useState<Descendant[]>(initialValue)
   const renderElement = useCallback(props => <Element {...props} />, [])
   const renderLeaf = useCallback(props => <Leaf {...props} />, [])
   const editor = useMemo(() => withHistory(withReact(createEditor())), [])
 
   return (
-    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
+    <Slate editor={editor} value={initialValue}>
       <Toolbar>
         <MarkButton format="bold" icon="format_bold" />
         <MarkButton format="italic" icon="format_italic" />
diff --git a/site/examples/scroll-into-view.tsx b/site/examples/scroll-into-view.tsx
index fc30c57601..19abb80060 100644
--- a/site/examples/scroll-into-view.tsx
+++ b/site/examples/scroll-into-view.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useMemo } from 'react'
+import React, { useMemo } from 'react'
 import { createEditor, Descendant } from 'slate'
 import { Slate, Editable, withReact } from 'slate-react'
 import { withHistory } from 'slate-history'
@@ -49,10 +49,9 @@ const ScrollIntoViewExample = () => {
 }
 
 const PlainTextEditor = () => {
-  const [value, setValue] = useState<Descendant[]>(initialValue)
   const editor = useMemo(() => withHistory(withReact(createEditor())), [])
   return (
-    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
+    <Slate editor={editor} value={initialValue}>
       <Editable placeholder="Enter some plain text..." />
     </Slate>
   )
diff --git a/site/examples/search-highlighting.tsx b/site/examples/search-highlighting.tsx
index 445357ba64..5a0d8ae5de 100644
--- a/site/examples/search-highlighting.tsx
+++ b/site/examples/search-highlighting.tsx
@@ -7,7 +7,6 @@ import { withHistory } from 'slate-history'
 import { Icon, Toolbar } from '../components'
 
 const SearchHighlightingExample = () => {
-  const [value, setValue] = useState<Descendant[]>(initialValue)
   const [search, setSearch] = useState<string | undefined>()
   const editor = useMemo(() => withHistory(withReact(createEditor())), [])
   const decorate = useCallback(
@@ -38,7 +37,7 @@ const SearchHighlightingExample = () => {
   )
 
   return (
-    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
+    <Slate editor={editor} value={initialValue}>
       <Toolbar>
         <div
           className={css`
diff --git a/site/examples/shadow-dom.tsx b/site/examples/shadow-dom.tsx
index 30ee46bf40..4dd47b5d69 100644
--- a/site/examples/shadow-dom.tsx
+++ b/site/examples/shadow-dom.tsx
@@ -1,5 +1,5 @@
 import ReactDOM from 'react-dom'
-import React, { useState, useMemo, useRef, useEffect } from 'react'
+import React, { useMemo, useRef, useEffect } from 'react'
 import { createEditor, Descendant } from 'slate'
 import { Slate, Editable, withReact } from 'slate-react'
 import { withHistory } from 'slate-history'
@@ -28,11 +28,10 @@ const ShadowDOM = () => {
 }
 
 const ShadowEditor = () => {
-  const [value, setValue] = useState<Descendant[]>(initialValue)
   const editor = useMemo(() => withHistory(withReact(createEditor())), [])
 
   return (
-    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
+    <Slate editor={editor} value={initialValue}>
       <Editable placeholder="Enter some plain text..." />
     </Slate>
   )
diff --git a/site/examples/tables.tsx b/site/examples/tables.tsx
index 7eee22d504..7cc1b800d8 100644
--- a/site/examples/tables.tsx
+++ b/site/examples/tables.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useMemo } from 'react'
+import React, { useCallback, useMemo } from 'react'
 import { Slate, Editable, withReact } from 'slate-react'
 import {
   Editor,
@@ -11,7 +11,6 @@ import {
 import { withHistory } from 'slate-history'
 
 const TablesExample = () => {
-  const [value, setValue] = useState<Descendant[]>(initialValue)
   const renderElement = useCallback(props => <Element {...props} />, [])
   const renderLeaf = useCallback(props => <Leaf {...props} />, [])
   const editor = useMemo(
@@ -19,7 +18,7 @@ const TablesExample = () => {
     []
   )
   return (
-    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
+    <Slate editor={editor} value={initialValue}>
       <Editable renderElement={renderElement} renderLeaf={renderLeaf} />
     </Slate>
   )