Никита Гущин

const MySuperTree => (props) => (
  <ul>{props.nodes.map(node => <TreeNode {...node} />)}</ul>
)

class TreeNode extends PureComponent { 
  render() {
    const { name, val1, val2, nodes } = this.props
    return (
      <li>
        <b>{name}  | {val1} | {val1+getValFromChild(childs)} {val2}</b>
        {nodes && nodes.length > 0 && (
          <MySuperTree nodes={nodes} />
        )}
     </li>
    )
  }
}

class Cover extends Component { 
   state = {
     loaded: false,
     width: 0,
     height: 0,
   }

   componentDidMount() {
     const img = document.createElement('img')

     img.onload = e => {
       console.log('image loaded', img.width, img.height)
       this.setState({ loaded: true, width: img.width, height: img.height })
     }

     img.src = this.props.src
   }

  renderLoading() {
    return <div>loading... </div>
  }
  
  renderLoaded() {
    const { width, height } = this.state
    const isFits = width === 140 && height === 205
    return isFits
      ? <div>обложка успешно установлена</div>
      : <div>Обложка должна быть 140х205</div>
  }

   render() {
       return this.state.loaded ? this.renderLoaded() : this.renderLoading()
   }
}

import('moduleName').then(module => /* do something */)

class Bundle extends Component {
  state = {
    // short for "module" but that's a keyword in js, so "mod"
    mod: null
  }

  componentWillMount() {
    this.load(this.props)
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.load !== this.props.load) {
      this.load(nextProps)
    }
  }

  load(props) {
    this.setState({
      mod: null
    })
    props.load((mod) => {
      this.setState({
        // handle both es imports and cjs
        mod: mod.default ? mod.default : mod
      })
    })
  }

  render() {
    return this.state.mod ? this.props.children(this.state.mod) : null
  }
}

export default Bundle

<Bundle load={() => import('./something')}>
  {(mod) => ()}
</Bundle>

• Избавьтесь от коннектов, которые слушают большие куски стейта
  
• Используйте reselect, для вычислений стейта (например, когда собираете элемент из разных редьюсеров)
  
• Используйте connect элементах, которым нужны данные. Их может быть много. Список из 1000 connected-elements работает быстрее, чем список из 1000 элементов с 1м connected-element. Потому что даже PureComponent имеет свой оверхед и если дочерний компонент не обновился - это не значит, что diff алгоритм реакта не будет обрабатывать изменения в родительском компоненте
  

const emptyContacts = {
  address: '' ,
  email: '',
}

var Contact = React.createClass({
    getInitialState: function() {
      return {
       contactData: emptyContacts,
      }
    },
    toggleContactsData: function(event) {
        this.setState({
            contactData: thsi.state.contactsData === emptyContacts
              ? { address: this.props.address, email: this.props.email, }
              : emptyContacts
        });
    },

    render:function() {
      return (
        <li className="contact" onClick={this.toggleContactsData}>
          <img className="contact-image" src={this.props.image} width="68px" height="68px"/>
          <div className="contact-info">
            <div className="contact-name" >{this.props.name}</div>
            <div className="contact-number" >{this.props.phoneNumber}</div>
            <div>{this.state.contactData.address}</div>
            <div>{this.state.contactData.email}</div>
          </div>
        </li>
      )

    }
  });

class Item extends React.PureComponent {
  render() {
    const { name, color } = this.props

    return (
      <li>
         <b>{name} ({color})</b>
      </li>
    )
  }
}


class ItemsList extends React.PureComponent {
  render() {
    const { items } = this.props

    return (
      <ul>
        {items.map(item => (
          <Item key={item.id} {...item} />
        )}
      </ul>
    )
  }
}

Я пометил при вызове компонента его ref'ом и пнул его setState()

как правильно отследить клик по селектору? Передавать callback и в props компонента его обрабатывать?

let newState = Object.assign(state, {messages:action._data, loading:false});

class MyClickableComponent extends React.PureComponent {
  construct(props, context) { 
    super(props, context)

    this.state = {
      isOpen: false,
    }
  }

  handleClick = e => {
    this.setState({ isOpen: true })
  }

  render() {
   const { isOpen } = this.state

    return (
      <div>
        <div onClick={this.handleClick }>click on me</div>
        {isOpen && (
          <b>opened!</b>
        )}
      </div>
    )
  }
}

ReactDOM.render(
        <div>
            <Month />
                   <MyClickableComponent  />
            <Content />
        </div>,
  document.getElementById('root')
);

return { 
  ...state,
  user: {
    ...state.user,
    response: { ...action.payload },
  }
}