roact icon indicating copy to clipboard operation
roact copied to clipboard

setState calls that are ignored by shouldUpdate do not update self.state

Open LPGhatguy opened this issue 6 years ago • 1 comments

If a state update is started by calling self.setState in a stateful component that has shouldUpdate defined, and shouldUpdate returns false, the state update is completely discarded.

This is a behavior divergence from React, where state will be updated but the component will not be re-rendered.

Here's a React code sample that demonstrates this difference:

class App extends React.Component {
  constructor() {
    super();
    this.state = { x: 6 };
  }
  
  shouldComponentUpdate() {
    return false;
  }
  
  render() {
    return (
      <button onClick={ () => this.setState({ x: 5 }) }>
        click: { this.state.x }
      </button>
    );
  }
  
  componentDidMount() {
    setInterval(() => { 
      console.log(this.state)
    }, 1000);
  }
}

React.render(<App />, document.getElementById('app'));

Before clicking the button, {x: 6} should be printed repeatedly, but after clicking it, {x: 5} will be printed instead without the button updating its text.

The equivalent code using Roact would continue to print {x: 6} even after the button is pressed.

LPGhatguy avatar Aug 13 '19 23:08 LPGhatguy

Should just be a matter of moving these 2 lines to before L433, right?

https://github.com/Roblox/roact/blob/deaa8000220252f6edc27ec15e5704266560ebe5/src/Component.lua#L450-L451

Kampfkarren avatar Sep 29 '19 22:09 Kampfkarren