ReactFoo Delhi

On React, performance and front-end engineering

Tickets

Keeping React Redux healthy: What, why and how with rendering optimization and performance improvements

Submitted by Heena H (@heenamahour) on Wednesday, 2 October 2019

Duration: 20 mins crisp talk

View proposal in schedule

Abstract

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

Slides

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

Comments

  • Zainab Bawa (@zainabbawa) Reviewer 21 days ago

    Thank you for the rehearsal last evening, Heena. Here is the consolidated feedback:

    1. The talk has to be set in the context of the challenges that Zomato app faced in terms of performance, customer experience and the role that Redux played in this backdrop. Putting your talk in this context will help participants to relate to the talk.
    2. Two important things to incorporate in this storyline are: simple code samples and before-after metrics of performance improvement and tooling change.
    3. Slides are too verbose. Every slide should contain only one idea. And not more than 3 bullet points per slide.

    Other than this broad feedback, the specific questions raised were:

    1. The slides on performance have to be broken down into multiple slides. This is the main theme of your presentation.
    2. Reduce time spent on explaining React-Redux in the beginning of the talk.
    3. Some terminologies need explaining, such as memoization. These may be known to you, but not to the participants.
    4. How do you compare normal component and pure component? Similarly, memoized and lazy load - we want to hear the before-and-after story with metrics. What performance improvements did you actually see? Such insights will help the community immensely.
    5. Why did you go with Sentry? Did you have other options? How did you compare?
    6. Lastly, you may also want to show how to prevent mistakes apart from talking about the mistakes itself.

    Add the link to your revised slides here by or before 28 October.

    • Heena H (@heenamahour) Proposer 13 days ago

      Hello,

      Thank you for the suggestions.
      Apologies for the delay in response. I have updated the slides accordingly. Please let me know if I missed something.

      Thanks!

  • Zainab Bawa (@zainabbawa) Reviewer 7 days ago

    Thanks for the revised slides, Heena. Comments on the revised slides are as follows:

    1. There is a sudden jump from slide 3 to slide 4 – from what is React and Redux to a slide on metrics. This can be surprising for lots of participants. Instead, after slide 3, add a slide explaining what is the context of Zomato and React-Redux at Zomato.
    2. In the earlier rehearsal, this feedback was mentioned: Some terminologies need explaining, such as memoization. These may be known to you, but not to the participants. There is no explanation of Memoization in the slides. We understand that you will speak this out, but adding context or reference in the slides will help those participants who are referring to the slides after the talk.
    3. On the examples slide, will help to add some visuals. Visuals help keep the audience anchored and glued to the presentation. Simple text slides become visually boring after a while even if the speaker is interesting.
    4. Slide 14 on Error Tracking Tools appears a bit random for now. Maybe you should simply change the title of the slide to explain what you intend to communicate with this slide.
    5. Slide 16 has too much text. Reduce to two-four word phrases.
    6. Be consistent with casing and capitalization of React Redux throughout your presentation.
    7. Slides 18 and 19 are visually cluttered. Modify to simple bullet points.
    8. Font size and type are not consistent throughout the presentation. Slide 19 has different font type and size.
    9. Instead of “That’s all folks” on slide 20, add a contact information slide so that participants know where to contact you.
    10. Also, add a references slides. And on those slides where you have referred to other sources, attribute the sources directly on those slides.

    Incorporate the revised changes before the second rehearsal on Friday.

    • Heena H (@heenamahour) Proposer 6 days ago (edited 6 days ago)

      There is a sudden jump from slide 3 to slide 4 – from what is React and Redux to a slide on metrics. This can be surprising for lots of participants. Instead, after slide 3, add a slide explaining what is the context of Zomato and React-Redux at Zomato.

      On Slide 5, I have added about an example wrt structure of data that was received on fetch and how it was impacting slow rendering

      On the examples slide, will help to add some visuals. Visuals help keep the audience anchored and glued to the presentation. Simple text slides become visually boring after a while even if the speaker is interesting.

      Need to think of it as examples are mostly code snippet

      Rest of the changes are incorporated

  • Raghavendra Satish Peri (@artofvision) 6 days ago

    Hello,
    At hasgeek events we are trying to make our events accessible for people with disabilities. To achieve our goal is to first get the content of presentations accessible. Here is some guidance to make the presentations accessible. Please use these fonts & size so that even able body people can see the content in the auditorium during presentation.

    Fonts and Font Size
    Because they are the easiest to read, only use Sans Serif fonts, such as Arial and Verdana. Since a PowerPoint presentation will most likely be projected onto a large screen consider how far the audience will be from the screen and choose a font size accordingly. The minimum font size for a PowerPoint presentation should be 24 points.

    For more accessibility info on making presentations accessible use the following link
    https://www.framingham.edu/Assets/uploads/about-fsu/accessibility/_documents/7-steps-accessible-ppt.pdf

    • Heena H (@heenamahour) Proposer 6 days ago

      Have updated the min font size as 24 and style as Verdana

  • Ashok Hariharan (@bungeni-ashok) 6 days ago

    Just did a quick review of the slides. Overall almost all the issues have been addressed, it looks good and clear. I would say the last slide needs to have contact-info / github profile link etc (still missing). References as mentioned in earlier feedback should have its own slide. One thing I noticed now is that after the makeover, is that the topic is actually more about react optimization than anything really specific to redux.

    • Heena H (@heenamahour) Proposer 6 days ago

      I would say the last slide needs to have contact-info / github profile link
      done

      One thing I noticed now is that after the makeover, is that the topic is actually more about react optimization than anything really specific to redux.

      Have added those points as per my observations while working on React projects. I mentioned about memoized selectors. Will add more if I found something interesting. Hope its fine.

Login with Twitter or Google to leave a comment