Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Managing state in modern React web applications


Published on

This is the presentation I gave to my local JavaScript North West meetup group in Manchester, UK on 16th October 2018. The presentation demostrated local state vs Context API vs Redux, and when was appropriate to use each tool and some best practices around all three.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Managing state in modern React web applications

  1. 1. Managing state in modern React web applications
  2. 2. Hello! • Jon Preece, front-end developer • Currently specializing in React • Active on GitHub: jpreecedev • Email: (I’m not on social media, sorry!)
  3. 3. Assumptions • Intermediate knowledge of JavaScript and React • This is a presentation about React • React 16.3 or higher • (This was when the updated version of Context API was first released) • Feel free to ask questions
  4. 4. What is state? • Allows you to create components that are dynamic and interactive • Allows your application to respond to; • User actions, network responses, anything else
  5. 5. What tools are at your disposal? • Local state • Context API • Redux • (And many, many more)
  6. 6. Which one should I choose?
  7. 7. Which one should I choose? • It’s not quite that simple • Local state works well with forms • Context API is hierarchical, helps with *prop drilling* • Redux works well when sharing
  8. 8. Demo 1: Local state • Form gets passed an initial state • Container/presentation component relationship, form data is passed up • Form can be reset after user has made changes • We call setState instead of mutating state directly
  9. 9. Local state • State for the form is contained • Calling setState causes the component to re- render, can be asynchronous and batched • There is hidden pain here
  10. 10. Demo 2: Context API • What do we mean by *prop drilling*? • What does Context API look like? • Provider, Consumer
  11. 11. Context API • Provider exposes state to Consumer • Provider is a fancy wrapper around setState • Can dramatically tidy your code, has little learning curve, easy to conceptualise, is syntactically fiddly
  12. 12. Demo 3: Redux • Always has a root level Provider with a default state • Uses connect function to retrieve state from the store • Dispatches an action, triggers a reducer, which creates a new state, which causes a re-render
  13. 13. Redux • More complexity • Actions, reducers, connect, immutable • Scales well, performant • Excellent debugging, time travel, unit testing is straightforward
  14. 14. Best practices / Common Patterns • Do use the right tool for the job • Redux is not dead • Start with Context API, add Redux if/when needed • Avoid *prop drilling* • Generally avoid local state, becomes unwieldly quickly, increases test complexity
  15. 15. Best practices / Common Patterns • When working with local state, prefer container/presentation relationship • Avoid ref • Lift the state up
  16. 16. Summary • Know tools at your disposal • Finally… this space is still evolving. • GraphQL and Apollo Client are gaining popularity quickly
  17. 17. Hello! • Jon Preece, front-end developer • Currently specializing in React • Active on GitHub: jpreecedev • Email: