I am currently working on a music application and am running into a memory leak error message when navigating away from the details page.
When I use the back button to navigate back to my home page I get this error message in the console.
index.js:1 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
How do I fix this? I havn't had to deal with any code cleanup in the past while working with React.
ConcertDetails.js
import React, { useState, useEffect } from 'react';
import axios from '../utils/API';
const ConcertDetails = (Props) => {
const [details, setDetails] = useState({});
const [songs, setSongs] = useState([]);
useEffect(() => {
const url = '/concerts/' + Props.match.params.id.toString() + '/';
const getDetails = async () => {
const response = await axios.get(url, {}, {'Content-Type': 'application/json'});
setDetails(response.data);
setSongs(response.data.song);
};
getDetails();
});
const getSongs = () => {
return songs.map((song) => (
<li key={song.title}>{song.title}</li>
));
}
return (
<>
<h1>Concert Details</h1>
<p>Venue: {details.venue}</p>
<p>Date: {details.date}</p>
<ul>
{getSongs()}
</ul>
</>
)
}
export default ConcertDetails;
App.js
import React from 'react';
import './App.css';
import NavBar from "./components/Navbar";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Home from './pages';
import About from './pages/about';
import Contact from './pages/contact';
import SignUp from './pages/signup';
import SignIn from './pages/signin';
import ConcertDetails from './pages/concertDetails';
function App() {
return (
<Router>
<NavBar />
<Switch>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
<Route path="/signin" component={SignIn} />
<Route path="/signup" component={SignUp} />
<Route path="/concert/:id" component={ConcertDetails} />
</Switch>
</Router>
);
}
export default App;
You want to run useEffect only on first component render.
Add [] as the second param of useEffect.
useEffect(() => {
const url = '/concerts/' + Props.match.params.id.toString() + '/';
const getDetails = async () => {
const response = await axios.get(url, {}, {'Content-Type': 'application/json'});
setDetails(response.data);
setSongs(response.data.song);
};
getDetails();
}, []);
without the second param. the effect will run each time state / props is changed. Since the effect changes the state, this can cause an infinite loop.
Check the plnkr: CodeSanbox: https://codesandbox.io/s/suspicious-dew-rsz5s?file=/src/App.js
The explanation:
There are multiple issues, let's solve step by step
useEffect is running multiple times, we have to define a condition with the array of dependencies, I'll define it only runs on the mount with empty dependencies.setState after an async call. So, maybe at that moment, the component is already unmounted. For that reason, you have to run a safeSetState :). Basically, you have to validate before setState.First, we will define our hook validation of mount/unmounted:
useSafeWrite.js:
import React from 'react';
function useSafeWrite(dispatch) {
const mounted = React.useRef(false)
React.useLayoutEffect(() => {
mounted.current = true
return () => (mounted.current = false)
}, [])
return React.useCallback(
(...args) => (mounted.current ? dispatch(...args) : void 0),
[dispatch],
)
}
export default useSafeWrite;
And after that, we will redefine the setDetails and setSongs with our hook and use them inside our useEffect.
ConcertDetails
const [details, setDetails] = useState({});
const [songs, setSongs] = useState([]);
const safeSetDetails = useSafeWrite(setDetails);
const safeSetSongs = useSafeWrite(setSongs);
useEffect(() => {
const getDetails = async () => {
const url = '/concerts/' + Props.match.params.id.toString() + '/';
const response = await axios.get(url, {}, {'Content-Type': 'application/json'});
safeSetDetails(response.data);
safeSetSongs(response.data.song );
};
getDetails();
}, [safeSetDetails, safeSetSongs]);
CodeSanbox: https://codesandbox.io/s/suspicious-dew-rsz5s?file=/src/App.js