/Javascript/React/React warning can't perform a react state update on an unmounted component

React warning can't perform a react state update on an unmounted component

componentWillUnmount() {
    // fix Warning: Can't perform a React state update on an unmounted component
    this.setState = (state,callback)=>{
        return;
    };
}

Source: stackoverflow.com

Can't perform a React state update on an unmounted component

// custom Hook for automatic abortion on unmount or dependency change
// You might add onFailure for promise errors as well.
function useAsync(asyncFn, onSuccess) {
  useEffect(() => {
    let isActive = true;
    asyncFn().then(data => {
      if (isActive) onSuccess(data)
      else console.log("aborted setState on unmounted component")
    });
    return () => {
      isActive = false;
    };
  }, [asyncFn, onSuccess]);
}

const Child = () => {
  const [state, setState] = useState("loading (4 sec)...");
  useAsync(simulateFetchData, setState);
  return <div>Child: {state}</div>;
};

const Parent = () => {
  const [mounted, setMounted] = useState(true);
  return (
    <div>
      Parent:
      <button onClick={() => setMounted(!mounted)}>
        {mounted ? "Unmount" : "Mount"} Child
      </button>
      {mounted && <Child />}
      <p>
        Unmount Child, while it is still loading. It won't set state later on,
        so no error is triggered.
      </p>
    </div>
  );
};

const simulateFetchData = () => new Promise(
  resolve => setTimeout(() => resolve("data fetched"), 4000));

ReactDOM.render(<Parent />, document.getElementById("root"));

Source: stackoverflow.com

Similar codes

6 votes153 views2 answers
Export 'useHistory' (imported as 'useHistory') was not found in 'react-router-dom'
Javascript React
1 vote154 views1 answer
Tailwind css react craco package.json
Javascript React
1 vote181 views1 answer
How to set limit in map in react hook
Javascript React
0 vote195 views2 answers
How to convert time to users timezone in react
Javascript React
0 vote140 views1 answer
React native font awesome
Javascript React
7 votes180 views2 answers
Import a script to my react componetn
Javascript React
0 vote158 views1 answer
Opening a link in another tab in react
Javascript React
0 vote163 views1 answer
How to take out text from array of strings in react
Javascript React
3 votes154 views2 answers
Yup checking phone number is valid react
Javascript React
0 vote216 views1 answer
React-beforeunload react navive
Javascript React