Skip to content

Commit

Permalink
Fix TouchableOpacity componentDidUpdate causing an excessive number o…
Browse files Browse the repository at this point in the history
…f pending callbacks (facebook#35387)

Summary:
The commit facebook@3eddc9a included on v0.69 introduced a wrong `if` statement inside the `componentDidUpdate` function of the `TouchableOpacity` component. As this `if` statement always evaluates to `true` (`(true || false) !== undefined`) we end up making unnecessary calls to the `_opacityInactive` method every time the component props changes, e.g. every time a `<Text>` inside the TouchableOpacity changes we call this function over and over, and this has been causing some performance issues on big lists.

This PR fixes this problem by adjusting the `componentDidUpdate` function to only call  `_opacityInactive` when necessary.

Closes facebook#34442
Closes facebook#32476

## Changelog

[General] [Fixed] - Fix TouchableOpacity componentDidUpdate causing an excessive number of pending callbacks

Pull Request resolved: facebook#35387

Test Plan:
1. Open the RNTester app and navigate to the `Touchable* and onPress` page
2. Test the `TouchableOpacity` component through the many sections

Reviewed By: cipolleschi

Differential Revision: D41397396

Pulled By: ryancat

fbshipit-source-id: 24863b5cbbdd2f3dd1f654b43d7031560937b888
  • Loading branch information
gabrieldonadel authored and OlimpiaZurek committed May 22, 2023
1 parent 1c53efb commit 1f5e6c3
Showing 1 changed file with 2 additions and 3 deletions.
5 changes: 2 additions & 3 deletions Libraries/Components/Touchable/TouchableOpacity.js
Original file line number Diff line number Diff line change
Expand Up @@ -301,9 +301,8 @@ class TouchableOpacity extends React.Component<Props, State> {
this.state.pressability.configure(this._createPressabilityConfig());
if (
this.props.disabled !== prevProps.disabled ||
(flattenStyle(prevProps.style)?.opacity !==
flattenStyle(this.props.style)?.opacity) !==
undefined
flattenStyle(prevProps.style)?.opacity !==
flattenStyle(this.props.style)?.opacity
) {
this._opacityInactive(250);
}
Expand Down

0 comments on commit 1f5e6c3

Please sign in to comment.