Download to read offline
More Related Content
Similar to Will React Hooks replace Redux?
![STATE MANAGEMENT IN REACT [Autosaved].pptx](https://cdn.slidesharecdn.com/ss_thumbnails/statemanagementinreactautosaved-241017053717-15b39b76-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Will React Hooks replace Redux?
- 2. Will React Hooks replaceRedux? Trivikram Kamat @trivikram @trivikr
- 3.
- 4. What’s my nameagain? @trivikram Tree Weak Rum Tri vik ram + + . .
- 5. What are wegoing 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 aComponent 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 Eventschedule app for NJSI) @trivikram Waiting for response User data Event data
- 8. When React Stateis 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 simplifiesState 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 ReactHooks? 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 ReactHooks @trivikram 12 Button Class: https://codesandbox.io/s/yp3454k81 Button FC: https://codesandbox.io/s/pxkkp9wmx
- 13. Are classes beingremoved from React? 🤔 Nope. But I wish they did. @trivikram 13
- 14. Do I needto 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 Hooksby replacing Redux! Redux ToDo App https://redux.js.org/basics/example @trivikram 15
- 16. Demo @trivikram 16 Let’s seesome code!
- 17. Let’s learn Hooksby replacing Redux! GitHub repo https://github.com/trivikr/react-hooks-todo @trivikram 17
- 18.
- 19. Create Store (HigherOrder Component) @trivikram 19
- 20. Create Store andStoreContext @trivikram 20
- 21. Replace Redux Providerwith Store @trivikram 21
- 22. Replace Redux Providerwith Store @trivikram 22
- 23.
- 24.
- 25.
- 26.
- 27.
- 28. Demo @trivikram 28 Let’s runthis code!
- 29. Should you switchto 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 Hooksreplace 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 forlistening! @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