React can't perform state update on unmounted component - checking isMounted not fixing

Question

I am using axios to return data from an API and trying to present this in to various nested components in my React App.

The code looks something like this:

const Building = () => {
  const { bid } = useParams();
  const { userAccessToken } = useAuth();
  const [buildingData, setBuildingData] = useState([]);
  const bearerToken = `Bearer ${userAccessToken}`;
  React.useEffect(() => {
    let isMounted = true;
    const axiosConfig = {
      headers: { Authorization: bearerToken },
    };
    axios
      .get(
        "http://localhost:3001/building?requestedlid=2&requestedbid=" + bid,
        axiosConfig
      )
      .then(function (response) {
        if (isMounted) {
          setBuildingData(response.data[0]);
        }
      })
      .catch(function (error) {
        // handle error
        console.log(error);
      });
    return () => {
      isMounted = false;
    };
  }, [bearerToken, bid]);

  return (
    
      
      
        
          Home
          
            Portfolio
          
          Building Profile
        
        
          Building Profile
          
        
        
        
          
            
            
          
          
            
            
            
          
        
      
    
  );
};

My problem is I am receiving the common error:

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.

Using the methods described in many StackOverflow answers, to check an isMounted boolean as in my code above, I am unable to resolve the issue.

Weirdly, the issue specifically occurs when I am passing these two props to the BuildingProfile component:

created={buildingData.stats.created_date}
golive={buildingData.stats.golive_date}

If I don't pass these two props, everything else works fine.

I'm sure I'm missing something silly but after several hours of trying to figure it out I'm still stuck. Anybody who can provide a pointer or any tips, I would be really grateful.

Many thanks

--- Update - including the BuildingProfile component:

const BuildingProfile = ({
  name,
  status,
  description,
  created,
  golive,
  keycontacts,
}) => {
  // Modal config for "Deactivate Building"
  const initOpenModals = () => {
    let modals = {};
    colors.forEach((color, index) => {
      modals = Object.assign({}, modals, { [index]: false });
    });
    console.log(modals);
    return modals;
  };

  const [openModals, setOpenModals] = useState(() => initOpenModals());

  const toggle = (index) => {
    // Toggle selected element
    setOpenModals((openModals) =>
      Object.assign({}, openModals, { [index]: !openModals[index] })
    );
  };

  const notyf = useContext(NotyfContext);
  const [type] = useState("success");
  const [duration] = useState("5000");
  const [ripple] = useState(true);
  const [dismissible] = useState(false);
  const [positionX] = useState("right");
  const [positionY] = useState("top");

  const navigate = useNavigate();

  return (
    
      
        
          
            
              
                
                  
                
                
                   navigate("/buildings/edit")}>
                    Edit Building
                  
                  
                     toggle("deactivateBuilding")}>
                      Deactivate Building
                    
                     toggle("deactivateBuilding")}
                      centered
                    >
                      
                        Admin Function:  Deactivate Building
                      
                      
                        
                          Are you sure you want to deactivate the
                          Bus Works building? This will prevent the
                          building from showing up in the platform completely.
                        
                      
                      
                        {" "}
                        
                      
                    
                  
                
              
            
          
          {name}
          
            {status}
          
        
      
      
        Building Overview:
        {description}
        
          
            
              Created Date
              {created}
            
          
          
            
              Go-Live Date
              {golive}
            
          
          
            
              Key Contacts
              
                
                  Joe Bloggs
                    }
                  >
                    
                  
                
                
                  Joe Bloggs
                    }
                  >
                    
                  
                
                
                  Joe Bloggs
                    }
                  >
                    
                  
                
                
                  +2 more
                
              
            
          
        
      
    
  );
};

React can't perform state update on unmounted component - checking isMounted not fixing

0 Answers