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:
alex 2024-06-24 13:24:24 +01:00 committed by GitHub
parent 480c23135f
commit 2d2a7ea76f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 37 additions and 9 deletions

View file

@ -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()