Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

We Are Developers - Modern React (Suspense, Context, Hooks) - Roy Derks

224 views

Published on

Since the introduction of React a few years ago, a lot has been changed. Were React used to be a library with just a limited amount of features, it now can handle complex use-cases like state management or lazy-loading with just its APIs. This talk will show how these new features can help you develop in React with fewer packages and above all, less code.

Published in: Technology
  • Be the first to comment

We Are Developers - Modern React (Suspense, Context, Hooks) - Roy Derks

  1. 1. Modern React: Things You Didn’t Know Were Possible WeAreDevelopers 06/06/2019 @gethackteam
  2. 2. What is this about? @gethackteam
  3. 3. @gethackteam What is this about?
  4. 4. Hooks @gethackteam What is this about?
  5. 5. Hooks Context @gethackteam What is this about?
  6. 6. Hooks Suspense Context @gethackteam What is this about?
  7. 7. Hooks Suspense Context @gethackteam What is this about? Reducer
  8. 8. Who Am I? @gethackteam
  9. 9. Roy Derks @gethackteam
  10. 10. Code-splitting @gethackteam
  11. 11. @gethackteam Code Splitting
  12. 12. @gethackteam Code Splitting
  13. 13. @gethackteam Code Splitting Simple ES6 import() for function getSomething()
  14. 14. @gethackteam Code Splitting
  15. 15. @gethackteam Code Splitting
  16. 16. @gethackteam Code Splitting Dynamic ES6 import() for function getSomething()
  17. 17. @gethackteam Code Splitting Dynamic ES6 import() for function getSomething() Promise!
  18. 18. The same can be done for components @gethackteam
  19. 19. @gethackteam Code Splitting
  20. 20. @gethackteam Code Splitting
  21. 21. @gethackteam Code Splitting Simple ES6 import() for component <ChildComponent />
  22. 22. @gethackteam Code Splitting
  23. 23. @gethackteam Code Splitting
  24. 24. @gethackteam Code Splitting Dynamic React lazy() for component <ChildComponent />
  25. 25. Or even more sophisticated with Suspense @gethackteam
  26. 26. @gethackteam Code Splitting with Suspense
  27. 27. @gethackteam Code Splitting with Suspense
  28. 28. @gethackteam Code Splitting with Suspense
  29. 29. You can even wrap multiple lazy() imports @gethackteam
  30. 30. @gethackteam Code Splitting with Suspense
  31. 31. @gethackteam Code Splitting with Suspense
  32. 32. @gethackteam Code Splitting with Suspense Will “wait” for both components to resolve
  33. 33. And these <> are Fragments @gethackteam
  34. 34. @gethackteam Fragments
  35. 35. @gethackteam Fragments
  36. 36. @gethackteam Fragments React expects a single JSX element
  37. 37. @gethackteam Fragments
  38. 38. @gethackteam Fragments Renders an extra DOM element
  39. 39. @gethackteam Fragments
  40. 40. @gethackteam Fragments But Fragments don’t!
  41. 41. Or the preferred shorthand @gethackteam
  42. 42. @gethackteam Fragments
  43. 43. Let’s look at “state” @gethackteam
  44. 44. @gethackteam
  45. 45. @gethackteam 1. Class Component
  46. 46. @gethackteam 1. Class Component
  47. 47. @gethackteam 1. Class Component 2. Constructor with initial state
  48. 48. @gethackteam 1. Class Component 2. Constructor with initial state
  49. 49. @gethackteam 1. Class Component 2. Constructor with initial state 3. setState() function to mutate state
  50. 50. Can’t this be simpler? @gethackteam
  51. 51. Hooks!! @gethackteam
  52. 52. useState() Hook @gethackteam
  53. 53. useState() Hook Current state @gethackteam
  54. 54. useState() Hook Current state Initial state @gethackteam
  55. 55. useState() Hook Current state Initial state Function to update state @gethackteam
  56. 56. @gethackteam useState() Hook
  57. 57. @gethackteam useState() Hook
  58. 58. @gethackteam useState() Hook Set the initial state
  59. 59. @gethackteam useState() Hook
  60. 60. @gethackteam useState() Hook
  61. 61. @gethackteam useState() Hook Get the current state
  62. 62. @gethackteam useState() Hook
  63. 63. @gethackteam useState() Hook
  64. 64. @gethackteam useState() Hook Mutate the state
  65. 65. @gethackteam useState() Hook
  66. 66. @gethackteam useState() Hook
  67. 67. Only works in function components @gethackteam
  68. 68. So what about lifecycles? @gethackteam
  69. 69. @gethackteam ComponentDidMount()
  70. 70. @gethackteam ComponentDidMount() Executes when component mounts
  71. 71. But this only works in Class components @gethackteam
  72. 72. @gethackteam useEffect() Hook
  73. 73. @gethackteam useEffect() Hook Also executes when component mounts
  74. 74. @gethackteam useEffect() Hook
  75. 75. What if I want to check for changes in props or state? @gethackteam
  76. 76. @gethackteam ComponentDidUpdate()
  77. 77. @gethackteam ComponentDidUpdate() Executes when count field in props changes
  78. 78. @gethackteam ComponentDidUpdate() Executes when count field in props changes
  79. 79. @gethackteam ComponentDidUpdate() Executes when count field in props changes Executes when count field in state changes
  80. 80. @gethackteam useEffect() Hook
  81. 81. @gethackteam useEffect() Hook Executes whenever the value for count changes
  82. 82. @gethackteam useEffect() Hook First mount Updates
  83. 83. You can use them side-by-side and even multiple instances @gethackteam
  84. 84. @gethackteam useEffect() Hook
  85. 85. @gethackteam useEffect() Hook
  86. 86. @gethackteam useEffect() Hook
  87. 87. @gethackteam useEffect() Hook
  88. 88. What about the Context API? @gethackteam
  89. 89. About the Context API BEFORE React v16.3 @gethackteam
  90. 90. How does it work? @gethackteam
  91. 91. How does it work? CONTEXT UPDATE CONTEXT @gethackteam
  92. 92. How does it work? @gethackteam
  93. 93. How does it work? Create the Context “store” @gethackteam
  94. 94. How does it work? @gethackteam
  95. 95. How does it work? Set the Context value @gethackteam
  96. 96. How does it work? @gethackteam
  97. 97. How does it work? Consume the values inside the Context @gethackteam
  98. 98. Looks familiar 🤔  @gethackteam
  99. 99. Looks familiar @gethackteam
  100. 100. Looks familiar @gethackteam
  101. 101. How can I implement this? @gethackteam
  102. 102. How to implement?
  103. 103. How to implement?
  104. 104. How to implement?
  105. 105. How to implement?
  106. 106. Or with Hooks! @gethackteam
  107. 107. How to implement? @gethackteam
  108. 108. How to implement? @gethackteam
  109. 109. How to implement? @gethackteam
  110. 110. Update the Context @gethackteam
  111. 111. Update the Context @gethackteam
  112. 112. Update the Context What is this value? @gethackteam
  113. 113. Update the Context
  114. 114. Update the Context
  115. 115. Update the Context
  116. 116. Update the Context
  117. 117. Separating Providers from Consumers @gethackteam
  118. 118. Separating Providers @gethackteam
  119. 119. Separating Providers @gethackteam
  120. 120. Separating Providers @gethackteam
  121. 121. Separating Providers @gethackteam
  122. 122. @gethackteam Separating Providers
  123. 123. @gethackteam Separating Providers
  124. 124. @gethackteam Separating Providers
  125. 125. And create your own Hook to handle this @gethackteam
  126. 126. @gethackteam Create Custom Hook
  127. 127. @gethackteam Create Custom Hook
  128. 128. @gethackteam Create Custom Hook
  129. 129. When using Context always useMemo() @gethackteam
  130. 130. useMemo() @gethackteam CONTEXT UPDATE ACTION
  131. 131. useMemo() @gethackteam CONTEXT UPDATE ACTION
  132. 132. useMemo() @gethackteam CONTEXT UPDATE ACTION
  133. 133. Memo is like componentShouldUpdate() @gethackteam
  134. 134. useMemo() @gethackteam
  135. 135. useMemo() @gethackteam
  136. 136. What if I have more complex logic? @gethackteam
  137. 137. useReducer() @gethackteam
  138. 138. useReducer() Current state @gethackteam
  139. 139. useReducer() Current state Initial state @gethackteam
  140. 140. useReducer() Current state Initial state Function to update state @gethackteam
  141. 141. useReducer() Current state Initial state Function to update state Returns new state @gethackteam
  142. 142. useReducer() @gethackteam
  143. 143. useReducer() @gethackteam
  144. 144. useReducer() @gethackteam
  145. 145. useReducer() @gethackteam
  146. 146. useReducer() @gethackteam
  147. 147. useReducer() @gethackteam
  148. 148. useReducer() @gethackteam
  149. 149. useReducer() @gethackteam
  150. 150. useReducer() @gethackteam
  151. 151. useReducer() @gethackteam
  152. 152. useReducer() @gethackteam
  153. 153. useReducer() @gethackteam
  154. 154. Again, looks familiar right? 🤔  @gethackteam
  155. 155. Redux Reducers @gethackteam
  156. 156. Redux Reducers @gethackteam
  157. 157. Redux Reducers @gethackteam
  158. 158. Use it with Context @gethackteam
  159. 159. Update the Context @gethackteam
  160. 160. Update the Context @gethackteam
  161. 161. Update the Context @gethackteam
  162. 162. Update the Context @gethackteam
  163. 163. What about debugging? @gethackteam
  164. 164. @gethackteam Update the Context
  165. 165. @gethackteam Update the Context
  166. 166. @gethackteam Update the Context
  167. 167. @gethackteam Update the Context
  168. 168. What if i want a “global” state? @gethackteam
  169. 169. Nest Context Providers @gethackteam
  170. 170. Nest Context Providers @gethackteam
  171. 171. Nest Context Providers @gethackteam
  172. 172. Nest Context Providers @gethackteam
  173. 173. Nest Context Providers @gethackteam
  174. 174. Nest Context Providers @gethackteam
  175. 175. Nest Context Providers @gethackteam
  176. 176. Nest Context Providers @gethackteam
  177. 177. Nest Context Providers @gethackteam
  178. 178. Dont forget to useMemo() @gethackteam
  179. 179. useMemo() @gethackteam CONTEXT UPDATE
  180. 180. useMemo() @gethackteam CONTEXT UPDATE
  181. 181. What will come next? @gethackteam
  182. 182. Concurrent Mode @gethackteam
  183. 183. Suspense for Data Fetching @gethackteam
  184. 184. Suspense for Server-Side Rendering (SSR) @gethackteam
  185. 185. Want to learn more? 1-day React Hooks & Suspense Workshop Berlin | London | Amsterdam

×