The Tao of the React Component Props vs State

What is a React Component? • Basically, a function that transforms data into HTML. • The same data always renders the same HTML. * By data, we mean props and state. * By HTML, we mean a Virtual DOM node.

MyComponent = React.createClass({ contextTypes: { previousURL: React.PropTypes.string }, propTypes: { expanded: React.PropTypes.bool }, getDefaultProps: function() { return {expanded: false}; }, componentWillReceiveProps: function(props) { if(props.expanded) this.setState({url: this.context.previousURL}); }, shouldComponentUpdate: function(nextProps, nextState) { return nextProps.expanded !== this.props.expanded; }, render: function() { return ( A link ); } });

MyComponent = function(props, state) { return ( A link ); };

What is a React Component? • A React Component is also a state machine • Update a component’s state by calling setState() • Or by calling setProps() (on the top component only)

What are props? • Arguments to the Component render function • Props come from outside the Component

var Tab = React.createClass({ render: function() { return ( ); } }); var active = false; (function renderTab() { React.render( Hello, World! , document.body ); active = !active; }());

What is State? • Also used in the Component render function • State is isolated inside the Component • State persists between renders

var Tab = React.createClass({ getInitialState: function() { return {active: false}; }, handleClick: function() { this.setState({active: !this.state.active}); }, render: function() { return ( ); } }); (function renderTab() { React.render(Hello, World!, document.body); }());

So, when do you use props vs. state?

So, maybe you should primarily use state? Components are about encapsulation

So, maybe you should primarily use props! Components are about composition

So, when do you use props vs. state?

Unless you need to use state Always use props

Interactive Props • Some components are affected by user interactions • Since props are immutable, interactions that change the component must either be handled by the parent component, or translated to state

React Form Components React.createClass({ getInitialState: function() { return {value: 'Hello!'}; }, handleChange: function(event) { this.setState({value: event.target.value}); }, render: function() { return ( ); } });

Controlled Components • Values provided as props • Changes always come from above in the form of new props

var Tab = React.createClass({ render: function() { return ( ); } }); var active = false; (function renderTab() { React.render( Hello, World! , document.body ); active = !active; }());

Uncontrolled Components • Values maintained in state • parent components might pass in callbacks to be notified of changes

var Tab = React.createClass({ getInitialState: function() { return {active: false}; }, handleClick: function() { this.setState({active: !this.state.active}); }, render: function() { return ( ); } }); (function renderTab() { React.render(Hello, World!, document.body); }());

The best of both worlds: Controllables • An interactive component needs to maintain its own state • But sometimes it needs to yield control • Like React’s Form Components with interactive props • github.com/matthewwithanm/react-controllables

var Tab = React.createClass({ mixins: [ControllablesMixin], controllables: ['active'], getDefaultProps: function() {return {defaultActive: false};}, handleClick: function(event) { if (this.props.onClick) this.props.onClick(event); this.setState({active: !this.state.active}); }, render: function() { return ( ); } }); (function renderTabs(active) { React.render(, document.body); }());

Finally, a word about PropTypes • Props are your Component API • Validate usage of your Component • Document usage of your Component

var Tab = React.createClass({ displayName: 'Tab', propTypes: { active: React.PropTypes.bool, onClick: React.PropTypes.func }, render: function() { return ( ); } });

More words about PropTypes • React provides the most common PropTypes under React.PropTypes • Custom PropTypes are possible, but sometimes it’s a bit tricky to fully emulate what the builtin types do • github.com/gcanti/tcomb-validation • flowtype.org

HZDG.COM LETTERTWO ERIC ELDREDGE [email protected] HZDG PHOTO MISSING