mirror of
https://github.com/ianstormtaylor/slate.git
synced 2025-08-21 06:31:28 +02:00
Replace useState with useMemo in the "Installing Slate" walkthrough (#5020)
* Update 01-installing-slate.md * Revert changes to types definitions
This commit is contained in:
@@ -18,7 +18,7 @@ Once you've installed Slate, you'll need to import it.
|
|||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
// Import React dependencies.
|
// Import React dependencies.
|
||||||
import React, { useState } from 'react'
|
import React, { useMemo } from 'react'
|
||||||
// Import the Slate editor factory.
|
// Import the Slate editor factory.
|
||||||
import { createEditor } from 'slate'
|
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
|
```jsx
|
||||||
const App = () => {
|
const App = () => {
|
||||||
// Create a Slate editor object that won't change across renders.
|
// Create a Slate editor object that won't change across renders.
|
||||||
const [editor] = useState(() => withReact(createEditor()))
|
const editor = useMemo(() => withReact(createEditor()), [])
|
||||||
return null
|
return null
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
@@ -74,7 +74,7 @@ The provider component keeps track of your Slate editor, its plugins, its value,
|
|||||||
const initialValue = []
|
const initialValue = []
|
||||||
|
|
||||||
const App = () => {
|
const App = () => {
|
||||||
const [editor] = useState(() => withReact(createEditor()))
|
const editor = useMemo(() => withReact(createEditor()), [])
|
||||||
// Render the Slate context.
|
// Render the Slate context.
|
||||||
return <Slate editor={editor} value={initialValue} />
|
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 initialValue = []
|
||||||
|
|
||||||
const App = () => {
|
const App = () => {
|
||||||
const [editor] = useState(() => withReact(createEditor()))
|
const editor = useMemo(() => withReact(createEditor()), [])
|
||||||
return (
|
return (
|
||||||
// Add the editable component inside the context.
|
// Add the editable component inside the context.
|
||||||
<Slate editor={editor} value={initialValue}>
|
<Slate editor={editor} value={initialValue}>
|
||||||
@@ -120,7 +120,7 @@ const initialValue = [
|
|||||||
]
|
]
|
||||||
|
|
||||||
const App = () => {
|
const App = () => {
|
||||||
const [editor] = useState(() => withReact(createEditor()))
|
const editor = useMemo(() => withReact(createEditor()), [])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Slate editor={editor} value={initialValue}>
|
<Slate editor={editor} value={initialValue}>
|
||||||
|
Reference in New Issue
Block a user