State Best Practices

In notebook:
FrontEndMasters React
Created at:
2016-06-14
Updated:
2016-06-14
Tags:
libraries React JavaScript
Wants to change the little triangle in front of the summary element. Will change with CSS.
  var React = require('react');

var ContentToggle = React.createClass({
    getInitialState () {
        return {
            showDetails: true;
        };
    },
    
    
    renderDetails () {
        var showStuff = this.state.showDetails;
        if (showStuff) {
            return this.props.children;
        } else {
            return null;
        }
    },
    
    toggle () {
        this.setState({ 
            showDetails: !this.state.showDetails 
        });
    }
    
    render () {
        // 1. ++++ Adds the CSS change state
        var summaryClassName = "ContentToggle__Summary";
        if(this.state.showDetails){
            summaryClassName += " ContentToggle__Summary--open";
        }
        
        return (
            <div className="ContentToggle">
            // 2. ++++ Set dynamically the className
                <div onClick={this.toggle} className="summaryClassName">{this.props.summary}</div>
                <div className="ContentToggle__Details">{this.renderDetails()}</div>
            </div>
        );
    }
});

var App = React.createClass({
    render () {
        return (
            <div>
                <ContentToggle summary="Jerk Chicken">
                    <p>Description text</p>
                </ContentToggle>
            </div>
        )
    }
});

React.render(<App/>, document.body);
Note about the BEM CSS syntax: don't concatenate the toggles. Don't use ​.ContentToggle__Summary--open​ but ​.ContentToggle__Summary .ContentToggle__Summary--open​ as above.

Server rendering in React

Server is stateless rendering. For example in PHP, in a PHP file you query the data, iterate over it then send to the browser and never change it again. 
Here in React it's the same case. Just iterate over data, build up the classnames, etc. 
So because of this statelessness we can have these pages rendered on the server. We don't think about what if a ​states​ property changes. You don't have to think about your UI over time.  
- Using setState vs using some local variable?
Modifying ​state​ causes the re-render. Otherwise the component will not re-render. 
React centralises the state. Every time you mutate the state of a component you have to call ​setState​ instead of assigning the value (​this.state.showDetails = true​)
This makes it easier to track changes to state, by simply doing a find in the code for the ​setState​ calls. 

If you change a parent component the children will re-render as well. However, if the data has not changed, it will only happen in the VirtualDOM. 
Aside from the speed benefits, the user will not loose focus on an input element in re-render.  
Talks about refs. (related to tabbed navigation). The example implementation is in the code on github.