Elevator Pitch
Redux? Render props? Context? Apollo? And what are these hooks that everyone is talking about? If you have ever gotten lost in the multitude of ways to manage state in your React application in 2019, you’re not alone. Let’s compare the options, and talk about the state of state management today.
Description
Redux? Render props? Context? Apollo? And what are these hooks that everyone is talking about? If you have ever gotten lost in the multitude of ways to manage state in your React application in 2019, you’re not alone. As a developer building a front-end application for the first time, one of the first big problems I encountered was state management. How can I make one component in my application share information with another component in a completely different part of my application? For a beginner, this can be a tricky problem to solve.
Three years later, I have worked as a consultant on many different front-end applications, many of them React, each one with a slightly different way of managing shared state. Whether you’re a beginner of an industry veteran, it can be difficult to keep up with all of these tools and strategies. Hopefully my experience using each one of these can help shed some light on what is changing, what is staying the same, and what will help you to make your job easier in 2019.
Notes
General outline:
- State management - what is the problem we are trying to solve?
- What tools are available to help us solve it? A. Basic patterns a. React State (setState, useState hook) B. Problems that emerged a. Prop drilling b. Repetition for state used in multiple components C. Global state management tools a. Flux, Redux i. Demo and code examples ii. Advantages (single source of truth, logging) iii. Disadvantages (boilerplate, testing, etc) D. Modern tools built into React a. Context (with code examples) b. Custom hooks (why code examples)
- How do we choose the right tool?
- Looking forward - predictions for 2020 and beyond A. Less boilerplate and more generators?
Why should I speak on this topic?
As I touched on in my proposal, one of the advantages of being a consultant and a frequent project switcher is that I have been exposed to many different projects, and have experience talking through the pros and cons of different architecture decisions with team members and stakeholders. If you would like to learn more about my experience with this subject, I would encourage you to check out my blog posts for the 8th Light blog, as well as my previous conference talk. (links below)
Dependency Inversion in React with Render Props
A New Approach to State Management with the React Context API