Fix Memory Leak in AnimatedWithChildren #49217
Conversation
|
Hi @c-miles! Thank you for your pull request and welcome to our community. Action RequiredIn order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you. ProcessIn order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA. Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with If you have received this in error or have any questions, please contact us at [email protected]. Thanks! |
| @@ -53,7 +57,6 @@ export default class AnimatedWithChildren extends AnimatedNode { | |||
| __removeChild(child: AnimatedNode): void { | |||
| const index = this._children.indexOf(child); | |||
| if (index === -1) { | |||
| console.warn("Trying to remove a child that doesn't exist"); | |||
There was a problem hiding this comment.
Assumed duplicate removals are expected during cleanup; with __addChild now preventing duplicates, the warning in __removeChild causes unnecessary test failures and log noise.
| __addChild(child: AnimatedNode): void { | ||
| // Prevent adding duplicate animated nodes. | ||
| if (this._children.includes(child)) { | ||
| return; | ||
| } |
There was a problem hiding this comment.
This check prevents duplicate animated nodes from being added, which fixes the memory leak we observed.
The fact that _addChild is being called repeatedly with the same node may suggest an opportunity for further architectural review, though this fix effectively addresses the immediate issue.
|
Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks! |
facebook-github-bot
added
the
CLA Signed
facebook-github-bot
added
the
Shared with Meta
Summary:
This pull request fixes an issue in
AnimatedWithChildrenwhere duplicate children were being added during repeated re-renders.In our long-lived app—which uses many animations—this caused the children array to grow unchecked, eventually degrading performance and freezing the app.
Here's a reproduction that visually demonstrates performance degradation over 20–30 seconds.
This change prevents adding the same child more than once, eliminating the memory leak and restoring smooth performance.
Changelog:
[General] [FIXED] - Prevent duplicate child additions in AnimatedWithChildren to prevent memory leak.
Test Plan:
Added a new test file (AnimatedWithChildren-test.js) that verifies:
Manual Verification:
Below are before-and-after screenshots from my test app’s memory dev tools. You can see that within one minute, the test app running on main grew by 95 MB, compared to the test app running with the fix that prevents duplicates. Note that the dips on the right side of the image are caused by taking heap snapshots.
fixes #48860