Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

202
Views
React causing: Can't perform a React state update on an unmounted component

My situation: After login I try to get username and save it to redux store after this redirect from login to home page(in this page I display list of tasks) and I'm getting: 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.

I try ususal isMounted trick but its not help.

Login.js

function getUsername(){
    let username = ""
    const headers = {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
    };

    try {
        axios.get(`${process.env.REACT_APP_API_URL}/api/get_username/`,{
                headers: headers,
            })
            .then(response => username = response.data["username"])
            .catch(error => setResponse(error.response))
    } catch (err) {
        console.log(err)
    }

    return username
}

const loginSubmit = e => {
    e.preventDefault()
    const headers = {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
        'X-CSRFToken': csrftoken,
    };
    const body = {username: username, password: password}
    try {
        axios.post(`${process.env.REACT_APP_API_URL}/api/login/`, body,{
                headers: headers,
            })
            .then(response => setResponse(response))
            .catch(error => setResponse(error.response))
    } catch (err) {
        console.log(err)
    }

    dispatch({type: "SET_NAME", name:getUsername()})
    Cookies.set("logged_in", "yes")

    navigate("/", {replace:true})
};

Home.js

function getTasks(isMounted){
    const headers = {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
    };
    try {
        axios.get(`${process.env.REACT_APP_API_URL}/api/tasks/`, {
            headers: headers,})
            .then(response => {if(isMounted ){setTasks(response.data)}})
            .catch(error => setTasks(error.response))
    } catch (err) {
        console.log(err)
    }
}

useEffect(() => {
    let isMounted = true;
    getTasks(isMounted);
    return () => {
        isMounted = false;
    };
}, []);
about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

You can use local storage.

Set item:

localStorage.setItem("name", JSON.stringify(name))

Get Item:

localStorage.getItem("name")
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!