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.

The new React

94 views

Published on

The new React workshop at the DevDays Vilnius 2019

Published in: Technology
  • Be the first to comment

  • Be the first to like this

The new React

  1. 1. The new React Maurice de Beijer - @mauricedb
  2. 2.  Maurice de Beijer  The Problem Solver  Microsoft MVP  Freelance developer/instructor  Twitter: @mauricedb  Web: http://www.TheProblemSolver.nl  E-mail: maurice.de.beijer@gmail.com 2ABL - The Problem Solver
  3. 3. The React Newsletter © ABL - The Problem Solver 3 http://bit.ly/ReactNewsletter
  4. 4. Topics  Intro into React hooks  Basic hooks  useState()  useEffect()  useEffect() with asynchronous actions  useContext()  Custom hooks  Advanced hooks  useDebugValue()  useMemo()  useReducer()  useRef()  Suspense  lazy()  StrictMode  ConcurrentMode  React Cache © ABL - The Problem Solver 4
  5. 5. Follow along  Git repository with slides and code  https://github.com/mauricedb/the-new-react-vilnius-2019 © ABL - The Problem Solver 5
  6. 6. Type it out by hand? “Typing it drills it into your brain much better than simply copying and pasting it.You're forming new neuron pathways.Those pathways are going to help you in the future. Help them out now!” © ABL - The Problem Solver 6
  7. 7. Prerequisites Install Node & NPM © ABL - The Problem Solver 7
  8. 8. Install Node.js & NPM © ABL - The Problem Solver 8
  9. 9. Basic hooks © ABL - The Problem Solver 9
  10. 10. useState()  Returns a persisted stateful value and a function to update it  Values can be object or scalar values  Starts with an initial value  Can be a lazy initialization function  The updater function replaces the original state  Doesn’t merge state like the class based setState()  The update value can also be a function © ABL - The Problem Solver 10
  11. 11. Class based © ABL - The Problem Solver 11
  12. 12. With Hooks © ABL - The Problem Solver 12
  13. 13. useEffect()  Accepts a function that contains imperative code  The code is used to execute (asynchronous) side effects  useEffect() fires after layout and paint, during a deferred event  Use useLayoutEffect() for code that should not be deferred  Runs both on component mount as well as updates  Control when using the dependencies array  Optionally return a cleanup function © ABL - The Problem Solver 13
  14. 14. Class based © ABL - The Problem Solver 14
  15. 15. With Hooks © ABL - The Problem Solver 15
  16. 16. useEffect() with asynchronous actions  useEffect() is great for async actions like AJAX requests  👉 Make sure to never return a promise 👈  Use the effect cleanup function to cancel a pending request © ABL - The Problem Solver 16
  17. 17. Class based © ABL - The Problem Solver 17
  18. 18. With Hooks © ABL - The Problem Solver 18
  19. 19. useContext()  Accepts a context object and returns the current context value  Much easier then render props 😺  Needs to be part of <Context.Provider/> component subtree © ABL - The Problem Solver 19
  20. 20. Render props © ABL - The Problem Solver 20
  21. 21. With Hooks © ABL - The Problem Solver 21
  22. 22. Custom hooks  Extract code from a component into a reusable custom hook  Makes the code more reusable  Can use other hooks as needed  Just like a functional component  Must be named useSomething()  For React to recognize it as a hook  Publish to NPM for others to use if you like  See: https://nikgraf.github.io/react-hooks/ © ABL - The Problem Solver 22
  23. 23. Before © ABL - The Problem Solver 23
  24. 24. The component with custom hook © ABL - The Problem Solver 24
  25. 25. The custom hook © ABL - The Problem Solver 25
  26. 26. useDebugValue()  Displays a label for a custom hook in React DevTools  👉 Useful for custom Hooks that are part of shared libraries 👈 © ABL - The Problem Solver 26
  27. 27. With Hooks © ABL - The Problem Solver 27
  28. 28. Additional Hooks © ABL - The Problem Solver 28
  29. 29. useMemo()  Returns a memoized value  Same inputs return the same result  It’s a performance optimization  Not as a guarantee © ABL - The Problem Solver 29
  30. 30. Before © ABL - The Problem Solver 30
  31. 31. With useMemo() © ABL - The Problem Solver 31
  32. 32. useReducer()  A more powerful version of useState()  Uses a reducer function to manage state  Just like Redux  The reducer function always has the same signature  (oldState, action) => newState  Preferred when state logic is more complex  Much easier to write in aTDD style  👉The dispatch function won’t change with re-renders 👈 © ABL - The Problem Solver 32
  33. 33. With useState() © ABL - The Problem Solver 33
  34. 34. Manage state © ABL - The Problem Solver 34
  35. 35. Update selection © ABL - The Problem Solver 35
  36. 36. Update state © ABL - The Problem Solver 36
  37. 37. With useReducer() © ABL - The Problem Solver 37
  38. 38. useReducer() © ABL - The Problem Solver 38
  39. 39. The reducer function © ABL - The Problem Solver 39
  40. 40. Dispatch selection © ABL - The Problem Solver 40
  41. 41. Dispatch state changes © ABL - The Problem Solver 41
  42. 42. useRef()  Maintain state between each re-render  Without triggering a render on updates  Typically used for DOM object and useEffect()  But can be used for any kind of state © ABL - The Problem Solver 42
  43. 43. Manipulating DOM objects with useRef() © ABL - The Problem Solver 43
  44. 44. Using a DOM object © ABL - The Problem Solver 44
  45. 45. Remembering other values using useRef() © ABL - The Problem Solver 45
  46. 46. Wrong solution © ABL - The Problem Solver 46
  47. 47. With useRef() © ABL - The Problem Solver 47
  48. 48. Concurrent React © ABL - The Problem Solver 48
  49. 49. lazy()  Create a component that is loaded dynamically  With automatic bundle splitting by Webpack  Requires a <Suspense /> component as a parent  The fallback UI is required  Typically a spinner or something similar © ABL - The Problem Solver 49
  50. 50. Eager Loading © ABL - The Problem Solver 50
  51. 51. Lazy Loading © ABL - The Problem Solver 51
  52. 52. StrictMode  The <StrictMode /> component helps prepare for async rendering  Warns about unsafe lifecycle functions like componentWillMount()  As well as other deprecated React features  Will try to detect illegal side effects by rendering twice  The same applies to some state management functions  👉 Does nothing in a production build 👈  Will make a development build run slower © ABL - The Problem Solver 52
  53. 53. Not strict © ABL - The Problem Solver 53
  54. 54. Using <StrictMode/> © ABL - The Problem Solver 54
  55. 55. Fixing the strict error © ABL - The Problem Solver 55
  56. 56. Before © ABL - The Problem Solver 56
  57. 57. No more <ListGroup/> © ABL - The Problem Solver 57
  58. 58. Concurrent mode  React can render in concurrent mode  Rendering happens in time slices  React can prioritize user events over other work  Results in more responsive applications  Either for the whole application using ReactDOM.createRoot()  Or a component subtree using <ConcurrentMode/> © ABL - The Problem Solver 58
  59. 59. Time Slicing Demo © ABL - The Problem Solver 59
  60. 60. Current rendering © ABL - The Problem Solver 60
  61. 61. Concurrent rendering © ABL - The Problem Solver 61
  62. 62. ReactCache  Creates a resource manager to load data asynchronous  Can work with anything that return a promise  Can be called from a components render() function  Will pause rendering until the promise resolves  💔The NPM package is broken for the current React version 💔 © ABL - The Problem Solver 62
  63. 63. Rendering asynchronous data © ABL - The Problem Solver 63
  64. 64. The asynchronous resource © ABL - The Problem Solver 64
  65. 65. Conclusion  The future of React is bright  Functional components and hooks is the future of components  But class based components will continue to work  Concurrent React makes large complex application responsive  Easy to implement in most cases  React Cache will make data loading easier  But not quite yet © ABL - The Problem Solver 65
  66. 66. Maurice de Beijer @mauricedb © ABL - The Problem Solver 66

×