ReactFoo Delhi

On React, performance and front-end engineering

Tickets

Pros and cons of using React context API and hooks to manage state instead of Redux

Submitted by rahul gaba (@rahulgaba) on Thursday, 8 August 2019

Duration: 40 mins full talk

View proposal in schedule

Abstract

The front-end universe is expanding exponentially and there are a bunch of options to choose from in every aspect of front-end development.

State management is the core part of front-end development.

This talk is for people who wants to compare various state management patterns and when to use what.

Outline

The talk will be broken down in the following:

  • Why state management is required?
  • Brief intro of redux.
  • Benefits of redux.
  • Problems with redux.
  • When to use the Context API instead of redux.
  • How to scale the Context API using hooks.

Requirements

Target audience

The target audience are people who have built a few apps in ReactJS and know the importance of state management.

They should have a basic understanding of redux since I will be comparing it with Context API + hooks.

Basic knowledge of hooks and context API will be good to have.

Speaker bio

Hi there, I am Rahul. I work at Go-Jek as a Product Engineer.

I love coding and solving complex problems with easy solutions. I have 5+ years of industry experience in building Web/Mobile apps.

Open Source Contributions:

  • I have co-authored a book on React Native called React Made Native Easy. It is an open source book and can be found here: www.reactnative.guide.
  • I conducted a workshop for react-native in a famous community called JSFoo on 29th October. Its was a 5 hours hands-on workshop. We had 30+ attendees. Here is the link to the workshop: https://reactfoo.in/2017-react-native-workshop/ Slides: http://slides.com/rahulgaba/react-native#/
  • I am an active open source contributor and regularly publish modules for react, react-native and AngularJS.
  • I like blogging and also publish my findings and side projects via my tech blog - http://rahulgaba.com/

My github profile - https://github.com/rgabs/

You can find more of my work here: http://rahulgaba.com

Links

Slides

https://slides.com/rahulgaba/elegant-state-react

Comments

  • Zainab Bawa (@zainabbawa) Reviewer 2 months ago (edited 2 months ago)

    Hello Rahul,

    Thanks for submitting the proposal. I wanted more information on the following:

    1. Who is the target audience for this talk?
    2. Given that ReactFoo participants will be working hands-on with React and front-end development, why is a brief introduction required on Redux and state management?

    We’d like to see your draft slides, by 31 August, outlining the content you will cover in this talk, and the takeaways for the audience. This will help us make a decision regarding your proposal.

  • rahul gaba (@rahulgaba) Proposer 2 months ago

    Hi Zainab, Please find the answers below:

    Who is the target audience for this talk?

    1. The target audience are people who have built a few apps in ReactJS and know the importance of state management.
    2. They should have a basic understanding of redux since I will be comparing it with Context API + hooks.
    3. Basic knowledge of hooks and context API will be good to have.

    Given that ReactFoo participants will be working hands-on with React and front-end development, why is a brief introduction required on Redux and state management?

    Good point actually. However, I feel a quick overview of redux won’t hurt considering the fact that there are a bunch of state management libraries available nowadays. If you think people would be already familiar with the core concepts of redux(actions, reducers, one way data flow), then I can remove the intro part.

    I hope I answered your questions. Also, I will be updating the draft slides in the next few days.

  • rahul gaba (@rahulgaba) Proposer 2 months ago

    Hi Zainab,

    I have added the link to slides. Please have a look at it.

    Thanks

  • Zainab Bawa (@zainabbawa) Reviewer 13 days ago

    Hello Rahul, thanks for an excellent rehearsal last week. Below is the feedback on the content, flow and on the slides as per reviewer comments:

    1. Theme provider examples are outdated. There are ways to have multiple providers. Add an asterix here.
    2. Too much time is spent on some slides. Either break the slides down into smaller slides or try to wrap up faster.
    3. When explaining Hooks, name the concepts instead of using pronouns.
    4. Redux solves many more problems than solving as alternative to Context API. Redux solves for server-side rendering. The pattern suggested in this talk will not work very well for this use case. Mention Redux’s advantages further.
    5. Explain actions and what Reducers do. Explaining more of Reducer patterns will help participants.
    6. Benefit of Redux as component state explaining actual benefits will be better.
    7. Time travel debugging can be moved towards the end.
    8. UI state on component versus data state on Redux – missed the exact point of feedback here.
    9. Context API static pattern - can you just have a consumer?
    10. On the example about provider part, usually you don’t create an object on the provider side.
    11. User reducer pattern – have one user function and two Reducer functions. With Redux, you can’t chunk separate Reducers. This can be a drawback of Redux for the disadvantages of Redux.
    12. Check and rectify last three slides of advantages over Redux.
    13. Advantages of Redux and which approach to choose – can these be merged based on the context of the application?
    14. When to use what can be broken down into many slides because this is interesting.
    15. When you give the examples of Flipkart and Slides.com, explain why Redux won’t be useful.
    16. Use more detailed examples. Write fuller examples since these will help with participants relating to your talk.
    17. Add visuals to examples to help audiences anchor and maintain attention.

    Share your revised slides by 3 November, latest, so that we can do one more round of review.

  • rahul gaba (@rahulgaba) Proposer 13 days ago

    Thanks for the feedback Zainab, I will do the needful :)

  • rahul gaba (@rahulgaba) Proposer 8 days ago

    Hi Zainab, I have updated the slides. The updated url for the slides are here: https://slides.com/rahulgaba/elegant-state-react

    Also, regarding the point 15, I plan to explain the examples in the presentation.

    I haven’t added more slides for the examples. However, I have added a few more points backing up my statements.

  • 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

Login with Twitter or Google to leave a comment