The document discusses immutable data, performance, and component communication in React. It recommends using immutable data to avoid side effects and shared mutable state. It also suggests techniques like shouldComponentUpdate and container components to improve performance. Finally, it discusses various ways for components to communicate, such as callbacks, events, and Flux architectures, and concludes by recommending embracing immutable data and componentizing the user interface.

1. Immutable
Performance
Randy Lien
@React.JS TW 第五次⼩小聚

2. About Me
• @randylien
• Front end developer

3. Agenda
• Immutable
• Performance
• Components Communication
• Conclusion

4. Functional
Programming

6. Why Immutable?
• Immutable data has no side effect!
• Shared mutable state is the root of all evil
- Pete Hunt
• You will not get hurt by yourself or someone

8. Why Immutable? (cont.)
• Immutable.js is fast enough and memory
optimisation
• Why Om is faster ? Data or Value is immutable in
Clojure/ClojureScript
• Immutable + PureRenderMixin

9. Simple Made Easy

10. Performance

11. Performance
• Pure Component (prop & state)
• shouldComponentUpdate
• Don’t update when its the same

12. Performance (cont.)
• Container Component Pattern
• Container Component as Data Layer
• Data fetching
• Component is all about its behaviour
• Testing Container or Gallery Container

13. Components
Communication

14. How to Communicate
• Parent - Children
• Use Callbacks
• No relationship
• Global event hub
• Flux
• Codecademy
• Adapter, broadcast
• Channel (CSP)
• Cursor (react-cursor)

16. Conclusion

17. Conclusion
• Embracing Immutable data for the future (JavaScript)
development
• Componentize your User Interface
• Loose coupling your component
• Container Component
• General Component
• You can pick the suitable solution for your needs

19. Conclusion(cont.)
• Watch Simple made easy
• Try Clojure/ClojureScript

20. FAQ