Recommended
Recommended
More Related Content
Similar to Workshop State-management in React with Context and Hooks
Similar to Workshop State-management in React with Context and Hooks (20)
More from Roy Derks
More from Roy Derks (13)
Recently uploaded
Recently uploaded (20)
Workshop State-management in React with Context and Hooks
- 1. State-Management in React with Context and Hooks JSWorld Workshop 2021 @gethackteam
- 2. What is this about? @gethackteam
- 6. Roy Derks @gethackteam Books: Search: Roy Derks +25
- 8. Let’s look at “state” @gethackteam
- 10. State @gethackteam open = false open = true
- 12. State <MenuItem /> <Menu /> <SubMenu /> @gethackteam
- 13. State @gethackteam open = false open = true
- 14. State @gethackteam open = false openChild = [1] open = true
- 15. And what about accessible components? @gethackteam
- 16. State @gethackteam open = false openChild = [1] open = true
- 17. State @gethackteam open = false openChild = [1] open = true selectedChild = 1
- 18. Would you still pass the props down? @gethackteam
- 19. <MenuItem /> <Menu /> <SubMenu /> State <Menu /> <MenuItem /> @gethackteam
- 20. <MenuItem /> <Menu /> <SubMenu /> State <Menu /> <MenuItem /> @gethackteam
- 21. State <App /> <Component /> <Component /> <App /> <Page /> @gethackteam
- 22. State
- 23. State
- 24. State
- 26. What about the Context API? @gethackteam
- 27. About the Context API BEFORE React v16.3 @gethackteam
- 28. How does it work? @gethackteam
- 29. How does it work? CONTEXT UPDATE CONTEXT @gethackteam
- 30. How does it work? @gethackteam
- 31. How does it work? Create the Context “store” @gethackteam
- 32. How does it work? @gethackteam
- 33. How does it work? Set the Context value @gethackteam
- 34. How does it work? @gethackteam
- 35. How does it work? Consume the values inside the Context @gethackteam
- 41. Cool! How can I implement this? @gethackteam
- 51. @gethackteam
- 54. Update the Context What is this value? @gethackteam
- 67. And create your own Hook to handle this @gethackteam
- 71. When using Context you *could* useMemo() @gethackteam
- 77. What if I have more complex logic? @gethackteam
- 80. useReducer() Current state Initial state @gethackteam
- 81. useReducer() Current state Initial state Function to update state @gethackteam
- 82. useReducer() Current state Initial state Function to update state Returns new state @gethackteam
- 95. Again, looks familiar right? 🤔 @gethackteam
- 99. Use it with Context @gethackteam
- 109. What if i want a “global” context? @gethackteam
- 120. Context lets you pass data through the component tree @gethackteam
- 121. Hooks let you use easily access this Context @gethackteam
- 122. Context is NOT a solution for every state problem @gethackteam
- 123. Want to learn more? #javascriptEverywhere @gethackteam Get the code