How to fix Warning: Can't call setState (or forceUpdate) on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to `this.state` directly or define a `state = {};` class property with the desired state in the component. in React

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    // ✅ Correct: Direct assignment
    this.state = {
      data: null,
      loading: false
    };

    // ❌ Wrong: Don't call setState in constructor
    // this.setState({ loading: true });
  }
}

// Or use class property syntax (recommended)
class MyComponent extends React.Component {
  state = {
    data: null,
    loading: false
  };
}

class MyComponent extends React.Component {
  state = {
    data: null,
    loading: false
  };

  componentDidMount() {
    // ✅ Correct: setState is safe here
    this.setState({ loading: true });

    fetch('/api/data')
      .then(response => response.json())
      .then(data => {
        this.setState({ data, loading: false });
      })
      .catch(error => {
        this.setState({ error, loading: false });
      });
  }

  render() {
    const { data, loading } = this.state;
    if (loading) return <div>Loading...</div>;
    if (data) return <div>{data.name}</div>;
    return null;
  }
}

function MyComponent() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    // ✅ Correct: setState equivalent (setData) is safe in useEffect
    setLoading(true);

    fetch('/api/data')
      .then(response => response.json())
      .then(data => {
        setData(data);
        setLoading(false);
      })
      .catch(error => {
        console.error(error);
        setLoading(false);
      });
  }, []); // Empty dependency array = run once on mount

  if (loading) return <div>Loading...</div>;
  if (data) return <div>{data.name}</div>;
  return null;
}

// Class component
class MyComponent extends React.Component {
  _isMounted = false;

  componentDidMount() {
    this._isMounted = true;

    fetch('/api/data')
      .then(response => response.json())
      .then(data => {
        // Only update state if component is still mounted
        if (this._isMounted) {
          this.setState({ data });
        }
      });
  }

  componentWillUnmount() {
    this._isMounted = false;
  }
}

// Functional component with AbortController
function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    const abortController = new AbortController();

    fetch('/api/data', { signal: abortController.signal })
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => {
        if (error.name === 'AbortError') {
          console.log('Fetch aborted');
        }
      });

    // Cleanup function
    return () => {
      abortController.abort();
    };
  }, []);

  return data ? <div>{data.name}</div> : <div>Loading...</div>;
}

// ❌ Wrong: Deprecated and unsafe
class MyComponent extends React.Component {
  UNSAFE_componentWillMount() {
    // Don't do async operations here
    fetch('/api/data')
      .then(response => response.json())
      .then(data => this.setState({ data })); // May cause warnings
  }
}

// ✅ Correct: Use componentDidMount instead
class MyComponent extends React.Component {
  componentDidMount() {
    fetch('/api/data')
      .then(response => response.json())
      .then(data => this.setState({ data }));
  }
}