React useEffect causing: Can't perform a React state update on an unmounted component
For me, clean the state in the unmount of the component helped.
const [state, setState] = useState({});useEffect(() => { myFunction(); return () => { setState({}); // This worked for me };}, []);const myFunction = () => { setState({ name: 'Jhon', surname: 'Doe', })}
Sharing the AbortController between the fetch() requests is the right approach.
When any of the Promises are aborted, Promise.all() will reject with AbortError:
function Component(props) { const [fetched, setFetched] = React.useState(false); React.useEffect(() => { const ac = new AbortController(); Promise.all([ fetch('http://placekitten.com/1000/1000', {signal: ac.signal}), fetch('http://placekitten.com/2000/2000', {signal: ac.signal}) ]).then(() => setFetched(true)) .catch(ex => console.error(ex)); return () => ac.abort(); // Abort both fetches on unmount }, []); return fetched;}const main = document.querySelector('main');ReactDOM.render(React.createElement(Component), main);setTimeout(() => ReactDOM.unmountComponentAtNode(main), 1); // Unmount after 1ms<script src="//cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.development.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.development.js"></script><main></main>
For example, you have some component that does some asynchronous actions, then writes the result to state and displays the state content on a page:
export default function MyComponent() { const [loading, setLoading] = useState(false); const [someData, setSomeData] = useState({}); // ... useEffect(() => { setLoading(true); someResponse = await doVeryLongRequest(); // it needs some time // When request is finished: setSomeData(someResponse.data); // (1) write data to state setLoading(false); // (2) write some value to state }, []); return ( <div className={loading ? "loading" : ""}> {someData} <a href="SOME_LOCAL_LINK">Go away from here!</a> </div> );}Let's say that user clicks some link when doVeryLongRequest() still executes. MyComponent is unmounted but the request is still alive and when it gets a response it tries to set state in lines (1) and (2) and tries to change the appropriate nodes in HTML. We'll get an error from subject.
We can fix it by checking whether compponent is still mounted or not. Let's create a variable componentMounted (line (3) below) and set it true. When component is unmounted we'll set it to false (line (4) below). And let's check the componentMounted variable every time we try to set state (line (5) below).
The code with fixes:
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> );}