Fix TouchableOpacity componentDidUpdate causing an excessive number of pending callbacks #35387

gabrieldonadel · 2022-11-18T02:40:31Z

Summary

The commit 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 #34442
Closes #32476

Changelog

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

Test Plan

Open the RNTester app and navigate to the Touchable* and onPress page
Test the TouchableOpacity component through the many sections

analysis-bot · 2022-11-18T03:04:13Z

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	7,102,178	-91
android	hermes	armeabi-v7a	6,470,253	-1,206
android	hermes	x86	7,519,683	+65
android	hermes	x86_64	7,378,336	+298
android	jsc	arm64-v8a	8,967,121	+0
android	jsc	armeabi-v7a	7,697,980	+5
android	jsc	x86	9,029,282	-4
android	jsc	x86_64	9,507,103	+4

Base commit: 4d7ddd4
Branch: main

analysis-bot · 2022-11-18T03:35:30Z

Platform	Engine	Arch	Size (bytes)	Diff
ios	-	universal	n/a	--

Base commit: 4d7ddd4
Branch: main

pull-bot · 2022-11-18T03:49:28Z

PR build artifact for d3f397c is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

facebook-github-bot · 2022-11-18T07:29:44Z

@ryancat has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

benomatis · 2023-02-13T17:00:04Z

@gabrieldonadel when is this supposed to go live? It's still not in 0.71.2, I still have to use a patch for it... has it been missed maybe and never merged?

gabrieldonadel · 2023-02-13T21:48:28Z

@benomatis based on the changelog below this will most likely be released on 0.72

react-native/CHANGELOG.md

Line 206 in 728eef3

    
           - Fix TouchableOpacity componentDidUpdate causing an excessive number of pending callbacks ([8b1f6e09c1](https://github.com/facebook/react-native/commit/8b1f6e09c1b11e07096156d8d01aaff649745fbc) by [@gabrieldonadel](https://github.com/gabrieldonadel))

benomatis · 2023-02-13T21:51:25Z

thank you @gabrieldonadel

…f pending callbacks (#35387) Summary: The commit 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 #34442 Closes #32476 ## Changelog [General] [Fixed] - Fix TouchableOpacity componentDidUpdate causing an excessive number of pending callbacks Pull Request resolved: #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

fivecar · 2023-03-16T01:36:15Z

@benomatis : I just installed 0.71.4, and it seems to have the fix, FWIW. (Thanks, @gabrieldonadel, for fixing this. Spent a long time debugging my app until I saw this on the interwebs.)

benomatis · 2023-03-19T23:13:40Z

@fivecar Yes, I can confirm it's added to 0.71.4, thank you!

## Description Closes: #418 https://forbole.atlassian.net/browse/DFP-1113 This PR fixes appearance of the `Excessive number of pending callbacks` warning by updating react-naitve to `0.71.4`. The cause of the issue was due to an improper if check, which result in a constant re-render, thus triggering the warning to appear. Additional information on this error can be found [here](facebook/react-native#35387): --- ### Author Checklist *All items are required. Please add a note to the item if the item is not applicable and please add links to any relevant follow up issues.* - [x] included the correct [type prefix](https://github.com/commitizen/conventional-commit-types/blob/v3.0.0/index.json) in the PR title - [x] provided a link to the relevant issue or specification - [x] reviewed "Files changed" and left comments if necessary - [x] confirmed all CI checks have passed ### Reviewers Checklist *All items are required. Please add a note if the item is not applicable and please add your handle next to the items reviewed if you only reviewed selected items.* - [ ] confirmed the correct [type prefix](https://github.com/commitizen/conventional-commit-types/blob/v3.0.0/index.json) in the PR title - [ ] confirmed all author checklist items have been addressed

…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

victoriomolina · 2024-07-15T19:09:42Z

I am experiencing some issues opening a transparent modal with the keyboard opened. Also, I am listening to keyboard updates with 'will' and not 'did'. If I only listen 'didShow/didHide' events, the error disappear.

Open keyboard -> Press TouchableOpacity button -> Open transparent modal -> Keyboard is implicitly dismissed (automatically) -> Close modal -> Keyboard is opened again automatically with buggy behaviour -> ERROR!

   <Modal
      transparent
      visible={visible}
      animationType="fade"
      onRequestClose={onClose}
    >
      <View style={containerStyle}>
        {renderBlur()}
        {renderMain()}
        {renderCloseButton()}
      </View>
    </Modal>

This is the error I am getting:

Excessive number of pending callbacks: 501. Some pending callbacks that might have leaked by never being called from native code: {"1506":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1509":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1512":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1515":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1518":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1521":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1524":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1527":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1530":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1533":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1536":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1539":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1542":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1545":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1548":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1551":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1554":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1557":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1560":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1563":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1566":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1569":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1572":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1575":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1578":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1581":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1584":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1587":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1590":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1593":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1596":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1599":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1602":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1605":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1608":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1611":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1614":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1617":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1620":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1623":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1626":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1629":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1632":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1635":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1638":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1641":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1644":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1647":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1650":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1653":{"module":"UIManager","method":"configureNextLayoutAnimation"},"...(truncated keys)...":451}

As a workaround, I am replacing the TouchableOpacity with the one provided by react native gesture handler.

Any ideas?

darboleda-paycargo · 2024-08-05T20:49:18Z

I am experiencing some issues opening a transparent modal with the keyboard opened. Also, I am listening to keyboard updates with 'will' and not 'did'. If I only listen 'didShow/didHide' events, the error disappear.

Open keyboard -> Press TouchableOpacity button -> Open transparent modal -> Keyboard is implicitly dismissed (automatically) -> Close modal -> Keyboard is opened again automatically with buggy behaviour -> ERROR!

   <Modal
      transparent
      visible={visible}
      animationType="fade"
      onRequestClose={onClose}
    >
      <View style={containerStyle}>
        {renderBlur()}
        {renderMain()}
        {renderCloseButton()}
      </View>
    </Modal>

This is the error I am getting:

Excessive number of pending callbacks: 501. Some pending callbacks that might have leaked by never being called from native code: {"1506":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1509":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1512":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1515":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1518":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1521":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1524":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1527":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1530":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1533":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1536":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1539":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1542":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1545":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1548":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1551":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1554":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1557":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1560":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1563":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1566":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1569":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1572":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1575":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1578":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1581":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1584":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1587":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1590":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1593":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1596":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1599":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1602":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1605":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1608":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1611":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1614":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1617":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1620":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1623":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1626":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1629":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1632":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1635":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1638":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1641":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1644":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1647":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1650":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1653":{"module":"UIManager","method":"configureNextLayoutAnimation"},"...(truncated keys)...":451}

As a workaround, I am replacing the TouchableOpacity with the one provided by react native gesture handler.

Any ideas?

hey Victorio, have you found a solution? I'm running into this same exact error

darboleda-paycargo · 2024-08-05T22:23:13Z

I am experiencing some issues opening a transparent modal with the keyboard opened. Also, I am listening to keyboard updates with 'will' and not 'did'. If I only listen 'didShow/didHide' events, the error disappear.
Open keyboard -> Press TouchableOpacity button -> Open transparent modal -> Keyboard is implicitly dismissed (automatically) -> Close modal -> Keyboard is opened again automatically with buggy behaviour -> ERROR!

   <Modal
      transparent
      visible={visible}
      animationType="fade"
      onRequestClose={onClose}
    >
      <View style={containerStyle}>
        {renderBlur()}
        {renderMain()}
        {renderCloseButton()}
      </View>
    </Modal>

This is the error I am getting:

Excessive number of pending callbacks: 501. Some pending callbacks that might have leaked by never being called from native code: {"1506":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1509":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1512":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1515":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1518":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1521":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1524":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1527":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1530":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1533":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1536":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1539":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1542":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1545":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1548":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1551":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1554":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1557":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1560":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1563":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1566":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1569":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1572":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1575":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1578":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1581":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1584":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1587":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1590":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1593":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1596":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1599":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1602":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1605":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1608":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1611":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1614":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1617":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1620":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1623":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1626":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1629":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1632":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1635":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1638":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1641":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1644":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1647":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1650":{"module":"UIManager","method":"configureNextLayoutAnimation"},"1653":{"module":"UIManager","method":"configureNextLayoutAnimation"},"...(truncated keys)...":451}

As a workaround, I am replacing the TouchableOpacity with the one provided by react native gesture handler.
Any ideas?

hey Victorio, have you found a solution? I'm running into this same exact error

Temporary fix for me was to remove 'KeyboardAvoidingView' , as issue was only on iOS with this component

fix: TouchableOpacity excessive number of pending callbacks

d3f397c

facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Nov 18, 2022

facebook-github-bot closed this in 8b1f6e0 Nov 18, 2022

gabrieldonadel deleted the fix/touchable-opacity-component-did-update branch November 18, 2022 20:50

This was referenced Dec 20, 2022

Excessive number of pending callbacks: 501. #34376

Closed

Excessive number of pending callbacks: 501 #27483

Closed

MAVERlCK mentioned this pull request Mar 22, 2023

Excessive number of pending callbacks error software-mansion/react-native-reanimated#654

Closed

This was referenced Mar 28, 2023

Excessive number of pending callbacks slow down the app a lot at start desmos-labs/mooncake-mobile#418

Closed

fix(DFP-1113): fix excessive number of pending callbacks desmos-labs/mooncake-mobile#437

Merged

NOUIY mentioned this pull request Mar 30, 2023

[Snyk] Upgrade react-native from 0.63.3 to 0.71.4 NOUIY/react-native-macos#1020

Open

cipolleschi mentioned this pull request Aug 16, 2023

cipolleschi/add maven polling #39039

Merged

cipolleschi mentioned this pull request Sep 21, 2023

[LOCAL] Copy hermes ruby files to hermes folder in local E2E test #39577

Merged

cipolleschi mentioned this pull request Oct 11, 2023

cipolleschi/fix CI #40793

Merged

cipolleschi mentioned this pull request Nov 1, 2023

[RN][CI]Update node installation on debian (0.71) #41277

Merged

This was referenced Jan 8, 2024

[0.71][RN][General] Migrate boost download url away from JFrog #42177

Merged

[RN][iOS] Fix symbol not found _jump_fcontext with use_frameworks! #42229

Merged

cipolleschi mentioned this pull request Mar 6, 2024

[RN][iOS][0.71] Fix flipper for Xcode 15.3 #43345

Merged

cipolleschi mentioned this pull request Apr 5, 2024

cipolleschi/fix yoga archive 0.71 #43895

Closed

cipolleschi mentioned this pull request Apr 26, 2024

[iOS][Privacy Manifest] Set up privacy manifest for React Native 0.71 #44281

Merged

Fix TouchableOpacity componentDidUpdate causing an excessive number of pending callbacks #35387

Fix TouchableOpacity componentDidUpdate causing an excessive number of pending callbacks #35387

Uh oh!

Conversation

gabrieldonadel commented Nov 18, 2022

Summary

Changelog

Test Plan

Uh oh!

analysis-bot commented Nov 18, 2022

Uh oh!

analysis-bot commented Nov 18, 2022

Uh oh!

pull-bot commented Nov 18, 2022

Uh oh!

facebook-github-bot commented Nov 18, 2022

Uh oh!

benomatis commented Feb 13, 2023

Uh oh!

gabrieldonadel commented Feb 13, 2023

Uh oh!

benomatis commented Feb 13, 2023

Uh oh!

fivecar commented Mar 16, 2023

Uh oh!

benomatis commented Mar 19, 2023

Uh oh!

victoriomolina commented Jul 15, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

darboleda-paycargo commented Aug 5, 2024

Uh oh!

darboleda-paycargo commented Aug 5, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

victoriomolina commented Jul 15, 2024 •

edited

Loading