tldraw/packages
David Sheldrick b04ded47c3
Prevent stale shape data in render (#3882)
Our Shape component is set up to, by default, not re-render the actual
shape content when the shape's x,y coords or opacity or rotation etc
change, since those things don't affect the shape itself but rather how
it is composited. It does this by only triggering re-renders when
shape.props or shape.meta change using react.memo.

However the shape's render is also reactive so it is possible to trigger
re-renders even when shape.props and shape.meta do not change, e.g. in
the case of arrow shapes you can trigger re-renders by updating bindings
involving the arrow, or by moving one of the arrow's bound shapes.

This is fine except that the actual arrow record being passed into the
util.component etc methods was not always the very latest version in the
store because it has been memoized by react. This makes identity checks
like `shape === otherShape` fail sometimes, and was causing a bug in
arrow rendering (the grey bits to show the binding anchor were not
always showing up).

To fix that, this PR simply plucks the shape out of the store using the
sneaky non-capturing method during render so that it's always up-to-date
when being passed to the shape util for rendering, while still
preserving the behaviour that by default it won't re-render unless the
shape.props or shape.meta change.

### Change Type

<!--  Please select a 'Scope' label ️ -->

- [x] `sdk` — Changes the tldraw SDK
- [ ] `dotcom` — Changes the tldraw.com web app
- [ ] `docs` — Changes to the documentation, examples, or templates.
- [ ] `vs code` — Changes to the vscode plugin
- [ ] `internal` — Does not affect user-facing stuff

<!--  Please select a 'Type' label ️ -->

- [x] `bugfix` — Bug fix
- [ ] `feature` — New feature
- [ ] `improvement` — Improving existing features
- [ ] `chore` — Updating dependencies, other boring stuff
- [ ] `galaxy brain` — Architectural changes
- [ ] `tests` — Changes to any test code
- [ ] `tools` — Changes to infrastructure, CI, internal scripts,
debugging tools, etc.
- [ ] `dunno` — I don't know


### Test Plan

1. Add a step-by-step description of how to test your PR here.
2.

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- Add a brief release note for your PR here.
2024-06-05 10:48:52 +00:00
..
assets Add heart geo shape (#3787) 2024-05-24 13:04:28 +00:00
dotcom-shared Force interface instead of type for better docs (#3815) 2024-05-22 15:55:49 +00:00
editor Prevent stale shape data in render (#3882) 2024-06-05 10:48:52 +00:00
namespaced-tldraw Don't check api.json files into git (#3565) 2024-04-24 15:58:26 +00:00
state timeouts: rework effectschedule timeout tracking (#3870) 2024-06-04 10:55:22 +00:00
store Snapshots pit of success (#3811) 2024-06-03 15:58:00 +00:00
tldraw Fix pressure (#3877) 2024-06-04 16:31:19 +01:00
tlschema Snapshots pit of success (#3811) 2024-06-03 15:58:00 +00:00
tlsync editor: register timeouts/intervals/rafs for disposal (#3852) 2024-06-04 08:50:40 +00:00
utils editor: register timeouts/intervals/rafs for disposal (#3852) 2024-06-04 08:50:40 +00:00
validate Force interface instead of type for better docs (#3815) 2024-05-22 15:55:49 +00:00