React.StrictMode issue
setState fires twice
HTML
<script src="https://unpkg.com/[email protected]/prop-types.js"></script>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container"></div>
Babel + JSX
class Component extends React.Component {
state = { 0: true };
onClick = () => {
console.log('click');
this.setState(prevState => {
console.log('computing new state for Component');
return { 0: !prevState[0] };
},
() => { console.log('state changed') });
}
render() {
return (
<h1 onClick={this.onClick}>Click me</h1>
);
}
}
class App extends React.Component {
render() {
return (
<React.StrictMode>
<Component />
</React.StrictMode>
);
}
}
ReactDOM.render(<App />, document.getElementById('container'));