2d2a7ea76f
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
|
||
|---|---|---|
| .. | ||
| e2e | ||
| public | ||
| src | ||
| .gitignore | ||
| LICENSE.md | ||
| package.json | ||
| README.md | ||
| tsconfig.json | ||
| vercel.json | ||
| vite.config.ts | ||
@tldraw/example
Distributions
You can find tldraw on npm here.
Contribution
Please see our contributing guide. Found a bug? Please submit an issue.
License
The tldraw source code and its distributions are provided under the tldraw license. This license does not permit commercial use. To purchase a commercial license or learn more, please fill out this form.
Trademarks
Copyright (c) 2023-present tldraw Inc. The tldraw name and logo are trademarks of tldraw. Please see our trademark guidelines for info on acceptable usage.
Contact
Find us on Twitter/X at @tldraw.
Community
Have questions, comments or feedback? Join our discord or start a discussion. For the latest news and release notes, check out our Substack.