Microsoft To-Do

React Practices

@mr_mig_by

Microsoft To-Do

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. 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 🙀

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

Thank you!

@mr_mig_by