react component decorator for make sure this.setState() run at safe env. registry setState method with an empty function before unmount.
MIT License
react component decorator for make sure this.setState() run at safe env. registry setState method with an empty function before unmount.
yarn add @axetroy/react-safe-set-state
import React, { Component } from 'react';
import { render } from 'react-dom';
import safeSetState from '@axetroy/react-safe-set-state';
@safeSetState()
class Test extends Component {
state = {
id: Math.random()
};
componentWillUnmount() {
setTimeout(() => {
this.setState({ id: Math.random() });
}, 2000);
console.log('unmount');
}
render() {
return (
<div>
This is a test component., id: {this.state.id}
</div>
);
}
}
class App extends Component {
state = {
show: true
};
render() {
return (
<div>
<p>
Click the button the toggle the test component
</p>
<button onClick={() => this.setState({ show: !this.state.show })}>
{this.state.show ? 'Unmount' : 'mount'}
</button>
{this.state.show
? <Test />
: <p>
Test Component have unmount, check the call back
</p>}
</div>
);
}
}
const element = document.createElement('div');
document.body.appendChild(element);
render(<App />, element);
git clone https://github.com/axetroy/react-safe-set-state.git
yarn
yarn start
The MIT License