Elegant state management
@rahulgaba16 → ReactFoo-VueDay Pune 2020
Using Context API + Hooks
Rahul Gaba
![](https://s3.amazonaws.com/media-p.slid.es/uploads/758515/images/4273017/hi_gaba_copy.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/545656/images/6691720/Word_Art__1_.png)
UX Engineer @ Google
Elegant state management
Using Context API + Hooks
@rahulgaba16 → ReactFoo-VueDay Pune 2020
Outline
-
Why state management?
-
Benefits of redux
-
Problems with redux
-
Context, Providers and Consumers
-
The useReducer Hook
-
Benefits of Context API + Hooks
-
When to use what?
Why state management?
- Sharing data
- Caching data
- Separation of concerns
Redux
![](https://s3.amazonaws.com/media-p.slid.es/uploads/545656/images/6727114/pasted-from-clipboard.png)
Benefits of redux
- Separation of concerns.
- Share data between multiple components.
- Cache data between multiple routes.
- Time travel debugging.
- Structured way to maintain the code.
Problems with Redux
- What to store in redux? Shared data/Persistent data?
- Keeping something in store and then realising that it shouldn't have be there.
- Too much of a boilerplate.
- Too many things to read about.
Problems with Redux
![](https://s3.amazonaws.com/media-p.slid.es/uploads/545656/images/6495487/frustrated.gif)
Context, Providers and Consumers.
Context & Provider
![](https://s3.amazonaws.com/media-p.slid.es/uploads/545656/images/6719799/carbon__14_.png)
Consumer
![](https://s3.amazonaws.com/media-p.slid.es/uploads/545656/images/6691672/carbon__3_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/545656/images/6712163/carbon__10_.png)
Provider
- Holds the module level state
- Contains methods to manipulate state.
- Defines API for the consumers (using value prop)
- ContextInstance.Provider
Context Instance
- Used by Regular React components, called consumers.
- Used to access the APIs defined by the Provider.
- React.createContext(<intialValue>)
Two most important hooks
![](https://s3.amazonaws.com/media-p.slid.es/uploads/545656/images/6495511/carbon__5_.png)
Consumer with useContext
![](https://s3.amazonaws.com/media-p.slid.es/uploads/545656/images/6691672/carbon__3_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/545656/images/6712163/carbon__10_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/545656/images/6712182/carbon__12_.png)
The useReducer Hook
Building a cart
![step1](https://s3.amazonaws.com/media-p.slid.es/uploads/545656/images/6711610/pasted-from-clipboard.png)
![step2](https://s3.amazonaws.com/media-p.slid.es/uploads/545656/images/6711630/Screenshot_2019-10-29_at_11.13.00_PM.png)
![step3](https://s3.amazonaws.com/media-p.slid.es/uploads/545656/images/6711656/Screenshot_2019-10-29_at_11.17.42_PM.png)
![step4](https://s3.amazonaws.com/media-p.slid.es/uploads/545656/images/6711686/Screenshot_2019-10-29_at_11.29.22_PM.png)
Provider with reducer
![](https://s3.amazonaws.com/media-p.slid.es/uploads/545656/images/6691799/carbon__5_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/545656/images/6691804/carbon__6_.png)
Where to use Providers?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/545656/images/6694452/carbon__7_.png)
Consumers?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/545656/images/6694504/carbon__8_.png)
5 Reasons to use redux
- Sharing data
- Caching data
- Separation of concerns
- Middlewares*
- Ease of debugging*
Advantages over Redux
Advantages over Redux
-
Have module level "stores" (Chunking)
-
Use reducer only if you feel it's necessary.
-
Very easy to move logic from a component to a Provider.
-
Incremental, composite way of doing things.
Redux
Providers + useReducer
Disadvantages
- No middleware support
- Limited SSR support
- Too many render cycles*
- No time travel debugging
When to use What?
Use Context API + Hooks when...
Use Redux when...
- You are already using it 😉
- You need middlewares
- You need SSR
- Possible use-cases:
Don't
![](https://s3.amazonaws.com/media-p.slid.es/uploads/545656/images/6716272/pasted-from-clipboard.png)
Tips
- One file exports both context instance and provider.
- Create Module level context for sharing module-level state.
- `useContext` hook provides a very convenient and cleaner way to use multiple contexts in a component.
- Avoiding the bad parts of redux: Solve present problems instead of problems which might occur in future.
- Use latest dev tools to debug context.
References
- https://kentcdodds.com/blog/the-state-reducer-pattern-with-react-hooks
- https://twitter.com/threepointone/status/1056594421079261185
- https://www.youtube.com/watch?v=dpw9EHDh2bM
- https://twitter.com/sarah_edo/status/1186615191808536576?s=09
- https://stackoverflow.com/questions/45416237/axios-calls-in-actions-redux
- https://github.com/troch/reinspect
- https://dev.to/selbekk/persisting-your-react-state-in-9-lines-of-code-9go
- https://twitter.com/dan_abramov/status/955593635390808064
![](https://s3.amazonaws.com/media-p.slid.es/uploads/758515/images/4272983/gaba.png)
Thank you!
@rahulgaba16 → ReactFoo-VueDay Pune 2020
Q&A
Elegant state management
By Rahul Gaba
Elegant state management
Slides for the talk on Elegant state management (Using Context API + Hooks)
- 2,750