javascript - Better way to clearTimeout in componentWillUnmount -
i have working loading component cancels out when has been loading 8 seconds. code works feels off me , i'm wondering if there better way this.
without setting this.mounted error:
warning: can update mounted or mounting component. means called setstate, replacestate, or forceupdate on unmounted component. no-op. please check code loading component.
this make me think timer not getting canceled continues this.sestate. why if set cleartimeout in componentwillunmount? there better way handle using global this.mounted?
class loading extends component { state = { error: false, }; componentdidmount = () => { this.mounted = true; this.timer(); }; componentwillunmount = () => { this.mounted = false; cleartimeout(this.timer); }; timer = () => settimeout(() => { (this.mounted && this.setstate({ error: true })) || null; }, 8000); render() { const { showheader = false } = this.props; const { error } = this.state; return ( <view style={backgroundstyle}> {showheader && <headershell />} {!error && <view style={loadingheight}> <platformspinner size="large" /> </view>} {error && <error code="service" />} </view> ); } } loading.proptypes = { showheader: proptypes.bool, }; loading.defaultprops = { showheader: false, }; export default loading;
this make me think timer not getting canceled
as pointy said, isn't. you're passing function (this.timer) cleartimeout. need pass settimeout return value (the handle of timer), can use handle cancel it.
in such simple componennt, don't see need timer function, adds complexity; i'd set timer in cdm:
class loading extends component { state = { error: false, }; componentdidmount = () => { // *** // remember timer handle // *** this.timerhandle = settimeout(() => { // *** this.setstate({ error: true }); // *** this.timerhandle = 0; // *** }, 8000); // *** }; // *** // *** componentwillunmount = () => { // *** // our timer running? // *** if (this.timerhandle) { // *** // yes, clear // *** cleartimeout(this.timerhandle); // *** this.timerhandle = 0; // *** } // *** }; // *** render() { const { showheader = false } = this.props; const { error } = this.state; return ( <view style={backgroundstyle}> {showheader && <headershell />} {!error && <view style={loadingheight}> <platformspinner size="large" /> </view>} {error && <error code="service" />} </view> ); } } loading.proptypes = { showheader: proptypes.bool, }; loading.defaultprops = { showheader: false, }; export default loading; but if there's more logic shown, or personal preference, yes, separate functions good:
class loading extends component { state = { error: false, }; componentdidmount = () => { this.settimer(); }; componentwillunmount = () => { this.cleartimer(); }; settimer = () => { if (this.timerhandle) { // exception? return; } // remember timer handle this.timerhandle = settimeout(() => { this.setstate({ error: true }); this.timerhandle = 0; }, 8000); }; cleartimer = () => { // our timer running? if (this.timerhandle) { // yes, clear cleartimeout(this.timerhandle); this.timerhandle = 0; } }; render() { const { showheader = false } = this.props; const { error } = this.state; return ( <view style={backgroundstyle}> {showheader && <headershell />} {!error && <view style={loadingheight}> <platformspinner size="large" /> </view>} {error && <error code="service" />} </view> ); } } loading.proptypes = { showheader: proptypes.bool, }; loading.defaultprops = { showheader: false, }; export default loading;
Comments
Post a Comment