Skip to content

Native performance optimizations #357

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
necolas merged 2 commits into from
Jul 31, 2025
Merged

Native performance optimizations #357

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d374ad4
Optimize processStyle for native
necolas Jul 30, 2025
f2a9b6e
Optimize useStyleProps for native
necolas Jul 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
73 changes: 42 additions & 31 deletions packages/react-strict-dom/src/native/css/processStyle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,34 @@ import { parseTimeValue } from './parseTimeValue';
import { parseTransform } from './parseTransform';
import { stringContainsVariables } from './customProperties';

const validPlaceContentValues = new Set<string>([
// Keys that should be excluded from inherit/unset processing
const excludedFromInherit = new Set<string>([
':active',
':focus',
':hover',
'default'
]);

const inheritedProperties = new Set<string>([
'color',
'cursor',
'fontFamily',
'fontSize',
'fontStyle',
'fontVariant',
'fontWeight',
'letterSpacing',
'lineHeight',
'textAlign',
'textDecorationColor',
'textDecorationLine',
'textDecorationStyle',
'textIndent',
'textTransform',
'whiteSpace'
]);

const placeContentValidValues = new Set<string>([
'center',
'flex-end',
'flex-start',
Expand All @@ -28,6 +55,15 @@ const validPlaceContentValues = new Set<string>([
'space-evenly'
]);

const timeValuedProperties = new Set<string>([
'animationDelay',
'animationDuration',
'transitionDelay',
'transitionDuration'
]);

const unsupportedValues = new Set<string>(['currentcolor', 'initial']);

export function processStyle(
style: { +[string]: mixed },
skipValidation?: boolean
Expand Down Expand Up @@ -105,7 +141,7 @@ export function processStyle(
// Polyfill placeContent
else if (propName === 'placeContent') {
// None of these values are supported in RN for both properties.
if (!validPlaceContentValues.has(styleValue)) {
if (!placeContentValidValues.has(styleValue)) {
if (__DEV__) {
warnMsg(
`unsupported style value in "${propName}:${String(styleValue)}"`
Expand Down Expand Up @@ -151,12 +187,7 @@ export function processStyle(
continue;
}
// Polyfill time-valued string values (e.g., '1000ms' => 1000)
else if (
propName === 'animationDelay' ||
propName === 'animationDuration' ||
propName === 'transitionDelay' ||
propName === 'transitionDuration'
) {
else if (timeValuedProperties.has(propName)) {

@rubennorte rubennorte Jul 31, 2025

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

I'm surprised this is faster than just checking 4 values. Maybe this is subtracting from the wins in other parts of this PR?

@necolas necolas Jul 31, 2025

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.

The benchmarks don't show a significant difference from this specific part of the change.

result[propName] = parseTimeValue(styleValue);
continue;
}
Expand All @@ -174,27 +205,8 @@ export function processStyle(
}
// inherited properties polyfill 'inherit' in useStyleProps
else if (
propName !== ':active' &&
propName !== ':focus' &&
propName !== ':hover' &&
propName !== 'default' &&
propName !== 'color' &&
propName !== 'cursor' &&
propName !== 'fontFamily' &&
propName !== 'fontSize' &&
propName !== 'fontStyle' &&
propName !== 'fontVariant' &&
propName !== 'fontWeight' &&
propName !== 'letterSpacing' &&
propName !== 'lineHeight' &&
propName !== 'textAlign' &&
propName !== 'textDecorationColor' &&
propName !== 'textDecorationLine' &&
propName !== 'textDecorationStyle' &&
propName !== 'textAlign' &&
propName !== 'textIndent' &&
propName !== 'textTransform' &&
propName !== 'whiteSpace'
!excludedFromInherit.has(propName) &&
!inheritedProperties.has(propName)
) {
if (__DEV__) {
warnMsg(
Expand All @@ -204,8 +216,7 @@ export function processStyle(
continue;
}
} else if (
styleValue === 'currentcolor' ||
styleValue === 'initial' ||
unsupportedValues.has(styleValue) ||
styleValue.includes('calc(')
) {
if (__DEV__) {
Expand Down
128 changes: 71 additions & 57 deletions packages/react-strict-dom/src/native/modules/useStyleProps.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,8 @@
*/

import type { CustomProperties, Styles, Style } from '../../types/styles';
import type {
ReactNativeProps,
ReactNativeStyle
} from '../../types/renderer.native';
import type { ReactNativeProps } from '../../types/renderer.native';
import type { ReactNativeStyle } from '../../types/renderer.native';

import * as css from '../css';
import * as ReactNative from '../react-native';
Expand All @@ -22,6 +20,38 @@ import { usePseudoStates } from './usePseudoStates';
import { useStyleTransition } from './useStyleTransition';
import { useViewportScale } from './ContextViewportScale';

const inheritedProperties = [
'color',
'cursor',
'fontFamily',
'fontSize',
'fontStyle',
'fontVariant',
'fontWeight',
'letterSpacing',
'lineHeight',
'textAlign',
'textDecorationColor',
'textDecorationLine',
'textDecorationStyle',
'textIndent',
'textTransform',
'whiteSpace',
'writingDirection'
];

const eventHandlerNames = [
'onBlur',
'onFocus',
'onMouseEnter',
'onMouseLeave',
'onPointerCancel',
'onPointerDown',
'onPointerEnter',
'onPointerLeave',
'onPointerUp'
];

type StyleOptions = {
customProperties: ?CustomProperties,
provideInheritableStyle: boolean,
Expand Down Expand Up @@ -113,19 +143,10 @@ export function useStyleProps(
);

if (handlers != null) {
for (const handler of [
'onBlur',
'onFocus',
'onMouseEnter',
'onMouseLeave',
'onPointerCancel',
'onPointerDown',
'onPointerEnter',
'onPointerLeave',
'onPointerUp'
]) {
if (handler != null) {
styleProps[handler] = handlers[handler];
for (const handler of eventHandlerNames) {
const handlerValue = handlers[handler];
if (handlerValue != null) {
styleProps[handler] = handlerValue;
}
}
}
Expand All @@ -146,48 +167,34 @@ export function useStyleProps(
styleProps.style = styleWithAnimations;
}

const {
color,
cursor,
fontFamily,
fontSize,
fontStyle,
fontVariant,
fontWeight,
letterSpacing,
lineHeight,
textAlign,
textDecorationColor,
textDecorationLine,
textDecorationStyle,
textIndent,
textTransform,
whiteSpace,
writingDirection,
...viewStyle
} = styleProps.style;
// Create inherited values lookup for performance
const inheritedValues = {
color: inheritedColor,
cursor: inheritedCursor,
fontFamily: inheritedFontFamily,
fontSize: inheritedFontSize,
fontStyle: inheritedFontStyle,
fontVariant: inheritedFontVariant,
fontWeight: inheritedFontWeight,
letterSpacing: inheritedLetterSpacing,
lineHeight: inheritedLineHeight,
textAlign: inheritedTextAlign,
textDecorationColor: inheritedTextDecorationColor,
textDecorationLine: inheritedTextDecorationLine,
textDecorationStyle: inheritedTextDecorationStyle,
textIndent: inheritedTextIndent,
textTransform: inheritedTextTransform,
whiteSpace: inheritedWhiteSpace,
writingDirection: inheritedWritingDirection
};

const inheritableStyle = {} as $FlowFixMe;
const viewStyle = {} as $FlowFixMe;

for (const key of inheritedProperties) {
const value = styleProps.style[key];
const inheritedValue = inheritedValues[key];

[
['color', color, inheritedColor],
['cursor', cursor, inheritedCursor],
['fontFamily', fontFamily, inheritedFontFamily],
['fontSize', fontSize, inheritedFontSize],
['fontStyle', fontStyle, inheritedFontStyle],
['fontVariant', fontVariant, inheritedFontVariant],
['fontWeight', fontWeight, inheritedFontWeight],
['letterSpacing', letterSpacing, inheritedLetterSpacing],
['lineHeight', lineHeight, inheritedLineHeight],
['textAlign', textAlign, inheritedTextAlign],
['textDecorationColor', textDecorationColor, inheritedTextDecorationColor],
['textDecorationLine', textDecorationLine, inheritedTextDecorationLine],
['textDecorationStyle', textDecorationStyle, inheritedTextDecorationStyle],
['textIndent', textIndent, inheritedTextIndent],
['textTransform', textTransform, inheritedTextTransform],
['whiteSpace', whiteSpace, inheritedWhiteSpace],
['writingDirection', writingDirection, inheritedWritingDirection]
].forEach(([key, value, inheritedValue]) => {
let val = value;
if (
(withInheritedStyle && value == null) ||
Expand All @@ -200,7 +207,14 @@ export function useStyleProps(
inheritableStyle[key] = val;
styleProps.style[key] = val;
}
});
}

// Copy non-inherited properties to viewStyle
for (const key in styleProps.style) {
if (!inheritedValues.hasOwnProperty(key)) {
viewStyle[key] = styleProps.style[key];
}
}

if (withTextStyle === true) {
const textStyle =
Expand Down