Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

setState callbacks are sometimes not called #674

Closed
larpo opened this issue Jan 6, 2017 · 4 comments
Closed

setState callbacks are sometimes not called #674

larpo opened this issue Jan 6, 2017 · 4 comments
Labels

Comments

@larpo
Copy link

larpo commented Jan 6, 2017

Like the tittle says, it seems that inferno (inferno-compat@1.0.7) loses setState callbacks occasionally. Not exactly sure what triggers the bug (setState from inside componentWillReceiveProps?). Anyway, in the snip below, the setState callback in inner component never gets executed.


class Outter extends Component {
    constructor(){
        super();
        this.state = {text: "initial text"};
    }

    doStuff(){
        this.setState({text: "editex text"}, function(){
            console.log("called back from doStuff")
        });
    }
    componentDidMount(){
        setTimeout(()=> this.doStuff(), 1000);
    }

    render(){
        return <Inner txt={this.state.text}></Inner>;
    }
}

class Inner extends Component {
    constructor(props){
        super(props);
        this.state = {dirty: false, callback: false};
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.txt != this.props.txt) {
            this.setState({dirty: true}, () => {
              console.log("this get never called!")
              this.setState({callback: true});
           });
        }
    }
		
    render(){
        return <div>
          <p>{this.props.txt}</p>
          <p>callback called: {this.state.callback? "yes": "no"}</p>
          <p>dirty:  {this.state.dirty? "yes": "no"}</p>
        </div>;
    }
}

Made a jsfiddle out of it: https://jsfiddle.net/9fg6sxjk/9/
Notice how the state.callback never changes to "yes" and the later console log doesn't appear on console.

@Havunen
Copy link
Member

Havunen commented Jan 6, 2017

I have verified this is indeed bug, I hope dominic could take a look. ping @trueadm

@lukeed
Copy link
Member

lukeed commented Jan 6, 2017

Verified as well, even after fixing the componentWillReceiveProps body. It should be this:

this.setState({dirty: true}, () => {
  console.log("this get never called!")
  this.setState({callback: true});
});

This is because (1) props.text never changes in this fiddle and (2) the last this.setState lost its parent context.

@larpo
Copy link
Author

larpo commented Jan 6, 2017

@lukeed oops, good catch! I'll update the fiddle so that it won't confuse ppl...

@trueadm
Copy link
Member

trueadm commented Jan 6, 2017

I'll look into this one tomorrow if I get time. Some RL stuff to deal with this weekend!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Development

No branches or pull requests

4 participants