Skip to content

docs: note exception-safe cleanup of JS Yoga trees - #1999

Merged
meta-codesync[bot] merged 2 commits into
react:mainfrom
greekr4:docs-js-tree-cleanup
Sep 23, 2026
Merged

meta-codesync[bot] merged 2 commits into
react:mainfrom
greekr4:docs-js-tree-cleanup

Conversation

@greekr4

@greekr4 greekr4 commented Jul 22, 2026

Copy link
Copy Markdown
Contributor

Summary

The JavaScript docs already warn that nodes must be freed manually, but don't mention two things we ran into in production (a WASM-based canvas editor that builds a throwaway Yoga tree per layout pass):

  1. Nodes live in the WebAssembly heap, so leaked nodes are invisible to the JS garbage collector and accumulate until Node.create() fails.
  2. If a measure function (or any code between create and free) throws, the whole tree leaks unless freeing happens in a finally block.

This adds a short paragraph and a try/finally example to the existing warning in the JavaScript tab of "Laying out a Yoga tree".

Test Plan

Docs-only change. Verified the MDX renders (admonition + code fence) and the relative link to external-layout-systems.mdx resolves.

@meta-cla meta-cla Bot added the CLA Signed label Jul 22, 2026
@facebook-github-tools facebook-github-tools Bot added the Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team. label Jul 22, 2026
Comment on lines +105 to +111
const root = buildYogaTree();
try {
root.calculateLayout(undefined, undefined, Direction.LTR);
readLayoutResults(root);
} finally {
root.freeRecursive();
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

The new snippet references buildYogaTree() and readLayoutResults(root), which are not defined anywhere in the docs, and uses Direction.LTR without an import (the snippet above this warning imports only Edge, FlexDirection, PositionType from yoga-layout). Other snippets in this page are self-contained and copy-pasteable; readers copying this block would hit unresolved identifiers. It also re-declares const root, which conflicts with the const root declared in the preceding snippet of the same JavaScript tab if both blocks are pasted together. Consider inlining the tree construction/result reading (or using comments as placeholders) and importing/mentioning Direction.

Suggested change
const root = buildYogaTree();
try {
root.calculateLayout(undefined, undefined, Direction.LTR);
readLayoutResults(root);
} finally {
root.freeRecursive();
}
try {
root.calculateLayout(undefined, undefined, Direction.LTR);
// Read layout results, e.g. child0.getComputedLeft()
} finally {
root.freeRecursive();
}

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Good catch, thanks — applied your suggestion in 51cbdce so the block reuses root/child0 from the snippet above, and added Direction to that import (which also covers the calculateLayout snippet further down the page).

@meta-codesync

meta-codesync Bot commented Sep 22, 2026

Copy link
Copy Markdown

@andrewdacenko has imported this pull request. If you are a Meta employee, you can view this in D119539043.

@meta-codesync
meta-codesync Bot merged commit a8b4817 into react:main Sep 23, 2026
36 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants