O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

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

741 visualizações

Publicada em

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.

Publicada em: Tecnologia
  • Login to see the comments

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

×