Piotr Berebecki Piotr Berebecki - 2 months ago 15
React JSX Question

React state assignment before setting state

I'm new to React and I'm following an online tutorial. The instructor presented the code below as part of a Todo App. It is the logic for adding a new

todo
item (object) to the
state
.

var TodoApp = React.createClass({
getInitialState: function() {
return {
todos: {}
};
},
addTodo: function(todo) {
var timestamp = (new Date()).getTime();
this.state.todos[`todo-${timestamp}`] = todo;
this.setState({
todos: this.state.todos
});
}
});


1. In this case, is it a good practice to assign the
todo
object to the state before calling
this.setState()
? (This SO question gives some related information.)

2. Wouldn't it be better to spread the
todos
as below?

3. Alternatively, is there a better way to update
state
in this setup?

var TodoApp = React.createClass({
getInitialState: function() {
return {
todos: {}
};
},
addTodo: function(todo) {
var timestamp = (new Date()).getTime();
this.setState({
todos: {...this.state.todos, [`todo-${timestamp}`]: todo}
});
}
});

leo leo
Answer
  1. No, see example below & documentation.

    this.state.todos = ...
     // Someone modifies todo's state at this point
     this.setState({
       todos: this.state.todos // this would not do what you expected anymore
     });
    

NEVER mutate this.state directly, as calling setState() afterwards may replace the mutation you made

React's documentation

  1. Absolutely, that's the React way. This is a perfect solution.
  2. Spreading is good enough.