Fix multiple editor instances issue (#4001)
React's strict mode runs effects twice on mount, but once it's done that it'll go forward with the state from the first effect. For example, this component: ```tsx let nextId = 1 function Component() { const [state, setState] = useState(null) useEffect(() => { const id = nextId++ console.log('set up', id) setState(id) return () => console.log('tear down', id) }, []) if (!state) return console.log('render', state) } ``` Would log something like this when mounting for the first time: - `set up 1` - `tear down 1` - `set up 2` - `render 1` For us, this is a problem: editor 2 is the version that's still running, but editor 1 is getting used for render. React talks a bit about this issue here: https://github.com/reactwg/react-18/discussions/19 The fix seems to be to keep the editor in a `useRef` instead of a `useState`. We need the state to trigger re-renders though, so we sync the ref into the state although we don't actually use the state value. ### Change Type - [x] `sdk` — Changes the tldraw SDK - [x] `bugfix` — Bug fix ### Release Notes - Fix a bug causing text shape measurement to work incorrectly when using react strict mode
This commit is contained in:
parent
480c23135f
commit
2d2a7ea76f
4 changed files with 37 additions and 9 deletions
|
@ -12,8 +12,6 @@ import { examples } from './examples'
|
|||
import Develop from './misc/develop'
|
||||
import EndToEnd from './misc/end-to-end'
|
||||
|
||||
// This example is only used for end to end tests
|
||||
|
||||
// we use secret internal `setDefaultAssetUrls` functions to set these at the
|
||||
// top-level so assets don't need to be passed down in every single example.
|
||||
const assetUrls = getAssetUrlsByMetaUrl()
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue