-1

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. in PokemonListItem (at PokemonList.jsx:148)

Okay so I know this is a common issue and the solution should be quite simple. I just don't know how to implement it to my code.

I'm making a kind of Pokédex for mobile using React-Native and PokéAPI. I'm not sure where the leak lies, so more experienced developers, please help.

PokemonListItem

export default function PokemonListItem({ url, Favorite }) {
  const [pokemondata, setData] = React.useState({});
  const [dataReady, setReady] = React.useState(false);
  const [isFavorite, setFavorite] = React.useState(false);

  const favoriteStatus = (bool) => {
    setFavorite(bool);
  };

  const getData = async () => {
    await fetch(url)
      .then((res) => res.json())
      .then((data) => setData(data));

    setReady(true);
  };

  React.useEffect(() => {
    getData();
  }, []);

  more code...

PokemonList

const renderItem = ({ item }) => (
    <TouchableHighlight
      style={{ borderRadius: 10 }}
      underlayColor="#ffc3c2"
      onPress={() => {
        navigation.navigate("Pokémon Details", {
          url: item.url,
        });
      }}
    >
      <PokemonListItem url={item.url} Favorite={FavoriteButton} />
    </TouchableHighlight>
  );

if you need to see the full code, you can visit the repository.

gosols
  • 1

3 Answers3

0

An approach seems to be to maintain a variable to see whether or not the component is still mounted or not, which feels smelly to me (React-hooks. Can't perform a React state update on an unmounted component)- but anyway this is how I would see it in your code...

   let isMounted;

   const getData = async () => {
     await fetch(url)
      .then((res) => res.json())
      .then((data) => { if(isMounted) setData(data)});

     setReady(true);
  };

  React.useEffect(() => {
    isMounted = true;
    getData();
    return () => {
      isMounted = false;
    }
  }, []);
andy mccullough
  • 9,070
  • 6
  • 32
  • 55
0

Try this

React.useEffect(() => {
 (async function onMount() {
   await fetch(url)
      .then((res) => res.json())
      .then((data) => setData(data));

    setReady(true);
 })();
}, []);
Amardeep Singh
  • 413
  • 4
  • 6
0

Similar to what was mentioned earlier, the key point being wrapping your state update setReady() in an if (mounted){} block .

  1. Create local variable to represent your initial mounted state let mounted = true; in your effect that has the async call
  2. Use the cleanup effect https://reactjs.org/docs/hooks-reference.html#cleaning-up-an-effect to set mounted to false return () => { mounted = false }
  3. Wrap the setState call with if (mounted) { setState(...)}
useEffect(() => {
  let mounted = true;
  const apiRequest = async (setReady) => {
     let response;
     try {
        response = await APICall();
        if (mounted) {
          setReady(response.data);
        }
     } catch (error) {}
  }
  apiRequest();
  return () => { mounted = false;}
})

https://codesandbox.io/s/upbeat-easley-kl6fv?file=/src/App.tsx

If you remove the || true call and refresh you'll see that the error for mem leak is gone.

moon
  • 71
  • 7