Revert throttling of useValue and useStateTracking. (#3129)

Reverts the changes to the `state` package that were made in #2977.
Should fix the issue with shape jittering discovered during QA.


### Change Type

- [x] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [ ] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

1. Create some shapes (draw shapes work well).
2. Open the same room in a second browser.
3. Resize shapes (using option / alt makes it more obvious).
4. The shapes should not jitter in any of the screens.
This commit is contained in:
Mitja Bezenšek 2024-03-12 14:57:53 +01:00 committed by GitHub
parent 83544a9ea8
commit 26e1e98366
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 7 additions and 24 deletions

View file

@ -52,9 +52,6 @@
"node_modules/(?!(nanoid)/)"
]
},
"dependencies": {
"@tldraw/utils": "workspace:*"
},
"devDependencies": {
"@types/lodash": "^4.14.188",
"@types/react": "^18.2.47",

View file

@ -1,4 +1,3 @@
import { fpsThrottle } from '@tldraw/utils'
import React from 'react'
import { EffectScheduler } from '../core'
@ -27,9 +26,9 @@ export function useStateTracking<T>(name: string, render: () => T): T {
() => renderRef.current?.(),
// this is what will be invoked when @tldraw/state detects a change in an upstream reactive value
{
scheduleEffect: fpsThrottle(() => {
scheduleEffect() {
scheduleUpdate?.()
}),
},
}
)

View file

@ -1,5 +1,4 @@
/* eslint-disable prefer-rest-params */
import { throttleToNextFrame } from '@tldraw/utils'
import { useMemo, useRef, useSyncExternalStore } from 'react'
import { Signal, computed, react } from '../core'
@ -82,16 +81,10 @@ export function useValue() {
const { subscribe, getSnapshot } = useMemo(() => {
return {
subscribe: (listen: () => void) => {
return react(
`useValue(${name})`,
() => {
$val.get()
listen()
},
{
scheduleEffect: throttleToNextFrame,
}
)
return react(`useValue(${name})`, () => {
$val.get()
listen()
})
},
getSnapshot: () => $val.get(),
}

View file

@ -5,10 +5,5 @@
"compilerOptions": {
"outDir": "./.tsbuild",
"rootDir": "src"
},
"references": [
{
"path": "../utils"
}
]
}
}

View file

@ -7356,7 +7356,6 @@ __metadata:
version: 0.0.0-use.local
resolution: "@tldraw/state@workspace:packages/state"
dependencies:
"@tldraw/utils": "workspace:*"
"@types/lodash": "npm:^4.14.188"
"@types/react": "npm:^18.2.47"
"@types/react-test-renderer": "npm:^18.0.0"