Fb React: Clear Timer Interval to Prevent Warning: Can't perform a React state update on an unmounted component.

Have you seen this warning?

• 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 the componentWillUnmount method.

Prevent these Fb React warnings by handling the unmounting of the object.

copy

export default class SomethingWithATimer extends React.Component
{
    constructor(props, context)
    {
        super(props, context);
     
        this.state =
            {
                date: ""
            };

	//method to refresh data (maybe an ajax call)
        this.refresh_data = this.refresh_data.bind(this);
		
	//timer objects and values
        this.timer_default;
        this.timer_default_interval = 1000; //every 1 second
        this.timer_default_tick = this.timer_default_tick.bind(this);
    }
    componentDidMount()
    {
	//start timer		
        this.timer_default = setInterval(
            () => this.timer_default_tick(),
            this.timer_default_interval
        );
    }
    componentWillUnmount()
    {
        if (this.timer_default != null)
        {
            clearInterval(this.timer_default);
        }
    }
    timer_default_tick()
    {        
        this.refresh_data();        
    }
    refresh_data()
    {
        //do something, call ajax, update time
	var date = Date.now();
	this.setState({ date: date });
    }
    render()
    {        
        return (this.state.date);
    }
}