title: Unable to figure out the source of the error - react native
body: <p>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-&gt; <code>Warning: Can't perform a React state update on an unmounted component</code>. 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.
  <a href="https://i.stack.imgur.com/7SQQY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7SQQY.png" alt="enter image description here" /></a>. And Here is the some code of one of my component:</p>
  <pre><code>//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 &quot;react-native-vector-icons/Foundation&quot;;
  import NetInfo from &quot;@react-native-community/netinfo&quot;;
  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) =&gt; {
  
    const { signOut } = useContext(AuthContext);
    const [isLoading, setIsLoading] = useState(false);
    const toast = useToast();
  
    useEffect(() =&gt; {
      lor();
  
      return () =&gt; {
        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 (
      &lt;View&gt;
        &lt;View style={styles.wrapperView}&gt;
          &lt;View style={styles.dashboardView}&gt;
            &lt;Button light style={styles.dashboardCategory}&gt;
              &lt;Feather style={styles.iconStyle} name=&quot;users&quot; /&gt;
              &lt;Text style={styles.buttonText}&gt; Clip &lt;/Text&gt;
            &lt;/Button&gt;
            &lt;Button light style={styles.dashboardCategory}&gt;
              &lt;Foundation style={styles.iconStyle} name='pound' /&gt;
              &lt;Text style={styles.buttonText}&gt; Balancing &lt;/Text&gt;
            &lt;/Button&gt;
          &lt;/View&gt;
        &lt;/View&gt;
        &lt;View style={styles.headerButtonView}&gt;
          &lt;Menu
            trigger={(triggerProps) =&gt; {
              return (
                &lt;Pressable accessibilityLabel=&quot;More options menu&quot; {...triggerProps}&gt;
                  &lt;HamburgerIcon color=&quot;#fff&quot; /&gt;
                &lt;/Pressable&gt;
              )
            }}
          &gt;
            &lt;Menu.Item onPress={() =&gt; signOut()}&gt;Logout&lt;/Menu.Item&gt;
          &lt;/Menu&gt;
        &lt;/View&gt;
      &lt;/View&gt;
    );
  }
  
  export const DashboardScreen = ({ navigation }) =&gt; {
    return (
      &lt;NativeBaseProvider&gt;
        &lt;MainBody navigate={navigation.navigate} /&gt;
      &lt;/NativeBaseProvider&gt;
    );
  }
  </code></pre>