Skip to content

Fix occasional flicker when transitioning a property - #332

Closed
martinbooth wants to merge 1 commit into
mainfrom
fix/transition-return-currentstyle
Closed

Fix occasional flicker when transitioning a property#332
martinbooth wants to merge 1 commit into
mainfrom
fix/transition-return-currentstyle

Conversation

@martinbooth

Copy link
Copy Markdown
Contributor

If transitionStyleHasChangedResult is true, the code in useLayoutEffect should run synchronously without rendering the style being transitioned to, but this doesn't appear to be the case 100% of the time because I've got one transition that momentarily shows the target style before running the transition. Even this doesn't repro reliably.

Even though I'd expect returning the current style if transitionStyleHasChangedResult is true to be a no-op (because the useLayoutEffect should cause a synchronous render with a new value), it doesn't seem to always be that way and this PR fixes the issue

If transitionStyleHasChangedResult is true, the code in useLayoutEffect
should run synchronously without rendering the style being transitioned
to, but this doesn't appear to be the case 100% of the time because
I've got one transition that momentarily shows the target style before
running the transition. Even this doesn't repro reliably.

Even though I'd expect returning the current style if
transitionStyleHasChangedResult is true to be a no-op (because the
useLayoutEffect should cause a synchronous render with a new value), it
doesn't seem to always be that way and this PR fixes the issue
@github-actions

github-actions Bot commented Jul 7, 2025

Copy link
Copy Markdown

workflow: benchmarks/size

Comparison of minified (terser) and compressed (brotli) size results, measured in bytes. Smaller is better.

Results Base Patch Ratio
react-strict-dom/dist/dom/index.js
· compressed 2,514 2,514 1.00
· minified 8,691 8,691 1.00
react-strict-dom/dist/dom/runtime.js
· compressed 855 855 1.00
· minified 2,435 2,435 1.00
react-strict-dom/dist/native/index.js
· compressed 16,177 16,182 1.00 +
· minified 60,356 60,373 1.00 +

@github-actions

github-actions Bot commented Jul 7, 2025

Copy link
Copy Markdown

workflow: benchmarks/perf (native)

Comparison of performance test results, measured in operations per second. Larger is better.

Results Base Patch Ratio
css.create
· small 1,078,524 1,084,347 1.01 +
· small with units 404,131 398,492 0.99 -
· small with variables 637,782 610,559 0.96 -
· several small 298,229 298,476 1.00 +
· large 193,239 189,565 0.98 -
· large with polyfills 136,383 135,135 0.99 -
· complex 93,876 92,080 0.98 -
· unsupported 204,935 204,265 1.00 -
css.createTheme
· simple theme 214,398 214,969 1.00 +
· polyfill theme 203,769 202,478 0.99 -
css.props
· small 278,929 272,016 0.98 -
· small with units 210,335 208,320 0.99 -
· small with variables 107,877 108,427 1.01 +
· small with variables of units 74,350 73,680 0.99 -
· large 119,567 118,706 0.99 -
· large with polyfills 38,842 38,848 1.00 +
· complex 23,703 23,844 1.01 +
· unsupported 168,487 170,591 1.01 +
· simple merge 173,643 174,806 1.01 +
· wide merge 17,915 18,408 1.03 +
· deep merge 17,709 17,876 1.01 +
· themed merge 34,315 34,601 1.01 +

@martinbooth martinbooth closed this Jul 8, 2025
@necolas
necolas deleted the fix/transition-return-currentstyle branch July 25, 2025 21:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants