CODEWITHSUNDEEP
javascriptreactjstypescriptreact-nativesetstate
Zain Khan
Zain Khan

Reputation: 1814

Warning: Can't perform a React state update on an unmounted component React Native

I don't know why I'm facing this issue. If anyone knows how to deal with it so please help. Thanks in advance

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in %s.%s, the componentWillUnmount method,
    in ToastContainer (at connectStyle.js:392)
    in Styled(ToastContainer) (at Root.js:16)
    in RCTView (at View.js:45)
    in View (at Root.js:14)
    in Root (at connectStyle.js:392)
    in Styled(Root) (at LoginScreen.js:93)
    in LoginScreen (at SceneView.js:9)
    in SceneView (at StackViewLayout.tsx:889)
    in RCTView (at View.js:45)
    in View (at StackViewLayout.tsx:888)
    in RCTView (at View.js:45)
    in View (at StackViewLayout.tsx:887)
    in RCTView (at View.js:45)
    in View (at createAnimatedComponent.js:151)
    in AnimatedComponent (at StackViewCard.tsx:106)
    in RCTView (at View.js:45)
    in View (at createAnimatedComponent.js:151)
    in AnimatedComponent (at screens.native.js:71)
    in Screen (at StackViewCard.tsx:93)
    in Card (at createPointerEventsContainer.tsx:95)
    in Container (at StackViewLayout.tsx:975)
- node_modules\react-native\Libraries\YellowBox\YellowBox.js:59:8 in error
- node_modules\expo\build\environment\muteWarnings.fx.js:27:24 in error
- ... 12 more stack frames from framework internals

Upvotes: 0

Views: 972

Answers (2)

Yahia Naguib
Yahia Naguib

Reputation: 311

First, you should wrap your app component with <Root> like this

<Root> 
  <App/>
</Root>

If you have already done this, then make sure you are not calling <Root> inside another <Root>. Refer to this link.

Upvotes: 1

Yash Agarwal
Yash Agarwal

Reputation: 49

The error means that you are trying to update the state of a component which is currently not mounted.

Since you have not shared any code, only guess I can make is that you are doing some asynchronous task (such as backend call) and updating the state of the component, but by the time the call is resolved, the component is already unmounted. Looking at the error, I think you are trying to change the state of the Toast component after its is dismissed.


Use componentWillUnmount to abort all asynchronous tasks before unmounting.

Upvotes: 0

Related Questions