Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes #557.
The root cause of the issue was that both layout calculation and rendering of output was in the same
onRender
function that's throttled to 32ms by default:ink/src/ink.tsx
Lines 53 to 58 in 025c10f
And here's the function that would be called:
ink/src/renderer.ts
Lines 16 to 23 in 025c10f
So when component is mounted/unmounted frequently, as in the original issue, and it calls
measureElement
in auseEffect
, there's a condition whenuseEffect
is executed before Yoga layout is calculated. This leads toNaN
being returned instead of element dimensions.This PR fixes that by separating code that calculates layout and renders output to the terminal. Calculation of layout is now always instant, while output rendering continues to be throttled.