Skip to content

Conversation

necolas
Copy link
Contributor

@necolas necolas commented Sep 16, 2025

Avoid setting styles if they are already the default for View. The cost of each style property in React Native is relatively high, so this micro optimization can still add up.

Avoid setting styles if they are already the default for View. The cost
of each style property in React Native is relatively high, so this micro
optimization can still add up.
@meta-cla meta-cla bot added the cla signed label Sep 16, 2025
Copy link

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,490 2,490 1.00
· minified 8,653 8,653 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,195 16,204 1.00 +
· minified 62,798 62,970 1.00 +

Copy link

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,131,712 1,157,486 1.02 +
· small with units 491,698 490,305 1.00 -
· small with variables 665,479 675,999 1.02 +
· several small 349,660 351,042 1.00 +
· large 200,851 199,266 0.99 -
· large with polyfills 148,001 149,460 1.01 +
· complex 103,305 103,452 1.00 +
· unsupported 210,536 209,333 0.99 -
css.createTheme
· simple theme 222,645 222,256 1.00 -
· polyfill theme 209,692 211,101 1.01 +
css.props
· small 229,273 230,588 1.01 +
· small with units 186,970 186,939 1.00 -
· small with variables 112,963 112,074 0.99 -
· small with variables of units 82,147 81,420 0.99 -
· large 96,337 96,103 1.00 -
· large with polyfills 38,341 38,160 1.00 -
· complex 22,267 22,239 1.00 -
· unsupported 137,737 137,841 1.00 +
· simple merge 158,257 158,543 1.00 +
· wide merge 16,988 16,894 0.99 -
· deep merge 16,724 16,613 0.99 -
· themed merge 32,484 32,409 1.00 -

nativeProps.style.flexDirection = 'column';
}
if (nativeProps.style.flexShrink != null) {
nativeProps.style.flexShrink = 0;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This might benefit from a little more logic, because I think flexShrink has an effect if the element is block but also a flex child

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.

1 participant