Errors thrown in useEffect cleanup functions result in `Internal React error`

[nathell]

Description

When an app includes a functional component which calls React.useEffect with a cleanup callback, and that callback throws an error when called, the following is produced in the console:

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.

The error is not detectable otherwise: the error boundary component does not catch it, nor does installing a global handler with ErrorUtils.setGlobalHandler().

This is on React Native 0.66.3 and React 17.0.2. I’ve also checked React 17.0.1 (no difference in behaviour), and RN 0.65.0 (the one that we currently use in production) which also gobbles up the error, but silently, without producing any message in the console.

The app seemingly continues to work after the error occurs.

I don’t think this is an actual React bug (as opposed to React Native), because on web, the error appears in the browser console, as expected.

I checked only the debug build behaviour, not the release one. It may be the case that in release builds the error sometimes does bubble up to the global error handler (if set), because we’re seeing prod exceptions that are likely to be related to this issue. For the record, what causes this for us is this issue in react-navigation, exacerbated by the fact that they had moved removing listeners to a useEffects cleanup function.

Version

0.66.3

Output of react-native info

System:
    OS: macOS 11.4
    CPU: (6) x64 Intel(R) Core(TM) i5-8500B CPU @ 3.00GHz
    Memory: 1.97 GB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 15.3.0 - ~/.nvm/versions/node/v15.3.0/bin/node
    Yarn: 1.22.15 - /usr/local/bin/yarn
    npm: 7.0.14 - ~/.nvm/versions/node/v15.3.0/bin/npm
    Watchman: 2021.10.04.00 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.11.2 - /Users/nathell/.gem/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4
    Android SDK: Not Found
  IDEs:
    Android Studio: 3.6 AI-192.7142.36.36.6392135
    Xcode: 12.5/12E262 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.7 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2 
    react-native: 0.66.3 => 0.66.3 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

1. Create a RN app with react-native init myapp.

2. Edit App.js to read:

import React from 'react';
import { Text, TouchableOpacity, View, SafeAreaView } from 'react-native';

const Hello = () => {
  React.useEffect(() => {
    console.log("mount");
    return () => {
      console.log("cleanup");
      throw new Error("KABOOM!");
      console.log("cleanup 2");
    };
  }, []);
  return <Text>Hello!</Text>;
}

const App = () => {
  const [shown, show] = React.useState(false);
  const onPress = () => show(!shown);

  return (
    <SafeAreaView>
      { shown ? <Hello /> : null }
      <TouchableOpacity onPress={onPress}>
        <Text>Touch me</Text>
      </TouchableOpacity>
    </SafeAreaView>
  );
};

export default App;

3. Run the resulting app (on either iOS or Android) and tap Touch me twice.

Expected result (in the react-native start output):

 LOG  mount
 LOG  cleanup
 ERROR  Kaboom!

Actual result:

 LOG  mount
 LOG  cleanup
 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.

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

No response

[nathell]

Out of curiosity, I checked React 16.13.1. Same behaviour in RN.

I’ve also checked that, in browser, React 17.0.2 (but not 16.13.1) gobbles up the error as well when using a production build:

	React 16.13.1	React 17.0.2
Development	✅ Throws error	✅ Throws error
Production	✅ Throws error	❌ Captures error

Experimental code (save as index.html and open in browser; replace production.min.js with development.js and 17 with 16.13 as needed):

<div id="root"></div>
<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
<script>
const h = React.createElement;

const Hello = () => {
  React.useEffect(() => {
    console.log('mount');
    return () => {
      console.log('cleanup');
      throw new Error('KABOOM!');
      console.log('cleanup2');
    }
  }, []);
  return 'Hello!';
}

const App = () => {
  const [shown, show] = React.useState(true);
  return h('div', null, [
    shown ? h(Hello, {}, null) : null,
    h('button', {onClick: () => show(!shown)}, 'Toggle')
  ]);
}

ReactDOM.render(
  h(App, {}, null),
  document.getElementById("root")
);
</script>

Possibly related: https://github.com/facebook/react/issues/22650

[github-actions[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.

[mehdinourollah]

Any updates?

[KrisLau]

@nathell Did you ever figure out

[Kailash-MAF]

Any update regarding fix ?

[AftabUfaq]

any solution for this

[Kailash-MAF]

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.

[AftabUfaq]

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.

this us an issue with native base

[Kailash-MAF]

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 ?

[AftabUfaq]

@Kailash-MAF trying to find out this issue. but didnt find out

[walid-mos]

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

[NaashNix]

I got the same 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 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 Register) in Register (created by SceneView) in StaticContainer in EnsureSingleNavigator (created by SceneView) in SceneView (created by SceneView) in RCTView (created by View) in View (created by DebugContainer) in DebugContainer (created by MaybeNestedStack) in MaybeNestedStack (created by SceneView) 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 SceneView) in SceneView (created by NativeStackViewInner) in Suspender (created by Freeze) in Suspense (created by Freeze) in Freeze (created by DelayedFreeze) in DelayedFreeze (created by ScreenStack)

[yirenkeji555]

solved it ?

[mcanikhilprajapati]

same issue facing here

[aphillipo]

I also have this issue...

[hendradedis]

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

[Tran281]

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

[KrisLau]

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

[thong-dipro]

Same problems. Device Infor:

Window 11
Android 12

[grant-solomons]

I am experiencing the same problem. The error gets thrown when I fast refresh but not when I enter the page

[grant-solomons]

I am experiencing the same problem. The error gets thrown when I fast refresh but not when I enter the page

I removed async and await from a useEffect

[Degan90]

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.

any update?? I get the same error when I updated my RN to .0.71.1

[KrisLau]

@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

[colaquecez]

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

[jarapamikaella]

any updates?

[trehman82]

any solution???????

[KrisLau]

@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.

[trehman82]

@jarapamikaella @trehman82 and any future commenters. Please read the comments already left in this issue: #32673.

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.

Thanks for reply. Actually I am not using useEffect in my project. All the components are class based. I don't know whats the matter. Regards!

[KrisLau]

@zahid502 I've already stated my answer numerous times in the thread above. No one can help you since it is likely a problem with your code. Do not ping specific commenters unless you are specifically replying to them.

[UnderTheMoonspell]

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

[henaharon]

The return in a useEffect should be a function: https://reactjs.org/docs/hooks-effect.html#:~:text=Effects%20with%20Cleanup. 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.