Skip to content

Commit cfa784c

Browse files
Zahoqfacebook-github-bot
authored andcommitted
Avoid redundant state updates in Pressable if children and style are not functions (#44615)
Summary: Goal of this PR is to optimise `Pressable` component, similarly to react-native-tvos/react-native-tvos#724 . `Pressable` `style` and `children` properties can, but doesn't have to be functions. Usually we passing objects or arrays. `pressed` state is used only when `style` or `children` are `functions`, so let's update that state only in such case, otherwise let's skip state updates to improve the performance. That way we won't have to rerender the component when it is being pressed (assuming that `style` and `children` are not going to be functions) ## Changelog: [GENERAL] [CHANGED] - Improve performance of `Pressable` component. Pull Request resolved: #44615 Test Plan: Verify that `Pressable` updates its `pressed` state when `style` or `children` are functions. Reviewed By: javache Differential Revision: D57614309 Pulled By: fabriziocucci fbshipit-source-id: 473e0ab3c4bf7b3ef04ba19f76105ac65371a3fb
1 parent cd1ddbb commit cfa784c

File tree

1 file changed

+6
-2
lines changed
  • packages/react-native/Libraries/Components/Pressable

1 file changed

+6
-2
lines changed

packages/react-native/Libraries/Components/Pressable/Pressable.js

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -245,6 +245,9 @@ function Pressable(
245245

246246
const [pressed, setPressed] = usePressState(testOnly_pressed === true);
247247

248+
const shouldUpdatePressed =
249+
typeof children === 'function' || typeof style === 'function';
250+
248251
let _accessibilityState = {
249252
busy: ariaBusy ?? accessibilityState?.busy,
250253
checked: ariaChecked ?? accessibilityState?.checked,
@@ -300,7 +303,7 @@ function Pressable(
300303
if (android_rippleConfig != null) {
301304
android_rippleConfig.onPressIn(event);
302305
}
303-
setPressed(true);
306+
shouldUpdatePressed && setPressed(true);
304307
if (onPressIn != null) {
305308
onPressIn(event);
306309
}
@@ -310,7 +313,7 @@ function Pressable(
310313
if (android_rippleConfig != null) {
311314
android_rippleConfig.onPressOut(event);
312315
}
313-
setPressed(false);
316+
shouldUpdatePressed && setPressed(false);
314317
if (onPressOut != null) {
315318
onPressOut(event);
316319
}
@@ -333,6 +336,7 @@ function Pressable(
333336
onPressOut,
334337
pressRetentionOffset,
335338
setPressed,
339+
shouldUpdatePressed,
336340
unstable_pressDelay,
337341
],
338342
);

0 commit comments

Comments
 (0)