RubyLouvre / anu

the React16-compat library with hooks
https://rubylouvre.github.io/anu/
Apache License 2.0
3.19k stars 320 forks source link

[bugfix] useState/useReducer doesn't trigger render #1105

Closed lizheming closed 5 years ago

lizheming commented 5 years ago

There has difference behavior between React and anu.js when we setState in Render. Here is an example:

<script src="https://unpkg.com/anujs@1.5.6/dist/React.js"></script>
<div id="app"></div>
<script>
 const App = () => {
  const [show, up] = React.useState(true);
  const onClick = () => setTimeout(() => up(!show), 0);

  return (
    <button onClick={onClick}>
     click me! {show ? 'yes' : 'no'}
    </button>
  );
}

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

It seems hooks just update state date in queue, but render update will be triggered by other method for example Mouse Event. So the solution is that we add render update check in dispatch function directly, so we can trigger render.

Relate issue https://github.com/RubyLouvre/anu/issues/1054.