Warning: isMounted(...) is deprecated in plain Javascript Classes

Question

I am implementing 2 screens using react-navigation. But I got the warning below while navigating to the second page:

Warning: isMounted(...) is deprecated in plain Javascript Classes. Instead, make sure to clean up subscriptions and pending requests in componentWillUnmount to prevent memory leaks.

Versions:

react: 16.3.1
react-native: 0.55.2
react-navigation: 1.5.11
util: 0.10.3

Login.js

import React, { Component } from 'react';
import { Text, View, Image, TextInput, TouchableOpacity } from 'react-native';
import styles from "./styles";

export default class Login extends Component {
    constructor(props) {
    super(props);
}

render() {
    const { navigate } = this.props.navigation;     
    return (
        <View style={styles.container}>         
            <View style={styles.formContainer}>                 
                <TouchableOpacity style={styles.button} onPress={()=> navigate('Home')} >
                    <Text style={styles.buttonText}>LOGIN</Text>
                </TouchableOpacity>
            </View>
        </View>
    )
}

Home.js

import React, { Component } from 'react';
import { Text, View } from 'react-native';
import styles from "./styles";

export default class Home extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        const { navigate } = this.props.navigation;
        return(
            <View style={styles.container}>         
                <Text>Home Screen</Text>
            </View>
        )
    }
}

What am I missing here?

From the looks of it, there's an old module that you have installed that's probably calling the deprecated `isMounted` method. Try removing them one by one until the warning is gone. My guess is `react-navigation`. Did you try installing the latest version? — Ray, Apr 12 '18 at 06:20
Yes i updated it all 4 modules to latest version but didn't worked for me. Even also tried downgrading too. — Javascript Hupp Technologies, Apr 12 '18 at 06:23
Did you try removing them one by one? Also, do you have any other pages than home.js and login.js? — Ray, Apr 12 '18 at 06:25
No i don't have any other pages, ok let me try render home page without navigation. — Javascript Hupp Technologies, Apr 12 '18 at 06:27
Oh yes seems issue with `onPress={()=> navigate('Home')}` because when render home page default without navigation then warning disappears. — Javascript Hupp Technologies, Apr 12 '18 at 06:31
Okay... Your problem might be connected somehow to the router that you have chosen then. Try using a different one. I personally use `react-native-navigation` by Wix but you can also use `react-native-router-flux` if you don't feel like implementing your navigation natively. — Ray, Apr 12 '18 at 06:34

score 58 · Accepted Answer · answered Apr 12 '18 at 07:48

58

This is a problem with latest React Navigation and React Native. To silence it add:

import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']);

I expect it will be fixed in React Navigation within next few weeks.

answered Apr 12 '18 at 07:48

James

1,985
18
19

2

Thanks, but there is no other solution than keep silence this warning ? – Javascript Hupp Technologies Apr 12 '18 at 07:56
2

They are claiming it isn't React Navigation causing the issue. https://github.com/react-navigation/react-navigation/issues/3956 – Fook May 04 '18 at 19:16
1

Where Do I place this code? Didn't worked when I placed it in my App.js component. (using crna cli) – Giesburts May 06 '18 at 23:16
4

place it in `index.js` – AJ Genung May 07 '18 at 01:41
https://github.com/facebook/react-native/issues/18868 from the last comment: the fixes are part of the new 0.56 release candidate. – MoralCode Jul 04 '18 at 06:46
1

While this solution silences the YellowBox message, it doesn't seem to have any effect on silencing the output in the debugger, where the message repeats multiple times a second. – Myk Willis Oct 23 '18 at 19:27

Erwan · Answer 2 · 2018-05-09T16:42:16.650

7

Is is actually a React-Native issue

You can wait and check when a fix is available here: https://github.com/facebook/react-native/issues/18868

Or in the meantime you can hide the warning like suggested.

edited May 09 '18 at 16:42

answered Apr 24 '18 at 08:00

Erwan

73
3

1

According to that GItHub issue, it has been fixed in react-native v0.57.0 – Andrew Feb 14 '19 at 00:48

score 1 · Answer 3 · edited Oct 23 '18 at 08:16

1

Use this statement in index.js:

import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']);

edited Oct 23 '18 at 08:16

Ronan Boiteau

9,608
6
34
56

answered Jul 23 '18 at 10:23

Diksha Nagpal

11
1

score 0 · Answer 4 · edited Apr 22 '18 at 13:28

0

The following solution works for me:

import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']);

edited Apr 22 '18 at 13:28

pissall

7,109
2
25
45

answered Apr 22 '18 at 11:05

Romsun Pramudito

1

score 0 · Answer 5 · edited May 03 '18 at 13:19

0

react-navigation issue is now closed, you can look here

They are stating that it is a problem somewhere inside of react-native

edited May 03 '18 at 13:19

Matan Bobi

2,693
1
15
27

answered May 03 '18 at 12:12

Pavel Krčmář

121
2
5

Yes i looked but fact is warning comes when `navigate('page_name')` called – Javascript Hupp Technologies May 03 '18 at 12:54

score 0 · Answer 6 · answered May 03 '18 at 16:32

This is not from react-navigation as i looked into the node_modules and react-navigation doesn't use isMounted, Its coming from somewhere within React-Native, I have also done same hack used by @Romsun

    import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']);

score 0 · Answer 7 · answered May 11 '18 at 17:53

0

Ignoring this message is the wrong way for a good developer If we remove this problem then the memory leakage is decreased.

answered May 11 '18 at 17:53

Gajarajan

1

This answer is very concise, perhaps it should be a comment? Sometimes more details would be appreciated. However, thanks, as decreasing memory-leaks is always an important goal. – JosephDoggie May 11 '18 at 17:58
@Gajarajan Yes but till we have no other solution. – Javascript Hupp Technologies May 12 '18 at 06:18
We have to keep watch discussion [here](https://github.com/facebook/react-native/issues/18868) – Javascript Hupp Technologies May 12 '18 at 06:19

score 0 · Answer 8 · answered May 23 '18 at 05:32

0

If you are using EXPO for RN development then this issue is now fixed in expo 27.0.2.

See https://forums.expo.io/t/warnings-after-upgrade-to-expo-27/9579/12

answered May 23 '18 at 05:32

Pavel Krčmář

121
2
5

Can you please include the part on how to update expo to the latest version in your answer here? (Using blockquotes) That way, future visitors of this page would find the solution quicker. Thanks! – Filnor May 23 '18 at 06:36
For reference, this isn't a link-only answer. The answer says it was a bug and it was solved in a later version of Expo. The link is a reference to back that up – Zoe May 23 '18 at 09:18

score 0 · Answer 9 · answered Jun 03 '18 at 10:58

The answers above didn't work for me, but adding the following to index.js did the trick:

console.ignoreYellowBox = ['Warning: isMounted(...) is deprecated'];

Or upgrade to expo 27.0.2 which basically adds the above to Expo.js. See more information here: https://forums.expo.io/t/warnings-after-upgrade-to-expo-27/9579/10

As some of the other answers stated, it's a react-native issue so hopefully it will be fixed soon there and then in the following version of Expo.

score 0 · Answer 10 · edited Jun 11 '18 at 06:42

This is what i did for this problem for the time being:

step 1:Tap on the warning

step 2: In the yellow window click on the stack trace option in top right

step 3: Find the path where the warning has occured,ex:C:\Users\username\projectname\node_modules\react\cjs\react.development.js

step 4: Open the path in editor

step 5: Find the key word isMounted under the deprecated api's and delete the deprecated function and warning related under it.

step 6: Save and reload your app!!thats it

score 0 · Answer 11 · answered Jun 12 '18 at 14:22

0

If you are using an expo client, update your version to expo@27.0.2 which fixes this warning. . .

answered Jun 12 '18 at 14:22

Manoj

764
8
7

Warning: isMounted(...) is deprecated in plain Javascript Classes

11 Answers11

Linked