mirror/slate
1
0
Fork 0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-04-15 19:02:38 +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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 7 additions and 7 deletions
Show Stats 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
// Import React dependencies.
import React, { useMemo, useState } from 'react'
import React, { useState } from 'react'
// Import the Slate editor factory.
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
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
}
```
@ -83,7 +83,7 @@ Next we want to create state for `value`:
```jsx
const App = () => {
const editor = useMemo(() => withReact(createEditor()), [])
const [editor] = useState(() => withReact(createEditor()))
// Keep track of state for the value of the editor.
const [value, setValue] = useState([])
@ -97,7 +97,7 @@ The provider component keeps track of your Slate editor, its plugins, its value,
```jsx
const App = () => {
const editor = useMemo(() => withReact(createEditor()), [])
const [editor] = useState(() => withReact(createEditor()))
const [value, setValue] = useState([])
// Render the Slate context.
return (
@ -120,7 +120,7 @@ Okay, so the next step is to render the `<Editable>` component itself:
```jsx
const App = () => {
const editor = useMemo(() => withReact(createEditor()), [])
const [editor] = useState(() => withReact(createEditor()))
const [value, setValue] = useState([])
return (
// 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
const App = () => {
const editor = useMemo(() => withReact(createEditor()), [])
const [editor] = useState(() => withReact(createEditor()))
// Add the initial value when setting up our state.
const [value, setValue] = useState([
{