React Notes - because I'm tired of making pens

react.js

//If a child component wants to communicate back to its parent, it can do so through props, 
//most commonly by its parent providing a callback property that the child can call when some event happens:

const ParentComponent = () => {
  const letMeKnowAboutSomeThing = () => console.log('something happened!')

  return (
    <ChildComponent letMeKnowAboutSomeThing={letMeKnowAboutSomeThing} />
  )
}

const ChildComponent = props => {
  const onClick = e => {
    e.preventDefault()
    props.letMeKnowAboutSomeThing()
  }

  return <a onClick={onClick}>Click me!</a>
}

shouldComponentUpdate.JS

//shouldComponentUpdate example from http://lucybain.com/blog/2017/react-js-when-to-rerender/?utm_source=reactnl&utm_medium=email
class Todo extends React.Component {
    shouldComponentUpdate(nextProps) {
        const differentTitle = this.props.title !== nextProps.title;
        const differentDone = this.props.done !== nextProps.done
        return differentTitle || differentDone;
    }

    render() {
        return (<div>...</div>);
    }
}

state-callback.js

//https://discuss.reactjs.org/t/what-are-the-hidden-features-of-react-that-you-know-of/4292/3

this.setState({ someVar: someVal }, () => {
  // code that depends on this new state
});