In React Native, if you try to access or modify the state of a component after it has been unmounted, you may encounter issues such as memory leaks or unexpected behavior. This situation can occur when asynchronous operations, like network requests or timers, complete after the component has been unmounted.

To handle this situation, you can use the isMounted flag or the useEffect cleanup function to ensure that you're not performing any actions on an unmounted component. Here's an example using a class component and a functional component with hooks:

Class Component:

class MyComponent extends React.Component {
  _isMounted = false;

  componentDidMount() {
    this._isMounted = true;

    // Your asynchronous operations here
    fetchData()
      .then(data => {
        if (this._isMounted) {
          // Access or update state only if the component is still mounted
          this.setState({ data });
        }
      })
      .catch(error => {
        console.error(error);
      });
  }

  componentWillUnmount() {
    this._isMounted = false;
  }

  render() {
    // Render component content
  }
}

Functional Component with Hooks:

import React, { useState, useEffect } from 'react';

const MyComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    let isMounted = true;

    // Your asynchronous operations here
    fetchData()
      .then(result => {
        if (isMounted) {
          // Access or update state only if the component is still mounted
          setData(result);
        }
      })
      .catch(error => {
        console.error(error);
      });

    return () => {
      // Cleanup function to set isMounted to false when the component is unmounted
      isMounted = false;
    };
  }, []); // Empty dependency array means this effect runs once (on mount) and cleans up on unmount

  // Render component content
};

export default MyComponent;

By using either the isMounted flag in class components or the cleanup function in the useEffect hook for functional components, you can avoid issues related to accessing or modifying the state of an unmounted component.

Call Function After Component Unmount

Class Component:

Functional Component with Hooks: