0

i have very strange problem my console return 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.

i readed on topics here i and tryed alot of solutions with unmounted example true and false but i didnt solve my problem heres the code:

  const [getCompany, setgetCompany] = useState('');
  useEffect(() => {
    const fetchCompany = async () => {
      try {
        const responseData = await sendRequest(
          `http://localhost:5000/api/companies/${props.company}`, 
        );
        
        setgetCompany(responseData);
      } catch (err) {}
    };
    props.company && fetchCompany();    
  }, [props.company]);

and in return i did this:

  {(() => {
          if(getCompany){
          return  Object.keys(getCompany).map((item,index) => {
              return(
                <img
                key={getCompany[item].id}
                src={`http://localhost:5000/${getCompany[item].image}`}
                alt={getCompany[item].title}
                />
              )
          })
          }  
        })()}

this is just function to get details from companies like photo, any help?

sh4dow
  • 21
  • 6
  • Your ```useEffect``` needs a cleanup function that cancels your request on unmount. Search the react docs for ```useEffect``` cleanup and you should find everything you need :) – Kyle Lambert Dec 16 '20 at 16:04
  • i already tried something like this if u talk about this https://dev.to/otamnitram/react-useeffect-cleanup-how-and-when-to-use-it-2hbm but it didnt solve my problem... – sh4dow Dec 16 '20 at 16:07
  • What library are you using for your requests? – Kyle Lambert Dec 16 '20 at 16:09
  • https://pastebin.com/6y1HnF73 – sh4dow Dec 16 '20 at 16:12
  • check this link https://stackoverflow.com/questions/53949393/cant-perform-a-react-state-update-on-an-unmounted-component?rq=1 – Saeed Mansoori Nov 26 '22 at 14:29

1 Answers1

1

You need to cancel your promise & request somehow when unmounting. Here is a generic json fetch example with async task cancellation. The network request will be aborted, not just ignored the result (Live demo):

import React, { useEffect, useState } from "react";
import { CPromise, CanceledError } from "c-promise2";
import cpFetch from "cp-fetch";

function MyComponent(props) {
  const [text, setText] = useState("fetching...");

  useEffect(() => {
    console.log("mount");
    const promise = CPromise.from(function* () {
      try {
        const response = yield cpFetch(props.url);
        const json = yield response.json();
        setText(`Success: ${JSON.stringify(json)}`);
      } catch (err) {
        console.warn(err);
        CanceledError.rethrow(err); //passthrough
        // handle other errors than CanceledError
        setText(`Failed: ${err}`);
      }
    }, []);

    return () => {
      console.log("unmount");
      promise.cancel();
    };
  }, [props.url]);

  return <p>{text}</p>;
}
Dmitriy Mozgovoy
  • 1,419
  • 2
  • 8
  • 7