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

nathell · 2021-11-29T17:57:21Z

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

Create a RN app with react-native init myapp.
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;

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

The text was updated successfully, but these errors were encountered:

nathell · 2021-11-29T21:13:42Z

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: facebook/react#22650

github-actions · 2022-05-29T02:16:31Z

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 · 2022-05-31T11:22:25Z

Any updates?

Kailash-MAF · 2022-09-30T06:45:53Z

Any update regarding fix ?

AftabUfaq · 2022-09-30T07:03:56Z

any solution for this

Kailash-MAF · 2022-09-30T07:06:07Z

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 · 2022-09-30T07:09:11Z

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 · 2022-09-30T07:11:02Z

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 · 2022-09-30T07:15:16Z

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

walid-mos · 2022-10-03T10:03:50Z

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 · 2022-10-05T13:19:54Z

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 · 2022-10-11T10:30:06Z

solved it ?

mcanikhilprajapati · 2022-10-11T17:35:14Z

same issue facing here

aphillipo · 2022-10-11T23:29:23Z

I also have this issue...

hendradedis · 2022-10-17T07:22:29Z

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

Tran281 · 2022-10-17T09:46:09Z

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

KrisLau · 2022-10-17T13:43:34Z

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 · 2022-12-18T09:33:10Z

Same problems.
Device Infor:

Window 11
Android 12

grant-solomons · 2023-01-10T20:34:48Z

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

grant-solomons · 2023-01-10T20:38:05Z

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 · 2023-01-27T18:22:03Z

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 · 2023-01-27T19:20:24Z

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

Errors thrown in useEffect cleanup functions result in Internal React error #32673 (comment)
Errors thrown in useEffect cleanup functions result in Internal React error #32673 (comment)

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 · 2023-02-05T07:24:29Z

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

jarapamikaella · 2023-02-08T04:11:25Z

any updates?

KrisLau · 2023-02-20T16:52:24Z

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

trehman82 · 2023-02-21T06:59:57Z

@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 · 2023-03-06T16:32:06Z

@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 · 2023-03-08T10:32:08Z

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 · 2023-03-20T07:47:26Z

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.

markobalogh · 2023-03-21T03:36:22Z

@UnderTheMoonspell I'm also getting this error without anything weird happening in my useEffect calls, and it's happening when I navigate to a route in @react-navigation. So I think you're on to something...

001mbilal · 2023-03-25T20:20:22Z

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();
},[]
)

001mbilal · 2023-03-25T20:24:21Z

The anothet possibilty is that when using addListener in ReactNative. i.e navigation.addListener() must need a route that you as a 2nd argument when you don't pass and destructure any route then that will be cause for undefined!

jheisondev · 2023-04-22T15:04:56Z

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!

KeaganStevens · 2023-05-05T12:45:13Z

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

Gilmara-Git · 2023-05-12T21:25:39Z

@colaquecez suggestion worked for me as well.

const updateDeviceDim =  Dimensions.addEventListener("change", updateWidth);
    return ()=>{
      updateDeviceDim.remove(); 
    }

    // Dimensions.addEventListener("change", updateWidth);
    // return () => {
    //   Dimensions.removeEventListener("change", updateWidth);
    // };

Thank you :)

alwex · 2023-05-20T02:23:14Z

for those having an issue with react-navigation, I had the same issue after upgrading to RN 0.71.8, my app is using react-navigation and I implemented deep linking following their documentation for v5 here: https://reactnavigation.org/docs/5.x/deep-linking

The doc provide an example with this piece of code:

    return () => {
      // Clean up the event listeners
      Linking.removeEventListener('url', onReceiveURL); <=== HERE
      branch.unsubscribe();
    };

wich was causing the issue on my app.
Note that the latest version of the doc: https://reactnavigation.org/docs/deep-linking/ provide an updated example

    return () => {
      // Clean up the event listeners
      unsubscribeFirebase();
      linkingSubscription.remove(); <=== HERE
    };

Hope this can help

jikseyres16 · 2023-07-10T00:59:45Z

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

You saved me, Thanks!

sevmezabdullah · 2023-08-02T19:28:35Z

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

FloatingAnoj · 2023-08-08T02:33:51Z

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

This fixed it for me. Good looking out. Thanks.

Azam-Ra · 2023-08-17T11:17:01Z

I have encountered the same error; furthermore, I've had an additional error:
TypeError: undefined is not a function, providing location of the error: ../node_modules/react-native-modal/dist/modal.js.
The invalid code was:

Instead of (correct code):

Turns out there is no such property as 'removeListeners' on type 'DeviceEventEmitterStatic'. Instead, the correct, existing property was removeAllListeners. However, note that editing code of the outsource library in node_modules is usually not a good idea.

I know it might seem as a stupid error, let me tell you, it is really stupid. But since I wasn't working on the project from the start, and also I was upgrading from RN version 0.66.5 to 0.72.3, I think it's acceptable. I just hope this will help someone to find a clue for the solution of their problem.

NathanCoquelin · 2024-02-16T01:33:50Z

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

react-native-bot · 2024-08-14T05:01:21Z

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 · 2024-08-21T05:24:32Z

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

nathell added the Needs: Triage 🔍 label Nov 29, 2021

github-actions bot added the Version: 0.66.3 label Nov 29, 2021

github-actions bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label May 29, 2022

github-actions bot removed the Stale There has been a lack of activity on this issue and it may be closed soon. label Jun 1, 2022

kelset removed the Version: 0.66.3 label Jan 23, 2023

This comment was marked as off-topic.

Sign in to view

henaharon mentioned this issue Mar 20, 2023

Bug: Cannot read property 'useState' of null facebook/react#24928

Closed

react-native-bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Aug 14, 2024

react-native-bot closed this as not planned Won't fix, can't repro, duplicate, stale Aug 21, 2024

Errors thrown in useEffect cleanup functions result in Internal React error #32673

Errors thrown in useEffect cleanup functions result in Internal React error #32673

Comments

nathell commented Nov 29, 2021

Description

Version

Output of react-native info

Steps to reproduce

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

nathell commented Nov 29, 2021 • edited Loading

github-actions bot commented May 29, 2022

mehdinourollah commented May 31, 2022

Kailash-MAF commented Sep 30, 2022

AftabUfaq commented Sep 30, 2022

Kailash-MAF commented Sep 30, 2022

AftabUfaq commented Sep 30, 2022

Kailash-MAF commented Sep 30, 2022

AftabUfaq commented Sep 30, 2022

walid-mos commented Oct 3, 2022

NaashNix commented Oct 5, 2022 • edited Loading

yirenkeji555 commented Oct 11, 2022

mcanikhilprajapati commented Oct 11, 2022

aphillipo commented Oct 11, 2022

hendradedis commented Oct 17, 2022

Tran281 commented Oct 17, 2022

KrisLau commented Oct 17, 2022

thong-dipro commented Dec 18, 2022

grant-solomons commented Jan 10, 2023

grant-solomons commented Jan 10, 2023

Degan90 commented Jan 27, 2023

KrisLau commented Jan 27, 2023 • edited Loading

colaquecez commented Feb 5, 2023

jarapamikaella commented Feb 8, 2023

This comment was marked as off-topic.

KrisLau commented Feb 20, 2023 • edited Loading

trehman82 commented Feb 21, 2023

KrisLau commented Mar 6, 2023

UnderTheMoonspell commented Mar 8, 2023 • edited Loading

henaharon commented Mar 20, 2023

markobalogh commented Mar 21, 2023

001mbilal commented Mar 25, 2023 • edited Loading

001mbilal commented Mar 25, 2023

jheisondev commented Apr 22, 2023

KeaganStevens commented May 5, 2023

Gilmara-Git commented May 12, 2023

alwex commented May 20, 2023

jikseyres16 commented Jul 10, 2023

sevmezabdullah commented Aug 2, 2023

FloatingAnoj commented Aug 8, 2023

Azam-Ra commented Aug 17, 2023 • edited Loading

NathanCoquelin commented Feb 16, 2024 • edited Loading

react-native-bot commented Aug 14, 2024

react-native-bot commented Aug 21, 2024

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

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

Output of `react-native info`

nathell commented Nov 29, 2021 •

edited

Loading

NaashNix commented Oct 5, 2022 •

edited

Loading

KrisLau commented Jan 27, 2023 •

edited

Loading

KrisLau commented Feb 20, 2023 •

edited

Loading

UnderTheMoonspell commented Mar 8, 2023 •

edited

Loading

001mbilal commented Mar 25, 2023 •

edited

Loading

Azam-Ra commented Aug 17, 2023 •

edited

Loading

NathanCoquelin commented Feb 16, 2024 •

edited

Loading