setState() called on an unmounted component

Question

The idea: I want to display time after login and hide it after logout. Program works, but after logout I get warning (look image 3). So, I wonder: will warning affect app, and if yes, how to solve this issue.

Here's Clock.jsx:

import React from 'react'

export class Clock extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            date: new Date()
        }
    }

    componentDidMount() {
        this.timerID = setInterval(
            () => this.tick(),
            1000
        )
    }    

    componentWillMount() {
        clearInterval(this.timerID)
    }

    tick() {
        this.setState({
            date: new Date()
        })
    }

    render() {
        return (
            <div>
                <hr />
                <p>Current Time: </p>
                <p>{this.state.date.toLocaleTimeString()}.</p>
                <hr />
            </div>
        )
    }
}

Calling that component in index.jsx:

function Logout(props) {
    return (        
        <div>
            <button className="btn btn-danger" onClick={props.onClick}>
                Logout
            </button>
            <Clock />
        </div>
    )
}

Image 1 - Login:

Image 2 - After login:

Image 3 - Warning after logout:

When you click logout, does it unmount your `` component? – Kyle Richardson Jul 24 '17 at 15:33 — Kyle Richardson, Jul 24 '17 at 15:33

score 0 · Accepted Answer · answered Jul 24 '17 at 15:53

0

Try calling clearInterval in componentWillUnmount. This insures that the setState method written inside tick is not called when your Clock component is not available in DOM.

answered Jul 24 '17 at 15:53

Ishan Trivid

101
3

1

Can you elaborate, why are you calling clearInterval in componentWillMount. – Ishan Trivid Jul 24 '17 at 16:17

score 0 · Answer 2 · answered Jul 24 '17 at 16:32

0

In Clock.jsx I made a mistake typing componentWillMount() instead of componentWillUnmount().

Old code fragment:

componentWillMount() {
    clearInterval(this.timerID)
}

Fixed:

componentWillUnmount() {
    clearInterval(this.timerID)
}

answered Jul 24 '17 at 16:32

BlackB0ne

135
1
10

setState() called on an unmounted component

2 Answers2