I don't understand where my React warning "can't call setstate on an unmounted component" comes from

Question

So I have the following code:

<UserConsumer>
{({ actions }) => {
    return (
        <span onClick={() => this.requestAuth(actions)}><MainButton name='Log in' /></span>
    )
}}
</UserConsumer>

Where this.requestAuth first sends a post request and - after succesful feedback - sets a state to 'true' using my actions event in my consumer. However, I have discovered - after experiencing - that I always get following error after wrapping my < span > in < UserConsumer >:

Warning: Can't call setState (or forceUpdate) 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 the componentWillUnmount method. in Login (at App.js:207).

However, I don't understand why this happens.

This is my full Login.js code:

export default class Login extends Component  {

    constructor (props) {
        super (props)
        this.state = {
            pwVisible : false,
            pwUser: '',
            mailUser: '',
            feedback: null
        }
    }

    requestAuth = (actions) => {
        axios({
            method: 'post',
            url: process.env.REACT_APP_API_AUTH,
            data: {
                username: this.state.mailUser,
                password: this.state.pwUser
            }
        })
        .then(
            (response) => {
                console.log(response)
                this.setState({
                    feedback: "Alright, welcome back! I'm gonna log you in!"
                }, actions.logIn())
            }
        )
        .catch(
            (error) => {
                console.log(error)
                this.setState({
                    feedback: "Sorry, I think your e-mail or password is incorrect. Wanna try again?"
                })
            }
        );

    }
    render () {
        return (
            <div id='login'>
                <div id='loginBox'>
                    {Logo}
                    <form>
                        <input className='input100' value={this.state.mailUser} onChange={thisValue => this.setState({mailUser : thisValue.target.value}) } type='email' name='user' placeholder='[email protected]' />
                        <input className='input100' value={this.state.pwUser} onChange={thisValue => this.setState({pwUser : thisValue.target.value}) } type={this.state.pwVisible? 'text' : 'password'} name='password' placeholder='Password' required />
                        <span className='pwIcon' onClick={this.state.pwVisible ? () => this.setState({pwVisible : false}) : () => this.setState({pwVisible : true})}>
                        {this.state.pwVisible ?
                            <Icon name='Visible' />
                        :
                            <Icon name='Hidden' />
                        }
                        </span>
                        <UserConsumer>
                            {({ actions }) => {
                                return (
                                    <span onClick={() => this.requestAuth(actions)}><MainButton name='Log in' /></span>
                                )
                            }}
                        </UserConsumer>
                    </form> 

                    <div className='gradientBorder'></div>
                </div>
            </div>
        );
    }
};

Answer 1

This warning because you call setState after component unmounted. Try setting a flag _isMounted and check before call setState:

export default class Login extends Component  {
    _isMounted = false;
    constructor (props) {
        super (props)
        this.state = {
            pwVisible : false,
            pwUser: '',
            mailUser: '',
            feedback: null
        }
    }

    componentDidMount() {
        this._isMounted = true;
    }

    componentWillUnmount() {
        this._isMounted = false;
    }

    requestAuth = (actions) => {
        axios({
            method: 'post',
            url: process.env.REACT_APP_API_AUTH,
            data: {
                username: this.state.mailUser,
                password: this.state.pwUser
            }
        })
        .then(
            (response) => {
                console.log(response)
                if (this._isMounted) {
                    this.setState({
                        feedback: "Alright, welcome back! I'm gonna log you in!"
                    }, actions.logIn())
                }
            }
        )
        .catch(
            (error) => {
                console.log(error)
                if (this._isMounted) {
                    this.setState({
                        feedback: "Sorry, I think your e-mail or password is incorrect. Wanna try again?"
                    })
                }
            }
        );

    }
    render () {
        return (
            <div id='login'>
                <div id='loginBox'>
                    {Logo}
                    <form>
                        <input className='input100' value={this.state.mailUser} onChange={thisValue => this.setState({mailUser : thisValue.target.value}) } type='email' name='user' placeholder='[email protected]' />
                        <input className='input100' value={this.state.pwUser} onChange={thisValue => this.setState({pwUser : thisValue.target.value}) } type={this.state.pwVisible? 'text' : 'password'} name='password' placeholder='Password' required />
                        <span className='pwIcon' onClick={this.state.pwVisible ? () => this.setState({pwVisible : false}) : () => this.setState({pwVisible : true})}>
                        {this.state.pwVisible ?
                            <Icon name='Visible' />
                        :
                            <Icon name='Hidden' />
                        }
                        </span>
                        <UserConsumer>
                            {({ actions }) => {
                                return (
                                    <span onClick={() => this.requestAuth(actions)}><MainButton name='Log in' /></span>
                                )
                            }}
                        </UserConsumer>
                    </form> 

                    <div className='gradientBorder'></div>
                </div>
            </div>
        );
    }
};

Hope this will help.