withState can only be used once

[IgnusG]

I'm trying to use withState to set several setFoo functions but only one is ever applied. The others are ignored and throw undefined errors when used. My Example:

const withStates = [
  withState('result', 'setResult', 0),
  withState('a', 'setA', 0),
  withState('b', 'setB', 0)
];

Only setB is set. This worked early march but now seems to be broken.

[zanettin]

Thx for opening this report. Gonna check that asap. Bit busy at the moment but hope i can get an eye on it tomorrow.

[zanettin]

Hi @IgnusG

Played around with the latest inferno version 1.6.2 and it seams like everything works as expected. I guess your syntax is the problem here. Can you show me a bit more code (the composing of your array for example?).

what i've figured out is, that inferno treats it's setState a bit different than react does. If you call multiple setState calls in serie, they won't be batched and cause multiple re-renders of your component (if you not handle them by adding an update policy).

example:

doUpdate() {
  this.setState({a : this.state.a + 1})
  this.setState({b : this.state.b + 10})
  this.setState({c : this.state.c + 100})
}

IS NOT EQUAL TO:

doUpdate() {
  this.setState({
    a : this.state.a + 1,
    b : this.state.b + 10,
    c : this.state.c + 100,
  });
}

the first version causes 3 render() calls. the second just triggers the render() fn once.
same happens if you update states via incompose withState.

a working example of multiple withState props can look like this:

import Inferno from 'inferno';
import {compose, withState} from 'incompose';

const Test = (props) => {
  console.warn(props);

  return (<button
    onClick={() => {
      props.setA(props.a + 1);
      props.setB(props.b + 10);
      props.setC(props.c + 100);
    }}
  >update</button>);
};

export default compose(
  withState('a', 'setA', 1),
  withState('b', 'setB', 10),
  withState('c', 'setC', 100),
)(Test);

output:

[zanettin]

btw i've just updated incompose to v.0.0.12 including latest inferno dependencies 👍