Skip to content

Reduce Reanimated serialization traffic#6219

Merged
gaearon merged 1 commit into
mainfrom
reduce-reanimated-traffic
Nov 12, 2024
Merged

Reduce Reanimated serialization traffic#6219
gaearon merged 1 commit into
mainfrom
reduce-reanimated-traffic

Conversation

@gaearon
Copy link
Copy Markdown
Contributor

@gaearon gaearon commented Nov 11, 2024

This was a major WTF moment for me and I'm still not sure to what extent this is actually useful. However, the Android GPU profiler seems to be happy about this change.

There is some information about how Reanimated closures work here: software-mansion/react-native-reanimated#3670 (comment)

We're closing over withSpring which I assume means that this clone function will have to go into withSpring itself, deal with its closures over top scope, and so on. I haven't tried logging what's going on there but I suspect there may be some serialization overhead.

However, we can just create initial and final values of the animation and expose those to the worklet. I didn't expect this to be faster but it does seem to be. Or maybe the GPU debugger is being misleading.

Test Plan

Enable GPU profiler, build for release on device, remove all embeds (they add too much other unpredictability), continuously scroll a little bit up and down with your finger without releasing on Home.

Before

Overall we're way above the red line.

The green+blue stuff reaches the green line.

Screenshot 2024-11-11 at 01 27 26

After

Overall we're a bit below the red line.

The green+blue stuff is halfway within the green line.

Screenshot 2024-11-11 at 01 27 16

@arcalinea arcalinea temporarily deployed to reduce-reanimated-traffic - social-app PR #6219 November 11, 2024 01:29 — with Render Destroyed
@github-actions
Copy link
Copy Markdown
Contributor

Old size New size Diff
8.01 MB 8.01 MB 65 B (0.00%)

Copy link
Copy Markdown
Member

@mozzius mozzius left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Appears to double my framerate as far as I can tell! Great work

This is a major footgun with Reanimated, I'm shocked this makes such a difference. I think the makeMutable code is good, since it's outside of a component it's fine to not cancel/clean up

@gaearon gaearon merged commit b2e11d3 into main Nov 12, 2024
@gaearon gaearon deleted the reduce-reanimated-traffic branch November 12, 2024 17:19
@hirbod
Copy link
Copy Markdown

hirbod commented Nov 12, 2024

You only need to call cancelAnimation() when you actually animate with the value, can be skipped if not used for animation. Great find!

@gaearon
Copy link
Copy Markdown
Contributor Author

gaearon commented Nov 10, 2025

For posterity, Reanimated fixed this upstream in software-mansion/react-native-reanimated#6758 which I assume went out in 3.17.0

@mozzius
Copy link
Copy Markdown
Member

mozzius commented Nov 10, 2025

Nice! I'll see about reverting this then

@gaearon
Copy link
Copy Markdown
Contributor Author

gaearon commented Nov 10, 2025

no worries, we already did the revert :) i just linked to this PR from somewhere and then realized it’s not very clear that the upstream issue was fixed

@mozzius
Copy link
Copy Markdown
Member

mozzius commented Nov 11, 2025

Ahh :) nice

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants