Use bind
Do not do this {() => foo()} while you can do {this.foo.bind(this, bar)} even better you can create a helper to pick up all handler methods and fix the context.
1.) Where is my dispatch
2.) Nesting
3.) Reducer and Reselect
4.) Modifying a child (via cloneElement)
renderChildren() {
return React.Children.map(this.props.children, child => {
return React.cloneElement(child, {
name: this.props.name
})
})
}
5.) Destructuring in pure component
const myComponent = ({propertyOne, propertyTwo}) => { //this is instead of (props) then props.propertyOne }
6.) Rest and Spread
const myComponent = ({onClick, ...otherProperties}) => {
//this is instead of (props) then props.propertyOne
<Foo {...otherProperties}>
<Button onClick={onClick}>Click me</Button>
</Foo>
}