Must React components act like pure functions with respect to their props?

Question

I'm going through the React documentation and read this line (bolding theirs):

All React components must act like pure functions with respect to their props.

Is this a strict requirement or a design principle to avoid unintended behavior?

The example Facebook provides of an "impure" function is one that modifies its input. But it looks like it is possible for a React component to modify the props it receives as input (I've mirrored the example below off of their own example).

Code Pen: Impure Component w/ Respect to Props?

JSX code:

var Withdraw = React.createClass({
  render() {
    this.props.account.balance -= this.props.amount;
    return (
      <div>Balance: ${this.props.account.balance} </div>
    )
  }
})

var CounterContainer = React.createClass({
  render() {
    var account = { balance: 10 }
    return (
      <div>
        <Withdraw account={account} amount={2} />
        <Withdraw account={account} amount={2} />
      </div>
    )   
  }
})

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

Also: I'm aware that the above could be written as a stateless functional component and that state should not be stored outside of this.state.

Answer 1

Like facebook said, if you need it to change. Use state.

Functions have to be pure, meaning

1. The function always evaluates the same result value given the same argument value(s). The function result value cannot depend on any hidden information or state that may change while program execution proceeds or between different executions of the program, nor can it depend on any external input from I/O devices.

2. Evaluation of the result does not cause any semantically observable side effect or output, such as mutation of mutable objects or output to I/O devices.

in other words a pure function

• Given the same input, will always return the same output.
• Produces no side effects . Relies on no external state.

React is pretty flexible but it has a single strict rule:

All React components must act like pure functions with respect to their props.

Of course, application UIs are dynamic and change over time. In the next section, we will introduce a new concept of "state". State allows React components to change their output over time in response to user actions, network responses, and anything else, without violating this rule.

Your Facebook Link

Here is a nice article

More about pure functions