mirror/slate
1
0
Fork 0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-08-05 14:57:25 +02:00
Code Issues Releases Wiki Activity

Docs shouldn't useMemo for editor (#4766)

Browse Source 
As already discussed almost a year ago in #3198, `useMemo` doesn't guarantee persistence. This breaks Fast Refresh.

`useState` without a setter is a straightforward fix that avoids dependencies; let's get the docs updated so Fast Refresh works again.

Fixes #3198
This commit is contained in:
Desmond Brand
2022-01-08 03:34:40 -08:00
committed by GitHub
parent cc9cba017a
commit 1b0e7c6b92
1 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
docs/walkthroughs/01-installing-slate.md
View File

@@ -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, { useMemo, useState } from 'react' import React, { useState } from 'react'
// Import the Slate editor factory. // Import the Slate editor factory.
import { createEditor } from 'slate' import { createEditor } from 'slate'
@@ -35,12 +35,12 @@ const App = () => {
} }
``` ```
The next step is to create a new `Editor` object. We want the editor to be stable across renders, so we use the `useMemo` hook: The next step is to create a new `Editor` object. We want the editor to be stable across renders, so we use the `useState` hook [without a setter](https://github.com/ianstormtaylor/slate/pull/3925#issuecomment-781179930):
```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 = useMemo(() => withReact(createEditor()), []) const [editor] = useState(() => withReact(createEditor()))
return null return null
} }
``` ```
@@ -83,7 +83,7 @@ Next we want to create state for `value`:
```jsx ```jsx
const App = () => { const App = () => {
const editor = useMemo(() => withReact(createEditor()), []) const [editor] = useState(() => withReact(createEditor()))
// Keep track of state for the value of the editor. // Keep track of state for the value of the editor.
const [value, setValue] = useState([]) const [value, setValue] = useState([])
@@ -97,7 +97,7 @@ The provider component keeps track of your Slate editor, its plugins, its value,
```jsx ```jsx
const App = () => { const App = () => {
const editor = useMemo(() => withReact(createEditor()), []) const [editor] = useState(() => withReact(createEditor()))
const [value, setValue] = useState([]) const [value, setValue] = useState([])
// Render the Slate context. // Render the Slate context.
return ( return (
@@ -120,7 +120,7 @@ Okay, so the next step is to render the `<Editable>` component itself:
```jsx ```jsx
const App = () => { const App = () => {
const editor = useMemo(() => withReact(createEditor()), []) const [editor] = useState(() => withReact(createEditor()))
const [value, setValue] = useState([]) const [value, setValue] = useState([])
return ( return (
// Add the editable component inside the context. // Add the editable component inside the context.
@@ -143,7 +143,7 @@ The value is just plain JSON. Here's one containing a single paragraph block wit
```jsx ```jsx
const App = () => { const App = () => {
const editor = useMemo(() => withReact(createEditor()), []) const [editor] = useState(() => withReact(createEditor()))
// Add the initial value when setting up our state. // Add the initial value when setting up our state.
const [value, setValue] = useState([ const [value, setValue] = useState([
{ {