react-native: Errors thrown in useEffect cleanup functions result in `Internal React error`

I’ve fixed that by changing my listeners, with the new React Native version we need to change them.

Upgrading from react-navigation 5 to react-navigation 6 solved the problem for me.

The return in a useEffect should be a function: https://reactjs.org/docs/hooks-effect.html#:~:text=Effects with Cleanup. If you’re getting an error, check what you’re returning in the useEffect

I’ve fixed that by changing my listeners, with the new React Native version we need to change them.

I had already updated the listeners to: ⚠️⚠️⚠️⚠️⚠️⚠️

        Keyboard.addListener('keyboardDidShow', keyboardDidShow);
        Keyboard.addListener('keyboardDidHide', keyboardDidHide);

        // cleanup function
        return() => {
          Keyboard.removeAllListeners('keyboardDidShow');
          Keyboard.removeAllListeners('keyboardDidHide');
        };

But following @colaquecez suggestion worked great, problem solved. 🚀😁🎉😉👏🎊

        const unKeyboardDidShow = Keyboard.addListener('keyboardDidShow', keyboardDidShow);
        const unKeyboardDidHide = Keyboard.addListener('keyboardDidHide', keyboardDidHide);

        // cleanup function
        return() => {
          unKeyboardDidShow.remove();
          unKeyboardDidHide.remove();
        };

Thanks!

Check if any async is used inside useEffect hook and remove it. Worked for me

I got roughly the same issue here, with react base

Error Stack : 
Warning: Internal React error: Attempted to capture a commit phase error inside a detached tree. This indicates a bug in React. Likely causes include deleting the same fiber more than once, committing an already-finished tree, or an inconsistent return pointer.

Error message:

TypeError: undefined is not a function
    in HybridProvider (created by NativeBaseProvider)
    in ResponsiveQueryProvider (created by NativeBaseProvider)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by NativeBaseProvider)
    in NativeBaseConfigProviderProvider (created by NativeBaseProvider)
    in NativeBaseProvider (created by App)
    in Provider (created by App)
    in App

@jarapamikaella @trehman82 and any future commenters. Please read the comments already left in this issue: https://github.com/facebook/react-native/issues/32673?notification_referrer_id=NT_kwDOAsIbh7MyNzUwOTI2MDc0OjQ2Mjc1NDYz#issuecomment-1406970645.

There are no solutions/updates posted because as far as I can tell this is a problem the way you are using useEffect so you need to debug your own code.

@Degan90 and for anyone else in the future, it’s not an RN problem as far as I can tell. The problem is something to do with your code in the useEffect. Previous solutions from comments above:

• https://github.com/facebook/react-native/issues/32673#issuecomment-1280884078
• https://github.com/facebook/react-native/issues/32673#issuecomment-1280587000

Your problem might be different from the ones listed above but you’ll have to debug the code yourself to figure out the exact problem. I would start by reading the RN doc or searching up the error to find other mistakes when using useEffect that might be similar to yours

yap me too , have this issue , anyone can solve it ?

I also have this issue…

Full error

Warning: Internal React error: Attempted to capture a commit phase error inside a detached tree. This indicates a bug in React. Likely causes include deleting the same fiber more than once, committing an already-finished tree, or an inconsistent return pointer.

Error message:

TypeError: undefined is not a function
    in BottomTabBar (created by BottomTabView)
    in SafeAreaProviderCompat (created by BottomTabView)
    in BottomTabView (created by BottomTabNavigator)
    in BottomTabNavigator (created by BottomTabs)
    in BottomTabs (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by RouteView)
    in RCTView (created by View)
    in View (created by DebugContainer)
    in DebugContainer (created by MaybeNestedStack)
    in MaybeNestedStack (created by RouteView)
    in RNSScreen (created by AnimatedComponent)
    in AnimatedComponent
    in AnimatedComponentWrapper (created by InnerScreen)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by InnerScreen)
    in InnerScreen (created by RouteView)
    in RouteView (created by NativeStackViewInner)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by ScreenStack)
    in RNSScreenStack (created by ScreenStack)
    in ScreenStack (created by NativeStackViewInner)
    in NativeStackViewInner (created by NativeStackView)
    in RCTView (created by View)
    in View (created by SafeAreaInsetsContext)
    in SafeAreaProviderCompat (created by NativeStackView)
    in NativeStackView (created by NativeStackNavigator)
    in NativeStackNavigator (created by InsideStack)
    in InsideStack (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by CardContainer)
    in RCTView (created by View)
    in View (created by CardContainer)
    in RCTView (created by View)
    in View (created by CardContainer)
    in RCTView (created by View)
    in View
    in CardSheet (created by Card)
    in RCTView (created by View)
    in View (created by AnimatedComponent)
    in AnimatedComponent
    in AnimatedComponentWrapper (created by PanGestureHandler)
    in PanGestureHandler (created by PanGestureHandler)
    in PanGestureHandler (created by Card)
    in RCTView (created by View)
    in View (created by AnimatedComponent)
    in AnimatedComponent
    in AnimatedComponentWrapper (created by Card)
    in RCTView (created by View)
    in View (created by Card)
    in Card (created by CardContainer)
    in CardContainer (created by CardStack)
    in RNSScreen (created by AnimatedComponent)
    in AnimatedComponent
    in AnimatedComponentWrapper (created by InnerScreen)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by InnerScreen)
    in InnerScreen (created by Screen)
    in Screen (created by MaybeScreen)
    in MaybeScreen (created by CardStack)
 ERROR  Warning: Internal React error: Attempted to capture a commit phase error inside a detached tree. This indicates a bug in React. Likely causes include deleting the same fiber more than once, committing an already-finished tree, or an inconsistent return pointer.

@satya164 Do you have any solution regarding this ?

Hello,

You need:

useEffect(() => {
    const func = async() => {

   }
   func();
   // IMPORTANT
   return () => {};
}, []);

so you need to return a cleanup function in any case even if you don’t need it

<ApiProvider api={userApi} setupListeners={false}>{children}</ApiProvider> for react native v0.72.3 I fixed by adding setupListeners={false} it worked for me.

I thought the solution is that you guys, when calling event Listener … i.e–>> useEffect (e => { e.addEventListener} //you should do this… const any_name = e => { e.addEventListener}

// and for clearing the event you should this! return ()=> { any_name.remove(); },[] )

The return in a useEffect should be a function: https://reactjs.org/docs/hooks-effect.html#:~:text=Effects with Cleanup. If you’re getting an error, check what you’re returning in the useEffect

Thank you so much! migrating from RN 0.64 -> 0.71 and a lot of different things discovered.

We just upgraded React Native from 0.69.7 to 0.71.3 and we started getting this in tons of Testing Library tests. Started by removing all the useEffects in a component to test a simple render test, and was still getting the error. So I stripped the component of anything besides a View inside a SafeAreaView and still getting the error in the test.

So now the Tree is simply this:

const testingLibraryAPI = render(
    <NavigationContainer>
        <Navigator>
          <NavigatorScreen
            name={'TESTScreen'}
            component={Splash}
          />
        </Navigator>
    </NavigationContainer>
  );

Theres no error in the tests if I render the Component without the Navigator stack, so seems to be related to @react-navigation

same issue facing here