Breaking News: Grepper is joining You.com. Read the official announcement!

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

Add Answer

|_Genos_| answered on October 15, 2020 Popularity 10/10 Helpfulness 5/10

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

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

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

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

Comment

useEffect(() => {
  let isMounted = true;               // note mutable flag
  someAsyncOperation().then(data => {
    if (isMounted) setState(data);    // add conditional check
  })
  return () => { isMounted = false }; // cleanup toggles value, if unmounted
}, []);                               // adjust dependencies to your needs

Popularity 10/10 Helpfulness 5/10 Language javascript

Source: stackoverflow.com

Tags: javascript react-state

Link to this answer
Share Copy Link

Contributed on Aug 27 2021

|_Genos_|

0 Answers Avg Quality 2/10

Closely Related Answers

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

Comment

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

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: stackoverflow.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Oct 15 2020

Dull Donkey

0 Answers Avg Quality 2/10

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

Comment

// 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"));

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: stackoverflow.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Jun 16 2021

0 Answers Avg Quality 2/10

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

Comment

export default function MyComponent() {
    const [loading, setLoading] = useState(false);
    const [someData, setSomeData] = useState({});
    let componentMounted = true; // (3) component is mounted
    // ...
    useEffect(() => {
        setLoading(true);
        someResponse = await doVeryLongRequest(); // it needs some time
        // When request is finished:
        if (componentMounted){ // (5) is component still mounted?
            setSomeData(someResponse.data); // (1) write data to state
            setLoading(false); // (2) write some value to state
        }
        return () => { // This code runs when component is unmounted
            componentMounted = false; // (4) set it to false if we leave the page
        }
    }, []);

    return (
        <div className={loading ? "loading" : ""}>
            {someData}
            <a href="SOME_LOCAL_LINK">Go away from here!</a>
        </div>
    );
}

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: stackoverflow.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Jul 02 2021

Hilarious Horse

0 Answers Avg Quality 2/10

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

Comment

useEffect(() => {
    const source = axios.CancelToken.source()

    const fetchUsers = async () => {
        try {
            await Axios.get('/users', {
                cancelToken: source.token,
            })
            // ...
        } catch (error) {
            if (Axios.isCancel(error)) {
            } else {
                throw error
            }
        }
    }

    fetchData()

    return () => {
        source.cancel()
    }
}, [])

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: dev.to

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on May 25 2021

Fierce Flamingo

0 Answers Avg Quality 2/10

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

Contents

More Related Answers

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

Closely Related Answers

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

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

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

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

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.