Will React Hooks replace Redux?
- 2. Will React Hooks replace Redux? Trivikram Kamat @trivikram @trivikr
- 4. What’s my name again? @trivikram Tree Weak Rum Tri vik ram + + . .
- 5. What are we going to learn? • What is React state and why it’s not enough? • What is Redux and React Hooks? • Go through a simple ToDo App from Redux • Replace Redux with React Hooks @trivikram
- 6. What is a Component State? • State is just data. • The state for an application might change based on things such as user actions or a response from an API. • An application will read the state to determine what sort of User Interface it should show. @trivikram
- 7. Example (Sched Event schedule app for NJSI) @trivikram Waiting for response User data Event data
- 8. When React State is not enough? • When Application is simple, state management is trivial • As application gets complex, application state spread across many components • The functions that update the state also get spread across many components. • To have an overview of the application state, you need to have a mental model of the application structure. • It becomes harder to trace state changes when debugging Source: https://medium.com/dailyjs/f34da253c85f @trivikram
- 9. What is Redux? • Redux is a very common tool used in React applications for managing application state • Predictable: enables writing applications that behave consistently, run in different environments (client, server, and native), and are easy to test. • Centralized: enables powerful capabilities like undo/redo, state persistence, and much more. • Debuggable: DevTools make it easy to trace when, where, why, and how your application's state changed • Flexible: works with any UI layer, and has a large ecosystem of addons to fit your needs @trivikram
- 10. How Redux simplifies State Management? • It allows you to maintain the application state as a single global store, rather than in local component state • Actions: payloads of information that send data from your application to your store • Reducers: specify how the application's state changes in response to actions sent to the store. • Store: • holds application state • allows access to state via getState() • allows state to be updated via dispatch(action) • registers listeners via subscribe(listener) Source: https://medium.com/dailyjs/f34da253c85f @trivikram
- 11. What are React Hooks? Hooks let you use state and other React features without writing a class • Completely opt-in: You can try Hooks in a few components without rewriting any existing code. • 100% backwards-compatible: Hooks don’t contain any breaking changes. • Available now: released in React v16.8 in February 2019 @trivikram
- 12. Example of React Hooks @trivikram 12 Button Class: https://codesandbox.io/s/yp3454k81 Button FC: https://codesandbox.io/s/pxkkp9wmx
- 13. Are classes being removed from React? 🤔 Nope. But I wish they did. @trivikram 13
- 14. Do I need to learn React again? 😟 @trivikram 14 Nope. Hooks provide a more direct API to the React concepts you already know: props, state, context, refs, and lifecycle.
- 15. Let’s learn Hooks by replacing Redux! Redux ToDo App https://redux.js.org/basics/example @trivikram 15
- 16. Demo @trivikram 16 Let’s see some code!
- 17. Let’s learn Hooks by replacing Redux! GitHub repo https://github.com/trivikr/react-hooks-todo @trivikram 17
- 19. Create Store (Higher Order Component) @trivikram 19
- 20. Create Store and StoreContext @trivikram 20
- 21. Replace Redux Provider with Store @trivikram 21
- 22. Replace Redux Provider with Store @trivikram 22
- 28. Demo @trivikram 28 Let’s run this code!
- 29. Should you switch to React Hooks tomorrow morning? @trivikram 29 Nope. • Debugging support for Hooks is available in DevTools, but not as good as that in Redux • Middleware are not yet available But developers have welcomed React Hooks (RFC) Do give them a try in your side projects first!
- 30. Will React Hooks replace Redux? @trivikram 30 It depends. • React team is recommending libraries to export their own custom Hooks such as useRedux() • React Redux since v7.1.0 supports Hooks API and exposes hooks like useDispatch or useSelector • React Router supports hooks since v5.1 It’s exciting time in the JavaScript world!
- 31. Thank you for listening! @trivikram 31 Trivikram Kamat @trivikram @trivikr GitHub repo https://github.com/trivikr/react-hooks-todo Software Development Engineer
Editor's Notes
- #3: Although I’m not actively using React at work now, I’ve been using React since 2016 in many applications and have used both Redux and React Hooks in the past. This talk is slightly old – 10 months old – I’ll point out changes wherever they are
- #8: Sched doesn’t seem to use React, and have been used just as an example
- #14: Classes confuse both people and machines Makes code reuse and code organization more difficult You have to understand how this works in JavaScript, which is very different from how it works in most languages You have to remember to bind the event handlers
- #15: Gradual Adoption Strategy: Just throw the option in the wild and see what happens.
- #20: useReducer is the first React Hook
- #24: useContext is another React Hook
- #31: React is known for building user interfaces, and not state management React Hooks may not replace Redux, but will be adopted widely by other state management solutions