Unable to figure out the source of the error - react native

Question

I am developing react-native app for quite sometimes. During my development, almost everyday i am facing some error/warning. Among them, the most comment error I've faced is this-> Warning: Can't perform a React state update on an unmounted component. I've searched everywhere, but couldn't find a proper solution. And this log also not explaining that much. So is there anyone who can explain this which will be much more understandable, or point me out where should I dig into to solve this error or what more should I study to understand the situation. Here is the full screenshot of this error. . And Here is the some code of one of my component:

//packages
import React, { useContext, useEffect, useState } from 'react';
import { ActivityIndicator, ImageBackground, Pressable, StyleSheet, Text, View } from 'react-native';

// third pirty packages
import { Button, HamburgerIcon, Menu, NativeBaseProvider, useToast } from 'native-base';
import Feather from 'react-native-vector-icons/Feather';
import Foundation from "react-native-vector-icons/Foundation";
import NetInfo from "@react-native-community/netinfo";
import {
  widthPercentageToDP as wp,
  heightPercentageToDP as hp,
  listenOrientationChange as lor,
  removeOrientationListener as rol
} from 'react-native-responsive-screen';


//assets and components
import { AuthContext } from './../context';    

const MainBody = (props) => {

  const { signOut } = useContext(AuthContext);
  const [isLoading, setIsLoading] = useState(false);
  const toast = useToast();

  useEffect(() => {
    lor();

    return () => {
      rol();
    };
  }, []);

  const styles = StyleSheet.create({
    wrapperView: {
      height: hp('87%'),
      paddingTop: hp('7%'),
      alignItems: 'center',
      backgroundColor: '#fff'
    },
    dashboardView: {
      width: '80%',
      display: 'flex',
      flexDirection: 'row',
      justifyContent: 'space-between',
      marginBottom: hp('3%')
    },
    dashboardCategory: {
      width: '45%',
      height: hp('20%'),
      borderRadius: 5,
      elevation: 5,
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'center',
      backgroundColor: '#FFFFFF'
    },
    iconStyle: {
      color: 'grey',
      fontSize: hp('5%'),
      alignSelf: 'center'
    },
    buttonText: {
      marginTop: 10,
      color: '#4b2e80',
      width: '100%',
      textAlign: 'center',
      fontSize: hp('2.7%')
    },
    headerButtonView: {
      position: 'absolute',
      top: hp('3%'),
      right: wp('5%')
    }
  });

  return (
    <View>
      <View style={styles.wrapperView}>
        <View style={styles.dashboardView}>
          <Button light style={styles.dashboardCategory}>
            <Feather style={styles.iconStyle} name="users" />
            <Text style={styles.buttonText}> Clip </Text>
          </Button>
          <Button light style={styles.dashboardCategory}>
            <Foundation style={styles.iconStyle} name='pound' />
            <Text style={styles.buttonText}> Balancing </Text>
          </Button>
        </View>
      </View>
      <View style={styles.headerButtonView}>
        <Menu
          trigger={(triggerProps) => {
            return (
              <Pressable accessibilityLabel="More options menu" {...triggerProps}>
                <HamburgerIcon color="#fff" />
              </Pressable>
            )
          }}
        >
          <Menu.Item onPress={() => signOut()}>Logout</Menu.Item>
        </Menu>
      </View>
    </View>
  );
}

export const DashboardScreen = ({ navigation }) => {
  return (
    <NativeBaseProvider>
      <MainBody navigate={navigation.navigate} />
    </NativeBaseProvider>
  );
}

what does the rol() do? you need to check whether the component is mounted or not — abhi patil
– abhi patil, Commented Dec 15, 2021 at 10:06
@abhipatil this is for responsive screen. If you check react-native-responsive-screen, then you will understand. — Alauddin Ahmed
– Alauddin Ahmed, Commented Dec 15, 2021 at 10:11

abhi patil · Accepted Answer · 2021-12-15 10:16:15Z

1

we need to unsubscribe the particular subscription before our components unmounts. it's a workaround but will get rid of the error.

 useEffect(() => {
let mounted = true
   if(mounted){
     lor();
    }
    
    return () => {
      rol();
      mounted= false
    };
  }, []);

answered Dec 15, 2021 at 10:16

abhi patil

5142 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alauddin Ahmed Over a year ago

Thanks for your time, i think the problem is occurring within package itself. It didn't stop the warning. But if i commented it out, it don't show it anymore. Is it possible to explain it little bit more, why we are doing this. The core reason behind it.

abhi patil Over a year ago

you can check this link----> react clenup function

Collectives™ on Stack Overflow

Unable to figure out the source of the error - react native

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related