Excessive number of pending callbacks

[abdullahIsa]

Hello i keep getting this.

Please report: Excessive number of pending callbacks: 501. Some pending callbacks that might have leaked by never being called from native code: {"221048":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"221054":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"221058":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"222029":{"module":"ReanimatedModule","method":"getValue"},"222048":{"module":"ReanimatedModule","method":"getValue"},"222067":{"module":"ReanimatedModule","method":"getValue"},"222086":{"module":"ReanimatedModule","method":"getValue"},"222105":{"module":"ReanimatedModule","method":"getValue"},"222124":{"module":"ReanimatedModule","method":"getValue"},"222143":{"module":"ReanimatedModule","method":"getValue"},"222162":{"module":"ReanimatedModule","method":"getValue"},"222182":{"module":"ReanimatedModule","method":"getValue"},"222202":{"module":"ReanimatedModule","method":"getValue"},"222221":{"module":"ReanimatedModule","method":"getValue"},"222240":{"module":"ReanimatedModule","method":"getValue"},"222259":{"module":"ReanimatedModule","method":"getValue"},"222278":{"module":"ReanimatedModule","method":"getValue"},"222303":{"module":"ReanimatedModule","method":"getValue"},"222322":{"module":"ReanimatedModule","method":"getValue"},"222405":{"module":"ReanimatedModule","method":"getValue"},"222413":{"module":"ReanimatedModule","method":"getValue"},"222438":{"module":"ReanimatedModule","method":"getValue"},"222458":{"module":"ReanimatedModule","method":"getValue"},"222465":{"module":"ReanimatedModule","method":"getValue"},"222475":{"module":"ReanimatedModule","method":"getValue"},"222493":{"module":"ReanimatedModule","method":"getValue"},"222537":{},"222544":{"module":"ReanimatedModule","method":"getValue"},"222554":{"module":"ReanimatedModule","method":"getValue"},"222569":{"module":"ReanimatedModule","method":"getValue"},"222578":{"module":"ReanimatedModule","method":"getValue"},"222590":{"module":"ReanimatedModule","method":"getValue"},"222598":{"module":"ReanimatedModule","method":"getValue"},"222623":{"module":"ReanimatedModule","method":"getValue"},"222643":{"module":"ReanimatedModule","method":"getValue"},"222650":{"module":"ReanimatedModule","method":"getValue"},"222660":{"module":"ReanimatedModule","method":"getValue"},"222678":{"module":"ReanimatedModule","method":"getValue"},"222722":{},"222729":{"module":"ReanimatedModule","method":"getValue"},"222739":{"module":"ReanimatedModule","method":"getValue"},"222754":{"module":"ReanimatedModule","method":"getValue"},"222763":{"module":"ReanimatedModule","method":"getValue"},"222775":{"module":"ReanimatedModule","method":"getValue"},"222783":{"module":"ReanimatedModule","method":"getValue"},"222808":{"module":"ReanimatedModule","method":"getValue"},"222828":{"module":"ReanimatedModule","method":"getValue"},"222835":{"module":"ReanimatedModule","method":"getValue"},"222845":{"module":"ReanimatedModule","method":"getValue"},"222863":{"module":"ReanimatedModule","method":"getValue"},"...(truncated keys)...":451} at SkeletonContent (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.chappie&modulesOnly=false&runModule=true:270790:35) at RCTView at View at Shiver

[walterholohan]

Same here, @alexZajac are you still maintaining this repo?

[azc-lionx]

same here!!

[abraaoz]

I have a solution.

Before:

import React from 'react';
import SkeletonContent from 'react-native-skeleton-content-nonexpo';

const MyComponent = (): JSX.Element => {
  return <SkeletonContent ... />;
}

After:

import React, { useCallback } from 'react';
import SkeletonContent from 'react-native-skeleton-content-nonexpo';

const MyComponent = (): JSX.Element => {
  const MemoizedSkeletonContent = useCallback(() => <SkeletonContent ... />, [...]);
  return <MemoizedSkeletonContent />;
}

[walterholohan]

@abraaoz thank you, great solution

[walterholohan]

Maybe the above is a simpler solution to https://github.com/alexZajac/react-native-skeleton-content-nonexpo/pull/29

[alexZajac]

Pending on PR checks to merge the fix!

[alexZajac]

Closing as there is no PR and a fix has been provided!

[MetaBenji]

That fix didn't work for me. The fix also doesn't make sense. The purpose of useCallback is to prevent a memoized child component from re-rendering by maintain referential equality when passing a callback function as a prop. The suggested solution above is just returning the component on each re-render so it can be called again in the return of the component