Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à We Are Developers - Modern React (Suspense, Context, Hooks) - Roy Derks
Similaire à We Are Developers - Modern React (Suspense, Context, Hooks) - Roy Derks (20)
Plus de Roy Derks
Plus de Roy Derks (12)
Dernier
Dernier (20)
We Are Developers - Modern React (Suspense, Context, Hooks) - Roy Derks
- 1. Modern React: Things You Didn’t Know Were Possible WeAreDevelopers 06/06/2019 @gethackteam
- 2. What is this about? @gethackteam
- 3. @gethackteam What is this about?
- 4. Hooks @gethackteam What is this about?
- 5. Hooks Context @gethackteam What is this about?
- 7. Hooks Suspense Context @gethackteam What is this about? Reducer
- 13. @gethackteam Code Splitting Simple ES6 import() for function getSomething()
- 16. @gethackteam Code Splitting Dynamic ES6 import() for function getSomething()
- 17. @gethackteam Code Splitting Dynamic ES6 import() for function getSomething() Promise!
- 18. The same can be done for components @gethackteam
- 21. @gethackteam Code Splitting Simple ES6 import() for component <ChildComponent />
- 24. @gethackteam Code Splitting Dynamic React lazy() for component <ChildComponent />
- 25. Or even more sophisticated with Suspense @gethackteam
- 26. @gethackteam Code Splitting with Suspense
- 27. @gethackteam Code Splitting with Suspense
- 28. @gethackteam Code Splitting with Suspense
- 29. You can even wrap multiple lazy() imports @gethackteam
- 30. @gethackteam Code Splitting with Suspense
- 31. @gethackteam Code Splitting with Suspense
- 32. @gethackteam Code Splitting with Suspense Will “wait” for both components to resolve
- 33. And these <> are Fragments @gethackteam
- 36. @gethackteam Fragments React expects a single JSX element
- 38. @gethackteam Fragments Renders an extra DOM element
- 41. Or the preferred shorthand @gethackteam
- 43. Let’s look at “state” @gethackteam
- 44. @gethackteam
- 47. @gethackteam 1. Class Component 2. Constructor with initial state
- 48. @gethackteam 1. Class Component 2. Constructor with initial state
- 49. @gethackteam 1. Class Component 2. Constructor with initial state 3. setState() function to mutate state
- 50. Can’t this be simpler? @gethackteam
- 54. useState() Hook Current state Initial state @gethackteam
- 55. useState() Hook Current state Initial state Function to update state @gethackteam
- 58. @gethackteam useState() Hook Set the initial state
- 61. @gethackteam useState() Hook Get the current state
- 64. @gethackteam useState() Hook Mutate the state
- 67. Only works in function components @gethackteam
- 68. So what about lifecycles? @gethackteam
- 71. But this only works in Class components @gethackteam
- 73. @gethackteam useEffect() Hook Also executes when component mounts
- 75. What if I want to check for changes in props or state? @gethackteam
- 77. @gethackteam ComponentDidUpdate() Executes when count field in props changes
- 78. @gethackteam ComponentDidUpdate() Executes when count field in props changes
- 79. @gethackteam ComponentDidUpdate() Executes when count field in props changes Executes when count field in state changes
- 81. @gethackteam useEffect() Hook Executes whenever the value for count changes
- 82. @gethackteam useEffect() Hook First mount Updates
- 83. You can use them side-by-side and even multiple instances @gethackteam
- 88. What about the Context API? @gethackteam
- 89. About the Context API BEFORE React v16.3 @gethackteam
- 90. How does it work? @gethackteam
- 91. How does it work? CONTEXT UPDATE CONTEXT @gethackteam
- 92. How does it work? @gethackteam
- 93. How does it work? Create the Context “store” @gethackteam
- 94. How does it work? @gethackteam
- 95. How does it work? Set the Context value @gethackteam
- 96. How does it work? @gethackteam
- 97. How does it work? Consume the values inside the Context @gethackteam
- 101. How can I implement this? @gethackteam
- 102. How to implement?
- 103. How to implement?
- 104. How to implement?
- 105. How to implement?
- 112. Update the Context What is this value? @gethackteam
- 113. Update the Context
- 114. Update the Context
- 115. Update the Context
- 116. Update the Context
- 125. And create your own Hook to handle this @gethackteam
- 129. When using Context always useMemo() @gethackteam
- 136. What if I have more complex logic? @gethackteam
- 139. useReducer() Current state Initial state @gethackteam
- 140. useReducer() Current state Initial state Function to update state @gethackteam
- 141. useReducer() Current state Initial state Function to update state Returns new state @gethackteam
- 154. Again, looks familiar right? 🤔 @gethackteam
- 158. Use it with Context @gethackteam
- 168. What if i want a “global” state? @gethackteam
- 178. Dont forget to useMemo() @gethackteam
- 181. What will come next? @gethackteam
- 183. Suspense for Data Fetching @gethackteam
- 184. Suspense for Server-Side Rendering (SSR) @gethackteam
- 185. Want to learn more? 1-day React Hooks & Suspense Workshop Berlin | London | Amsterdam