Excessive number of pending callbacks: 501.

[nguptaesaral]

Description

Hi There,
I am using TouchableOpacity inside the FlatLis. And the FlatList data has 500 objects. when the data appearing on the screen, it is showing a warning as below

function for gating data
const CallLogsAPI = async (employee_id) => {
try {
// setIsLoading(true)
let res = await axios.post(${BASE_URL}/Temp/getCallLogs, { employee_id }, { timeout: 3000 })
let data = res.data.data
// console.log('apiLogData', data)
SetApiLogData(data)
setIsLoading(false)
}

    catch (e) { console.log("bb", e) }
    setIsLoading(false)
} 

return data to screen:

return (
<View style={{ height: '100%' }}>
{/* {
isLoading &&


}

<Icon name='sync-circle' size={70} color='#2196F3' onPress={() => { setIsLoading(true); GetDeviceLogs(employee_id) }} />
*/}

        <FlatList
            data={apiLogData}
            initialNumToRender='15'
            refreshControl={
                <RefreshControl
                  refreshing={isLoading}
                  onRefresh={()=>{setIsLoading(true); GetDeviceLogs(employee_id)}}
                  colors={['red','blue',"yellow"]}
                />}
            renderItem={({ item }) => {

                return (
                    <View style={[styles.card, styles.elevation]}>

                        <View style={{ flex: 2, flexDirection: "row", justifyContent: "space-between" }}>
                            <View >
                                <TouchableOpacity onPress={() => navigation.navigate("rename", { 'contactId': item.contactId })}>
                                    <Text style={styles.heading}>{item.name ? item.name : 'Unknown'}</Text>
                                </TouchableOpacity>
                            </View >
                            <View style={{ flexDirection: "row", justifyContent: "center", paddingRight:5 }}>

                                <TouchableOpacity onPress={() => ExtLinks(`tel:${item.phoneNumber}`)}>
                                    <Text style={{ marginHorizontal: 8 }}><SvgIcons.Call /></Text>
                                </TouchableOpacity>

                                {/* <TouchableOpacity onPress={() => ExtLinks(`sms:${item.phoneNumber}`)}>
                                    <Text style={{ margin: 5 }}><SvgIcons.Message /></Text>
                                </TouchableOpacity> */}

                                <TouchableOpacity onPress={() => ExtLinks(`whatsapp://send?phone=${item.phoneNumber}`)}>
                                    <Text style={{ marginHorizontal: 8 }}><SvgIcons.Whatsapp /></Text>
                                </TouchableOpacity>
                            </View>
                        </View>

                        <View style={{ flexDirection: "row", justifyContent: "space-between" }}>
                            <Text style={{color:"black"}}>
                                {item.phoneNumber} {item.type == 'UNKNOWN' ? '' : `(${item.duration}sec)`} <Icon
                                    name={item.type == 'INCOMING' ? 'phone-incoming' : item.type == 'OUTGOING' ? 'phone-outgoing' : 'phone-missed'}
                                    color={item.type == 'INCOMING' ? 'green' : item.type == 'OUTGOING' ? 'deepskyblue' : 'red'} />
                            </Text>
                            <Text style={{color:"black"}}> {item.dateTime} </Text>
                        </View>
                    </View>
                )
            }
            }
        />
    </View>
)

}

could you please suggest me a way how can i avoid this warning.
Thanks

Version

0.69.3

Output of npx react-native info

System:
OS: Windows 10 10.0.19044
CPU: (4) x64 Intel(R) Core(TM) i5-7400 CPU @ 3.00GHz
Memory: 510.30 MB / 7.89 GB
Binaries:
Node: 16.16.0 - C:\Program Files\nodejs\node.EXE
Yarn: Not Found
npm: 8.11.0 - C:\Program Files\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK:
API Levels: 31, 32, 33
Build Tools: 30.0.3, 31.0.0, 33.0.0
System Images: android-31 | Google APIs Intel x86 Atom_64, android-31 | Google Play Intel x86 Atom_64
Android NDK: Not Found
Windows SDK: Not Found
IDEs:
Android Studio: AI-212.5712.43.2112.8609683
Visual Studio: 17.2.32630.192 (Visual Studio Community 2022)
Languages:
Java: 17.0.4
npmPackages:
@react-native-community/cli: Not Found
react: 18.0.0 => 18.0.0
react-native: 0.69.3 => 0.69.3
react-native-windows: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

1

Snack, code example, screenshot, or link to a repository

[purplnay]

Same issue here when rendering this item:

<TouchableOpacity
  key={item.id}
  onPress={async () => setResult(await getPickedImageResult(item))}>
  <Image
    style={{ width: size, height: size }}
    source={{ uri: item.uri, width: item.width, height: item.height }}
  />
</TouchableOpacity>

For me the warning triggers after some scrolling, sometimes after rendering 70 items, sometimes after more.

Changing the TouchableOpacity to a Pressable component no more triggers the warning so I assume this is caused by TouchableOpacity?

[mjmasn]

Yeah this seems to be caused by a change to TouchableOpacity in React Native 0.69....

3eddc9a

(flattenStyle(prevProps.style)?.opacity !==
        flattenStyle(this.props.style)?.opacity) !==
        undefined

is always going to evaluate to true, therefore calling this._opacityInactive(250); as many times as the component is (re)rendered.

Quick fix: remove the !== undefined from node_modules/react-native/Libraries/Components/Touchable/TouchableOpacity.js then run npx patch-package react-native

[Charles-Johnson]

I get a similar error message but with react-native 0.68

VirtualizedList: You have a large list that is slow to update - make sure your renderItem function renders components that follow React performance best practices like PureComponent, shouldComponentUpdate, etc. Object {
  "contentLength": 6300.1904296875,
  "dt": 577,
  "prevDt": 3427,
}

Please report: Excessive number of pending callbacks: 501. Some pending callbacks that might have leaked by never being called from native code: {"108821":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"108824":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"108828":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"108831":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"108834":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"108838":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"108841":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"108844":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"108848":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"108851":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"108855":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"108864":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"111562":{"module":"UIManager","method":"measure"},"111563":{"module":"UIManager","method":"measure"},"111634":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"111638":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"111641":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"111644":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"111648":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"111651":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"111654":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"111658":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"111661":{},"111664":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"111668":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"111671":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"111674":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"111678":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"111681":{},"111685":{},"111689":{},"111693":{},"111697":{},"111701":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"111705":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"111709":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"111713":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"111717":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"111721":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"111725":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"111729":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"111738":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"111747":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"111751":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"111760":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"111769":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"111778":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"111782":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"111791":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"111800":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"...(truncated keys)...":451}
at node_modules/react-native/Libraries/Utilities/warnOnce.js:27:2 in warnOnce
- ... 34 more stack frames from framework internals

[FrikkieSnyman]

@mjmasn that typo seems to be addressed here: #35387

[mjmasn]

@FrikkieSnyman yep 👍 I imagine it'll be released with React Native 0.72 unless it gets cherry picked onto 0.71 in the meantime

[linaia]

With react-native 0.71.3 (expo sdk48) it is not fixed, so you still have to patch it.

patches/react-native+0.71.3.patch
diff --git a/node_modules/react-native/Libraries/Components/Touchable/TouchableOpacity.js b/node_modules/react-native/Libraries/Components/Touchable/TouchableOpacity.js
index 2aef4e8..152c807 100644
--- a/node_modules/react-native/Libraries/Components/Touchable/TouchableOpacity.js
+++ b/node_modules/react-native/Libraries/Components/Touchable/TouchableOpacity.js
@@ -302,8 +302,7 @@ class TouchableOpacity extends React.Component<Props, State> {
     if (
       this.props.disabled !== prevProps.disabled ||
       (flattenStyle(prevProps.style)?.opacity !==
-        flattenStyle(this.props.style)?.opacity) !==
-        undefined
+        flattenStyle(this.props.style)?.opacity)
     ) {
       this._opacityInactive(250);
     }

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[linaia]

It's fixed in 0.72.6 (used by expo sdk49)

if (
      this.props.disabled !== prevProps.disabled ||
      // $FlowFixMe[underconstrained-implicit-instantiation]
      flattenStyle(prevProps.style)?.opacity !==
        // $FlowFixMe[underconstrained-implicit-instantiation]
        flattenStyle(this.props.style)?.opacity
    ) {
      this._opacityInactive(250);
    }

You can close the issue.

[tomerh2001]

Any updates? Experiencing this in v0.73.4

[nguptaesaral]

Any updates? Experiencing this in v0.73.4

Use Pressable instead of TouchableOpacity.

[saczx]

Same in v0.73.6, change TouchableOpacity to Pressable, didn't work at all

[yummyelin]

seeing same error in v0.73.8 for <TextInput /> given to ListHeaderComponent

[react-native-bot]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[react-native-bot]

This issue was closed because it has been stalled for 7 days with no activity.