Application state management using react hooks, context API and immer JS
Shubham Zanwar
@React Bangalore Meetup #53
Hi! I'm Shubham
Full Stack Developer @ Mckinsey Digital Labs
Love React, Vue and Go!
Expected outcomes from this talk
- Learn react APIs that will help build a state manager
- Implement a state management module using hooks and context
- Understand where redux doesn't fit and exploring alternatives
(Not so)Subtle add-ons
- A live coding session (!!)
- Learn how to use immerJS for deep object manipulations
- Hooks fallback for class based components
What really is redux?
Centralised
Predictable
State management library
What really is redux?
Centralised
- The entire app's state is stored in one single object; albeit modularised
- Single source of truth
What really is redux?
Predictable
- The update logic for the state lies in the reducer only.
- Different components can only fire actions. They cannot update the state directly.
What really is redux?
Why redux?
- Time travel debugging
- Deterministic state changes - updates based on actions fired
- State maintained in a single store object
- Offers separation of concerns
Why not to use redux?
- Too much boilerplate
- An entire new library to learn
- A serious overkill for a simple react app that requires state management
What are the alternatives?
- Create a common parent component that holds application state
- Create a state management library using react hooks and the context API 🤩
- Use the context API to replace the provider and connect from redux
- Use the useState or useReducer hooks to supply the state object and update interface to components.
- Decrease reducer complexity by using immer JS
The context API
- The context API is used when we want to pass information to a sub-tree of react components without passing props at each hierarchy level
- Ideally used for usecases like application theming, language localisation
and state management
The context API
Context API
Redux Provider
React hooks
- The hooks API was created to allow using class components features with functional components.
- This allowed for sharing logic between different functional components
- Many default hooks released with react 16.8; with the option to combine these and create custom hooks
Eg: useState, useReducer, useContext.
useState for centralised state management
- The useState hook was created to introduce local component state in functional components.
- This hook returns the existing state along with a function to update the state to whatever the user/component wants.
This is not a very good idea because the component decides what the final state would look like. Too much control for an individual component
Enter useReducer
- It's an advanced useState
- Components can decide which actions to dispatch but the update logic lies in the reducer itself.
- More suited for our use case because it maintains predictability
Enter useReducer
useReducer hook
Redux createStore
Pizza ordering service
Time to refactor
Improve your reducers with Immer JS
- Really simple to use. No new API to learn.
- Reducer code becomes more concise and easier to read.
- Is faster than handwritten reducers in most cases.Â
(head over to official docs to know more)
Using hooks with class based components
- Hooks are designed to work with functional components
- But most existing apps use class based components
- "Do I need to refactor my entire app to functional components if I want to use hooks?😱🤯"
H
O
C
Aaaand we're done!
TL; DR
- Start off simple. Try using native react APIs before a new libraryÂ
- Create HOCs to use hooks with class based components.
- If you do decide that your app needs redux, upgrade to the newer react-redux version with hooks support
- Replace the Provider and connect from redux using context API
- Replace the reducers using useReducer. Actions stay as is.
- Using immer JS in reducers can improve perf and clean up code.
- Use redux if you require middleware
- Use redux if you require server side rendering
Thank you
