Warning: Can't perform a React state update on an unmounted component hooks

Question

I'm getting this error and I don't understand what it means or how to get rid of it:

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. in Login (at App.js:93)

Do I need a mounting function??

this is my app.js file:

import React, { useState, useEffect } from 'react';
import {BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import {authenticationService} from '../services/authentication.service';
import Home from '../Pages/Desktop/Desktop';
import Login from '../Pages/Login_Register/Login';
import Register from '../Pages/Login_Register/Register';
import history from '../history';

const App = (props) => {
  const [currentUser, setCurrentUser] = useState(null);
  const [isAdmin, setIsAdmin] = useState(null);
  const [isVIP1, setIsVIP1] = useState(false);
  const [name, setName] = useState(null);
  const [id, setId] = useState('');

useEffect(() => {
  authenticationService.currentUser.subscribe(z => {
    setCurrentUser(z) 
  });
}, [])

    return (
      <div history={history}>
          <Router>
              <Nav>
                <div>
                </div>
              <div>
                <div>
                
                  <div>
                    <Switch>
                      <Route path="/register">
                        <Register />
                      </Route>
                      <Route path="/login">
                        <Login />
                      </Route>
                      <Route path="/home">
                        <Home />
                      </Route>
                    </Switch>
                  </div>
                
                </div>
              </div>
          </Router>
      </div>
    );
}

export default App;

since it says it is in Login here is my login.js

import React, { useState } from 'react';
import {authenticationService} from '../../services/authentication.service';
import { Redirect } from 'react-router'
import { useForm } from 'react-hook-form';
import './login_register.css';


export default function Login({props}) {
    const [currentUser, setCurrentUser] = useState(null);
    const [isAdmin, setIsAdmin] = useState(null);
    const [isVIP1, setIsVIP1] = useState(false);
    const [name, setName] = useState(null);
    const [id, setId] = useState('')
    const [submitted, setSubmitted] = useState(false);
    const { register, handleSubmit, errors } = useForm();
    if (submitted) {
        return <Redirect push to={{
          pathname: '/home'
        }}
        />
      }   

    const onSubmit=(data) => {
                  authenticationService.login(data)
                    .then(
                      user => {
                        const userdata = JSON.stringify(user)
                        setSubmitted(true)
                        setName(userdata.fornavn)
                    },
                    error => {
                        console.log(error);
                    }
                    );
    }


    
        return (
            <div>
                <h2>log ind</h2>
                    
                        <form onSubmit={handleSubmit(onSubmit)}>
                            <div>
                                <div>
                             <input name="email" type="text" ref={register({required: true})} />
                                </div>
                                <div>
                      <input name="password" type="password" ref={register({required: true})}/>
                                </div>
                                <div >
                                    <button type="submit">logind</button>
                                    
                                </div>
                            </div>
                    </form>
                
        </div>
    )
}

now since I'm not using async tasks in my code that can't be it but what is the subsciptions?? and how do I cleanup something I don't have?

Answer 1

Your culprit is almost certainly in your useEffect() . It should look something like this:

useEffect(() => {
  authenticationService.currentUser.subscribe(z => {
    setCurrentUser(z) 
  });
  return () => {
  // some function call that cancels the subscription like...
  // authenticationService.currentUser.unsubscribe()
  }
}, [])

What that unsubscribe function looks like is completely dependent upon your setup and how you want to handle it.

The jist of this error message is really just saying that there is a function outside of this page that was called and this page is expecting a response back but the page is now unmounting so the callback won't ever get to it.