Model Passing

1. Data hierarchy == View hierarchy
2. Expensive updates
3. Very sensitive to changes
4. Where do I add child data?
5. Derived data dependencies

Primitives Passing

1. Data hierarchy == View hierarchy
2. Expensive updates
3. Sensitive to changes
4. Where do I add child data?
5. Derived data dependencies
6. Does not extend (too many things)

ICC

1. Data hierarchy == View hierarchy
2. Expensive updates
3. Sensitive to changes
4. Where do I add child data?
5. Derived data dependencies
6. Does not extend (too many things)
7. Performance?
8. SCARY!!!

Let's split!

ICC Data Hierarchy

ICC View Hierarchy

What about Performance?

Worry not!

ICC + react-redux < v5.0.0

No Batcher + react-redux < v5.0.0

No Batcher + react-redux v5.0.0beta3

1. Measure in your own case 🔎
2. Use virtualized list 📜
3. Do not create custom Batchers 💩

1. More components = less overhead
   25 items -> ~50ms, 500 items -> ~300ms

2. Every connect() adds 0.1ms to initial rendering time

3. State Passing is  <10% faster in our hot rendering path 🔥but ...

4. Single file with ~50 selectors and 25 handlers 🙀

ICC in the wild

ICC in the wild - connect

import { connect } from 'react-redux'
import ...

const mapStateToProps = createSelector(
  getAddTask,
  ...,
  (addTask, ...) => ({
    title: addTask.title,
    ...
  })
)

const mapActionsToProps = dispatch => ({
  onChange: ({ title }) => dispatch(updateAddTask({ title })),
  ...
})

export default connect(mapStateToProps, mapActionsToProps)

ICC in the wild - Component

import React, { PropTypes } from 'react'
...

export default class AddTask extends React.Component {
  // ...

  render() {
    const { title, onFocus, onPlusClick, isFocused } = this.props
    const placeholder = LocalizedString.getString('placeholder_add_task')

    return (
      <div className="addTask">
        <button
          className="addTask-icon"
          onClick={ onPlusClick }
        >
          <Icon name={ iconName }/>
        </button>
        // ...
      </div>
    )
  }
}

ICC in the wild - default/index

import React from 'react'
import AddTask from '../AddTask'
import connect from '../connect'
import '../addTask.styl'

export default connect(AddTask)

Another Example

import React, { PropTypes } from 'react'
import TaskItem from '../TaskItem'
import connect from './connect'

import Checkbox from 'components/Checkbox'

const DefaultTaskItem = props =>
  <TaskItem
    primaryActionComponent={ <Checkbox id={ props.id } intentOrigin={ props.intentOrigin }/> }
    { ...props }
  />

DefaultTaskItem.propTypes = {
  id: PropTypes.string.isRequired,
  inToday: PropTypes.bool,
  intentOrigin: PropTypes.string
}

export default connect(DefaultTaskItem)

Using ICC

import AddTask from 'components/AddTask'

// Component stuff ...
render() {
  return (
    <AddTask intentOrigin={ intentOrigin } />
  )
}

Directory structure

===

state structure