app.js

var dom = React.DOM;

var App = React.createClass({
  getInitialState: function() {
    return { todos: [] };
  },

  addTodo: function() {
    this.setState(update(this.state) {
      todos.push({ value: 'hello' });
    });
  },

  updateTodo: function(i, e) {
    // imperative:
    var todos = this.state.todos;
    todos[i].value = e.target.value;
    this.setState({ todos: todos });
    
    // functional: 
    // this.setState(update(this.state) {
    //   todos[i].value = e.target.value;
    // });
  },
  
  render: function() {    
    return dom.div(
      null,
      dom.button({
        onClick: this.addTodo
      }, 'click'),
      dom.ul(
        null,
        this.state.todos.map((todo, i) => {
          return dom.li(null, TodoItem({
            desc: todo.value,
            onChange: this.updateTodo.bind(this, i)
          }));
        })
      )
    ); 
  }
});

var TodoItem = React.createClass({
  shouldComponentUpdate: function(nextProps, nextState) {
    // won't nextProps *always* be a new object?
    return this.props !== nextProps || this.state != nextState;
  },
  
  render: function() {
    return dom.div(
      null,
      dom.input({ value: this.props.desc,
                  onChange: this.props.onChange }),
      this.props.desc
    )
  }
});

React.renderComponent(App(), document.body);

questions.md

I'm trying to understand how to leverage immutability, and have a few questions:

1. The imperative code in updateTodo is the kind of stuff you can't guarantee people won't do, and is that the reason you have a very conservative shouldComponentUpdate by default? You say never to mutate this.state in the docs, but you assume that people are going to mutate objects within the app state?

2. I'm having trouble figuring out how to write shouldComponentUpdate even if we update this.state functionally. Won't nextProps always be new, since render creates a new props object every time? How do we compare props and nextProps?