Minor Performance and Code Quality Improvements ✈️ (#50682)

Summary:
*Hi,*

I made a small update to the dependency array in `useLayoutEffect`, changing it from `[native]` to `[native.value]` for better precision. Since JavaScript compares objects by reference, this change can lead to a minor performance improvement. Additionally, as `useLayoutEffect` is render-blocking, I wanted to ensure we optimize its usage as much as possible.

As a micro-optimization and in line with good coding practices, I also changed a `let + if` variable to `const`. While the performance gain is minimal, it contributes to cleaner and more consistent code.

Please feel free to review, and I sincerely apologize if I made any mistakes in the process.

## Changelog:

<!-- Help reviewers and the release process by writing your own changelog entry.

Pick one each for the category and type tags:

[ANDROID|GENERAL|IOS|INTERNAL] [BREAKING|ADDED|CHANGED|DEPRECATED|REMOVED|FIXED|SECURITY] - Message

For more details, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests
-->
*[General] [Changed]* – Refined `useLayoutEffect` dependency array from `[native]` to `[native.value]` for improved precision and efficiency in re-renders.
*[General] [Changed]* – Replaced `let` with `const` where applicable for better code standards and micro-optimization.

Pull Request resolved: https://github.com/facebook/react-native/pull/50682

Reviewed By: huntie

Differential Revision: D72979663

Pulled By: yungsters

fbshipit-source-id: 64ac09811b78ca67be903d8cd91da8cd6f0a45fa
This commit is contained in:
Sanjaiyan Parthipan
2025-04-15 09:17:02 -07:00
committed by Facebook GitHub Bot
parent be247076bd
commit 38fefb2771
2 changed files with 19 additions and 22 deletions
@@ -213,7 +213,7 @@ const Switch: component(
SwitchCommands.setValue(nativeSwitchRef.current, jsValue);
}
}
}, [value, native]);
}, [value, native.value]);
if (Platform.OS === 'android') {
const {onTintColor, tintColor, ...androidProps} = restProps;
+18 -21
View File
@@ -61,38 +61,35 @@ const View: component(
const _accessibilityLabelledBy =
ariaLabelledBy?.split(/\s*,\s*/g) ?? accessibilityLabelledBy;
let _accessibilityState;
if (
const _accessibilityState =
accessibilityState != null ||
ariaBusy != null ||
ariaChecked != null ||
ariaDisabled != null ||
ariaExpanded != null ||
ariaSelected != null
) {
_accessibilityState = {
busy: ariaBusy ?? accessibilityState?.busy,
checked: ariaChecked ?? accessibilityState?.checked,
disabled: ariaDisabled ?? accessibilityState?.disabled,
expanded: ariaExpanded ?? accessibilityState?.expanded,
selected: ariaSelected ?? accessibilityState?.selected,
};
}
let _accessibilityValue;
if (
? {
busy: ariaBusy ?? accessibilityState?.busy,
checked: ariaChecked ?? accessibilityState?.checked,
disabled: ariaDisabled ?? accessibilityState?.disabled,
expanded: ariaExpanded ?? accessibilityState?.expanded,
selected: ariaSelected ?? accessibilityState?.selected,
}
: undefined;
const _accessibilityValue =
accessibilityValue != null ||
ariaValueMax != null ||
ariaValueMin != null ||
ariaValueNow != null ||
ariaValueText != null
) {
_accessibilityValue = {
max: ariaValueMax ?? accessibilityValue?.max,
min: ariaValueMin ?? accessibilityValue?.min,
now: ariaValueNow ?? accessibilityValue?.now,
text: ariaValueText ?? accessibilityValue?.text,
};
}
? {
max: ariaValueMax ?? accessibilityValue?.max,
min: ariaValueMin ?? accessibilityValue?.min,
now: ariaValueNow ?? accessibilityValue?.now,
text: ariaValueText ?? accessibilityValue?.text,
}
: undefined;
const actualView = (
<ViewNativeComponent