react.jsx

// React Notes

///////////////////////////////////////////////////////////////////////////
// Render Props
// The term “render prop” refers to a simple 
// technique for sharing code between React components
// using a prop whose value is a function.
///////////////////////////////////////////////////////////////////////////

<DataProvider render={data => ( <h1>Hello {data.target}</h1> )} />

///////////////////////////////////////////////////////////////////////////
// Refs API
///////////////////////////////////////////////////////////////////////////

// Setting a ref that can be called with this.myNode:
<div ref={node => (this.myNode = node)} />

// Sometimes you need to assign them wihin iterators:
<Component ref={node => { this[`node-${index}`] = node }} />

// You can even use the callback to do fun things like get getBoundingClientRect():
<div ref={this.refCallback} />

///////////////////////////////////////////////////////////////////////////
// State
///////////////////////////////////////////////////////////////////////////

// Use the setState callback to access previous state (avoids batching issue)
this.setState(prevState => {
  return { count: prevState.count++ };
});


///////////////////////////////////////////////////////////////////////////
// New Context API
///////////////////////////////////////////////////////////////////////////


///////////////////////////////////////////////////////////////////////////
// Hooks
///////////////////////////////////////////////////////////////////////////