ReactFoo Delhi

React.js is a declarative javascript library which is faster, scalable and modular. Redux, on the other hand, is a powerful state management tool. The talk explains about React and redux, why and how should it be used. It will be followed by the rendering optimizations and performance improvements made by the speaker while making use of React and Redux in the projects she was involved with. The talks focuses not just on the importance of React Redux but also on why we should keep it healthier and cleaner.

Outline

Why React and Redux ?

• Declarative vs Imperative
• JSX for templating
• One way data binding
• Virtual DOM for faster rendering
• Simple, scalable and fast
• Redux : 3 principles
  • Single source of truth
  • Pure Functions
  • State is read only
• Redux: An example of command pattern

React optimizations and performance improvements: key takeaways

• Usage of PureComponents instead of Component for faster performance through shallow comparison
• Pass only what is needed in props to avoid unnecessary rendering and scripting
• In connect, pass only what is needed in mapStateToProps
• Render only the components needed
• Use memoized selector (reselect) for faster data manipulation

Error Handling

• Integrate Sentry with tool
• Maintain ErrorBoundary and keep it as granular as possible

Development

• Break components into sub components and keep it modular
• Ensure to make the components reusable enough by passing generic props and setting default values for props
• Use only one UI framework eg: ant, semantic
• Ensure to add a README.md in code for new developers

Error State
-Never setState within render to avoid infinite rendering
-Never setState within componentDidUpate without checking that prop or state is actually changed

Speaker bio

Heena is an open source enthusiast. She currently works at Zomato as Senior Software Engineer. She was awarded with Tech Upcoming Rising Star Award for developing web based financial dashboards and Promising New Comer in her former companies for the contributions made. She is a Google Summer of Code and Season of KDE student developer. She has also mentored in Google Code In, Learn IT!, Girl and Season of KDE. She has also co-administered Google Code In-KDE and Season of KDE. During her college days, she also founded Women Who Code Delhi chapter and has presented at various regional and international conferences including FOSSASIA, HKoSCon, GSoC meetup’15. Interestingly, she has also presented a poster presentation on narrative visualizations and storytelling at Grace Hopper Conference India.

Links

• https://linkedin.com/in/heena-mahour-a183ba99/
• http://heenamahour.blogspot.in
• https://github.com/heenazm
• https://www.facebook.com/hkoscon/videos/1935537453381129/ ( one of the talk delivered on one of previous project at Hong Kong Open Source Conference )

Slides

https://docs.google.com/presentation/d/1LmuABvv8EPZqX07S-w72_lMDR1BUidHGwdKyIXE-0Is/edit?usp=sharing