Understanding state in React Ben Alpert 

No content

No content

No content

Multiple-choice widget JSON { "multipleSelect": true, "randomize": false, "choices": [ { "content": "$x$ is a rational number.", "correct": true }, { "content": "$x$ has an infinite, non-repeating decimal...", "correct": false }, { "content": "$x$ has a terminating decimal representation.", "correct": true }, ... ] } 

Multiple-choice widget editor (Editor) var Editor = React.createClass({ render: function() { var choices = this.props.choices.map((choice, i) => ); return ; }, handleDelete: function(i) { var choices = this.props.choices.slice(); choices.splice(i, 1); rerender(); }, serialize: function() { return { choices: this.props.choices.map((choice, i) => this.refs["choice" + i].serialize()) }; } }); 

Multiple choice widget editor (Choice) var Choice = React.createClass({ render: function() { return ( ); }, serialize: function() { return { content: this.refs.content.getDOMNode().value }; } }); 

Let’s try it! 

What just happened? 

Problems in this implementation — React did the “wrong” DOM operations — When the DOM changes, component state doesn’t — If data changes, the DOM doesn’t update to match 

React did the “wrong” DOM operations var oldChildren = [ , , ]; var newChildren = [ , ]; 

React did the “wrong” DOM operations React guesses (unintelligently) about what key is: var oldChildren = [ , , ]; var newChildren = [ , ]; …and deletes the last choice element. 

React did the “wrong” DOM operations { "choices": [ { "content": "monkey", "key": 42 }, { "content": "gorilla", "key": 13 }, ... ] } var choices = this.props.choices.map((choice, i) => ); 

React did the “wrong” DOM operations Explicitly-specified keys: var oldChildren = [ , , ]; var newChildren = [ , ]; Now, React deletes the first element, as expected. 

DOM and component state get out of sync 

DOM and component state get out of sync 

We need a single source of truth In this implementation, the DOM is usually the source of truth… except when it’s not. We don't know where to look to find what the value should be. 

Reasons to keep state out of the DOM — Ties the view implementation to the data — Harder to show derived data — Slower 

A gift from React: controlled components Previously: After converting to a controlled component: 

A gift from React: controlled components Controlled components take a bit more work upfront, but they have several advantages: — Model and view never get out of sync — Easy to tell what's in the DOM based on your data — Easier to have data where you want it already (i.e., no need for serialize or ref) (Bonus: the demo works now even without keys.) 

Best practices — Use key properly: if you don't have an appropriate key, add one to your data — Avoid keeping state in the DOM — Use controlled components — Read from the DOM only in event handlers — Think about where your source of truth is What do you get? Airtight UIs. 

Thank you!