Adding 0.1 incrementally with setState gives out approximate numbers

[ldhieu]

I'm not sure whether this is as intended, or a problem with JavaScript, but I fiddled around with your example on facebook.github.io/react and tried this code:

var Timer = React.createClass({
  getInitialState: function() {
    return {secondsElapsed: 0};
  },
  tick: React.autoBind(function() {
    this.setState({secondsElapsed: this.state.secondsElapsed + 0.1});
  }),
  componentDidMount: function() {
    setInterval(this.tick, 100);
  },
  render: function() {
    return React.DOM.div({},
      'Seconds Elapsed: ' + this.state.secondsElapsed
    );
  }
});

React.renderComponent(Timer({}), mountNode);

The result comes out as 0.1, 0.2, ... as intended, but at some point the adding will give out numbers such as 0.30000000004 or 0.79999999999

Hope this explains well.

Hieu

[sophiebits]

This is standard behavior for JavaScript (unrelated to React), and is expected.

Floating-point numbers such as 0.1 and 0.2 can't be represented exactly in binary, so an approximation is used. It's as if you (in base 10) added 0.333 + 0.333 + 0.333 and got 0.999 instead of 1 -- just an artifact of the rounding that happens. Here's a Stack Overflow question explaining this phenomenon: http://stackoverflow.com/q/588004/49485

[zpao]

@ldhieu Yea, this is expected behavior with JS. One common solution when working with decimals (eg, currency) is to just use whole numbers, then divide by some number when you need to display the number to a use. $1.01 would be stored as 101 and then when displaying that to the user you would do num / 100.