Incremental React Game with setInterval: Cannot update during existing state transition - reactjs

Question

Im trying to get this code working as a "incremental" game, where the options will be displayed after some credits, but Im getting the following warning (only once):
Warning: Can't call setState (or forceUpdate) on an unmounted component.
index.js:2178 Warning: Cannot update during an existing state
transition (such as within render or another component's
constructor). Render methods should be a pure function of props and
state; constructor side-effects are an anti-pattern, but can be moved
to componentWillMount.
Here is the code:
import React, { Component } from 'react';
import { Grid, Button } from "semantic-ui-react";
class EventDashboard extends Component {
constructor(props) {
super(props)
this.state={
credits: 0,
newOption: false,
newOptionDirty: false,
}
this.addCredits = this.addCredits.bind(this)
this.renderNewOption = this.renderNewOption.bind(this)
this.intervalID = null;
}
addCredits() {
this.setState((previousState) => ({
credits: previousState.credits + 1
}))
}
componentDidMount() {
this.intervalID = setInterval(() => {
this.addCredits()
}, 1000)
}
componentWillUnmount() {
clearInterval(this.intervalID);
}
renderNewOption() {
if(this.state.credits === 5 && !this.state.newOptionDirty) {
// the warning happens here
this.setState(() =>({
newOptionDirty: true
}))
}
if(this.state.newOptionDirty) {
return(
<div>
<Button> Add new feature </Button>
</div>
)
} else {
return (
<div>no options until 5 credits</div>
)
}
}
render() {
return (
<Grid>
<Grid.Column width={10}>
<Button
onClick={this.addCredits}
>AddCredits</Button>
{this.renderNewOption()}
</Grid.Column>
<Grid.Column width={6}>
<h1>Credits</h1>
<h2>{this.state.credits}</h2>
</Grid.Column>
</Grid>
)
}
}
export default EventDashboard
In spite of this warning everything is working fine.
What good practice Im missing?

Answer 1

The problem is indeed with your renderNewOption() method and how you use it.
You are invoking renderNewOption() from render(), which is bad because you are doing a setState() in it. Remember that whenever you do setState() you update the state and trigger a new render. As such, having setState() inside the render() would create an infinite loop since the render function would keep calling itself.
In this particular case, you won't actually get an infinite loop because you have an if-case that prevents that, however your component will run it the first time (when newOptionDirty is still false). When that happens, your component hasn't mounted yet because the render() never finished before the this particular setState() was invoked.
TL;DR: Never call setState() during a render.
Try this instead:
componentDidMount() {
setInterval(() => {
this.addCredits()
}, 1000);
}
addCredits() {
this.setState((previousState) => ({
credits: previousState.credits + 1
});
}
renderNewOption() {
if(this.state.credits >= 5) {
return(
<div>
<Button> Add new feature </Button>
</div>
)
} else {
return (
<div>no options until 5 credits</div>
)
}
}
We don't need (and shouldn't) to create some new state variable inside the render. All we are interested in is if credits are equal to 5 or not.
Depending on its value, we return the appropriate React Element (button or no button).

Answer 2

Whenever you are doing any asynchronous stuff in your component like callbacks/Promises/setTimeout you might run into a situation when a component might have already been unmounted and you will try to update umounted component ( like in your case ) which might lead to memory leaks. This is one of the use cases for external state management libraries and middlewares like redux and redux-saga/redux-observable.
If you are going to do it in your components however you need to take care to do necessary cleanups when component unmounts. This is what for componentWillUnmount is used for:
constructor(props) {
super(props)
...
this.intervalID = null;
}
componentDidMount() {
this.intervalID = setInterval(() => {
this.addCredits()
}, 1000)
}
componentWillUnmount() {
clearInterval(this.intervalID);
}