Replace useMemo with useState in the docs (#5022)

* Replace useMemo with useState

* Fix formatting

docs/concepts/09-rendering.md

@@ -13,7 +13,7 @@ import { createEditor } from 'slate'
 import { Slate, Editable, withReact } from 'slate-react'
 
 const MyEditor = () => {
-  const editor = useMemo(() => withReact(createEditor()), [])
+  const [editor] = useState(() => withReact(createEditor()))
   const renderElement = useCallback(({ attributes, children, element }) => {
     switch (element.type) {
       case 'quote':
@@ -115,7 +115,7 @@ A common use case for this is rendering a toolbar with formatting buttons that a
 
 ```jsx
 const MyEditor = () => {
-  const editor = useMemo(() => withReact(createEditor()), [])
+  const [editor] = useState(() => withReact(createEditor()))
   return (
     <Slate editor={editor}>
       <Toolbar />

docs/concepts/12-typescript.md

@@ -38,7 +38,7 @@ declare module 'slate' {
 Annotate the editor's initial value w/ `Descendant[]`.
 
 ```tsx
-import React, { useMemo, useState } from 'react'
+import React, { useState, useState } from 'react'
 import { createEditor, Descendant } from 'slate'
 import { Slate, Editable, withReact } from 'slate-react'
 
@@ -50,7 +50,7 @@ const initialValue: Descendant[] = [
 ]
 
 const App = () => {
-  const editor = useMemo(() => withReact(createEditor()), [])
+  const [editor] = useState(() => withReact(createEditor()))
 
   return (
     <Slate editor={editor} value={initialValue}>

docs/libraries/slate-history.md

@@ -17,5 +17,5 @@ The `withHistory` plugin keeps track of the operation history of a Slate editor
 When used with `withReact`, `withHistory` should be applied inside. For example:
 
 ```javascript
-const editor = useMemo(() => withReact(withHistory(createEditor())), [])
+const [editor] = useState(() => withReact(withHistory(createEditor())))
 ```

docs/libraries/slate-react.md

@@ -195,7 +195,7 @@ Adds React and DOM specific behaviors to the editor.
 When used with `withHistory`, `withReact` should be applied outside. For example:
 
 ```javascript
-const editor = useMemo(() => withReact(withHistory(createEditor())), [])
+const [editor] = useState(() => withReact(withHistory(createEditor())))
 ```
 
 ## Utils

docs/walkthroughs/01-installing-slate.md

@@ -18,7 +18,7 @@ Once you've installed Slate, you'll need to import it.
 
 ```jsx
 // Import React dependencies.
-import React, { useMemo } from 'react'
+import React, { useState } from 'react'
 // Import the Slate editor factory.
 import { createEditor } from 'slate'
 
@@ -40,7 +40,7 @@ The next step is to create a new `Editor` object. We want the editor to be stabl
 ```jsx
 const App = () => {
   // Create a Slate editor object that won't change across renders.
-  const editor = useMemo(() => withReact(createEditor()), [])
+  const editor = useState(() => withReact(createEditor()))
   return null
 }
 ```
@@ -74,7 +74,7 @@ The provider component keeps track of your Slate editor, its plugins, its value,
 const initialValue = []
 
 const App = () => {
-  const editor = useMemo(() => withReact(createEditor()), [])
+  const [editor] = useState(() => withReact(createEditor()))
   // Render the Slate context.
   return <Slate editor={editor} value={initialValue} />
 }
@@ -94,7 +94,7 @@ Okay, so the next step is to render the `<Editable>` component itself:
 const initialValue = []
 
 const App = () => {
-  const editor = useMemo(() => withReact(createEditor()), [])
+  const [editor] = useState(() => withReact(createEditor()))
   return (
     // Add the editable component inside the context.
     <Slate editor={editor} value={initialValue}>
@@ -120,7 +120,7 @@ const initialValue = [
 ]
 
 const App = () => {
-  const editor = useMemo(() => withReact(createEditor()), [])
+  const [editor] = useState(() => withReact(createEditor()))
 
   return (
     <Slate editor={editor} value={initialValue}>

docs/walkthroughs/02-adding-event-handlers.md

@@ -17,7 +17,7 @@ const initialValue = [
 ]
 
 const App = () => {
-  const editor = useMemo(() => withReact(createEditor()), [])
+  const [editor] = useState(() => withReact(createEditor()))
 
   return (
     <Slate editor={editor} value={initialValue}>
@@ -38,7 +38,7 @@ const initialValue = [
 ]
 
 const App = () => {
-  const editor = useMemo(() => withReact(createEditor()), [])
+  const [editor] = useState(() => withReact(createEditor()))
 
   return (
     <Slate editor={editor} value={initialValue}>
@@ -68,7 +68,7 @@ const initialValue = [
 ]
 
 const App = () => {
-  const editor = useMemo(() => withReact(createEditor()), [])
+  const [editor] = useState(() => withReact(createEditor()))
 
   return (
     <Slate editor={editor} value={initialValue}>

docs/walkthroughs/03-defining-custom-elements.md

@@ -15,7 +15,7 @@ const initialValue = [
 ]
 
 const App = () => {
-  const editor = useMemo(() => withReact(createEditor()), [])
+  const [editor] = useState(() => withReact(createEditor()))
 
   return (
     <Slate editor={editor} value={initialValue}>
@@ -74,7 +74,7 @@ const initialValue = [
 ]
 
 const App = () => {
-  const editor = useMemo(() => withReact(createEditor()), [])
+  const [editor] = useState(() => withReact(createEditor()))
 
   // Define a rendering function based on the element passed to `props`. We use
   // `useCallback` here to memoize the function for subsequent renders.
@@ -130,7 +130,7 @@ const initialValue = [
 ]
 
 const App = () => {
-  const editor = useMemo(() => withReact(createEditor()), [])
+  const [editor] = useState(() => withReact(createEditor()))
 
   const renderElement = useCallback(props => {
     switch (props.element.type) {
@@ -188,7 +188,7 @@ const initialValue = [
 ]
 
 const App = () => {
-  const editor = useMemo(() => withReact(createEditor()), [])
+  const [editor] = useState(() => withReact(createEditor()))
 
   const renderElement = useCallback(props => {
     switch (props.element.type) {

docs/walkthroughs/04-applying-custom-formatting.md

@@ -24,7 +24,7 @@ const initialValue = [
 ]
 
 const App = () => {
-  const editor = useMemo(() => withReact(createEditor()), [])
+  const [editor] = useState(() => withReact(createEditor()))
 
   return (
     <Slate editor={editor} value={initialValue}>
@@ -60,7 +60,7 @@ const initialValue = [
 ]
 
 const App = () => {
-  const editor = useMemo(() => withReact(createEditor()), [])
+  const [editor] = useState(() => withReact(createEditor()))
 
   const renderElement = useCallback(props => {
     switch (props.element.type) {
@@ -146,7 +146,7 @@ const initialValue = [
 ]
 
 const App = () => {
-  const editor = useMemo(() => withReact(createEditor()), [])
+  const [editor] = useState(() => withReact(createEditor()))
 
   const renderElement = useCallback(props => {
     switch (props.element.type) {

docs/walkthroughs/05-executing-commands.md

@@ -19,7 +19,7 @@ const initialValue = [
 ]
 
 const App = () => {
-  const editor = useMemo(() => withReact(createEditor()), [])
+  const [editor] = useState(() => withReact(createEditor()))
 
   const renderElement = useCallback(props => {
     switch (props.element.type) {
@@ -126,7 +126,7 @@ const initialValue = [
 ]
 
 const App = () => {
-  const editor = useMemo(() => withReact(createEditor()), [])
+  const [editor] = useState(() => withReact(createEditor()))
 
   const renderElement = useCallback(props => {
     switch (props.element.type) {
@@ -183,7 +183,7 @@ const initialValue = [
 ]
 
 const App = () => {
-  const editor = useMemo(() => withReact(createEditor()), [])
+  const [editor] = useState(() => withReact(createEditor()))
 
   const renderElement = useCallback(props => {
     switch (props.element.type) {

docs/walkthroughs/06-saving-to-a-database.md

@@ -15,7 +15,7 @@ const initialValue = [
 ]
 
 const App = () => {
-  const editor = useMemo(() => withReact(createEditor()), [])
+  const [editor] = useState(() => withReact(createEditor()))
 
   return (
     <Slate editor={editor} value={initialValue}>
@@ -40,7 +40,7 @@ const initialValue = [
 ]
 
 const App = () => {
-  const editor = useMemo(() => withReact(createEditor()), [])
+  const [editor] = useState(() => withReact(createEditor()))
 
   return (
     <Slate
@@ -69,7 +69,7 @@ But... if you refresh the page, everything is still reset. That's because we nee
 
 ```jsx
 const App = () => {
-  const editor = useMemo(() => withReact(createEditor()), [])
+  const [editor] = useState(() => withReact(createEditor()))
   // Update the initial content to be pulled from Local Storage if it exists.
   const initialValue = useMemo(
     () =>
@@ -135,7 +135,7 @@ const deserialize = string => {
 }
 
 const App = () => {
-  const editor = useMemo(() => withReact(createEditor()), [])
+  const [editor] = useState(() => withReact(createEditor()))
   // Use our deserializing function to read the data from Local Storage.
   const initialValue = useMemo(
     deserialize(localStorage.getItem('content')) || '',