fix: improve perf of <Resize> by creating the canvas in a side effect

[stipsan]

Description

Currently everytime <Resize> renders it calls resize() before handing it off to the children prop callback.
Even though the init of canvas is memoized with useState, and it's only added to the dom once, in a useEffect, what happens during resize voids any benefits from these optimizations:

• it sets canvas.height and canvas.width, causing layout trashing and repaint.
• it calls ctx.drawImage(image, ...), which is expensive especially on larger images.

This PR changes it to run it in a single layout effect (the reasoning for why a layout effect is used instead of a regular effect is explained in code comments).
The effect only runs if the image, or maxHeight and maxWidth changes. Ensuring that these potentially expensive operations are only run when necessary. With the added bonus that React Compiler can now optimize the <Resize /> component

What to review

Check the perf, should be great, and otherwise behave like before.

Testing

Existing tests should cover potential regressions.

Notes for release

Images in the Hotspot & Crop tool now render faster, and uses far less memory.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
page-building-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 13, 2024 3:08pm
performance-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 13, 2024 3:08pm
test-compiled-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 13, 2024 3:08pm
test-next-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 13, 2024 3:08pm
test-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 13, 2024 3:08pm

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
studio-workshop	⬜️ Ignored (Inspect)	Visit Preview		Jun 13, 2024 3:08pm

[github-actions]

No changes to documentation

[github-actions]

Component Testing Report Updated Jun 13, 2024 3:12 PM (UTC)

File	Status	Duration	Passed	Skipped	Failed
comments/CommentInput.spec.tsx	✅ Passed (Inspect)	36s	15	0	0
formBuilder/ArrayInput.spec.tsx	✅ Passed (Inspect)	6s	3	0	0
formBuilder/inputs/PortableText/Annotations.spec.tsx	✅ Passed (Inspect)	26s	6	0	0
formBuilder/inputs/PortableText/copyPaste/CopyPaste.spec.tsx	✅ Passed (Inspect)	31s	11	7	0
formBuilder/inputs/PortableText/Decorators.spec.tsx	✅ Passed (Inspect)	14s	6	0	0
formBuilder/inputs/PortableText/DisableFocusAndUnset.spec.tsx	✅ Passed (Inspect)	8s	3	0	0
formBuilder/inputs/PortableText/DragAndDrop.spec.tsx	✅ Passed (Inspect)	52s	1	0	0
formBuilder/inputs/PortableText/FocusTracking.spec.tsx	✅ Passed (Inspect)	35s	15	0	0
formBuilder/inputs/PortableText/Input.spec.tsx	✅ Passed (Inspect)	1m 13s	20	0	0
formBuilder/inputs/PortableText/ObjectBlock.spec.tsx	✅ Passed (Inspect)	1m 3s	18	0	0
formBuilder/inputs/PortableText/PresenceCursors.spec.tsx	✅ Passed (Inspect)	7s	3	9	0
formBuilder/inputs/PortableText/RangeDecoration.spec.tsx	✅ Passed (Inspect)	20s	9	0	0
formBuilder/inputs/PortableText/Styles.spec.tsx	✅ Passed (Inspect)	15s	6	0	0
formBuilder/inputs/PortableText/Toolbar.spec.tsx	✅ Passed (Inspect)	29s	12	0	0

[juice49]

This looks great! Thank you!