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.

React async rendering

153 views

Published on

React new core architecture (codenamed Fiber) was launched in React 16, it opened a new chapter in React.

This talk will cover the basic knowledge of the Fiber core, from rewrite strategy to its influence on application engineers. Also, how it empowered an async future in React, and most importantly how our applications could adopt it.

https://hkoscon.org/2018/topic/react-async-rendering-paradigm-shift-after-react-fiber/

https://github.com/ivan-ha/react-async-rendering-demo

Published in: Technology
  • Be the first to comment

  • Be the first to like this

React async rendering

  1. 1. React Async Rendering Paradigm Shift After React Fiber Ivan @ HKOSCon 2018 2018.06.17 1
  2. 2. About Ivan ● React fan boy ● FE leader, working on hk01.com 2
  3. 3. Outline 3 BonusAsync Rendering React Fiber new How HK01 Prepare for the Future?
  4. 4. React Fiber 4
  5. 5. React Mental Model 5 Reconciler (render phase) Renderer (commit phase) Browser, mobile, PDF, Word etc props state vDOM React Fiber componentDidMount componentDidUpdate componentWillUnmount componentWillMount componentWillReceiveProps shouldComponentUpdate componentWillUpdate
  6. 6. 6Why reconciler rewrite?
  7. 7. Before & After Fiber 7
  8. 8. Async Rendering 8
  9. 9. 9
  10. 10. 10 Still coming soon
  11. 11. 11Beyond React 16 by @Dan Abramov
  12. 12. Bottlenecks 12 Network Speed Computing Power
  13. 13. 60 FPS 13 below that would result janky animation
  14. 14. Timeline 14 Render phase Commit phaseEvent/update Sync Mode Async Mode 16 ms
  15. 15. Demo 15https://ivan-ha.github.io/react-async-rendering-demo/
  16. 16. Sync Mode 16
  17. 17. With Debounce 17
  18. 18. Async Mode 18
  19. 19. Time Slicing 19 “... to ensure that high-priority updates don’t get blocked by a low-priority update.”
  20. 20. Bottlenecks 20 Network Speed Computing Power
  21. 21. 21
  22. 22. 22 How to implement loading spinner?
  23. 23. 23
  24. 24. 24
  25. 25. 25
  26. 26. 26
  27. 27. 27 Problem 1 - cascading spinners
  28. 28. 28 Problem 2 - splash
  29. 29. Demo 29https://ivan-ha.github.io/react-async-rendering-demo/
  30. 30. Movie App 30
  31. 31. 31 Page Spinner
  32. 32. 32 Component Spinner
  33. 33. Suspense 33 “... for components to suspend rendering while they load async data.”
  34. 34. How HK01 Prepare for the Future? 34
  35. 35. 35Our industry changes fast
  36. 36. We Explore 36
  37. 37. We Learn 37
  38. 38. We Share 38
  39. 39. We Share 39
  40. 40. We Adopt Say bye to some lifecycles 40 Reconciler (render phase) Renderer (commit phase) componentWillMount componentWillReceiveProps shouldComponentUpdate componentWillUpdate getDerivedStateFromProps getSnapshotBeforeUpdate componentDidMount componentDidUpdate componentWillUnmount
  41. 41. We Adopt <StrictMode/> as guardian 41
  42. 42. 42
  43. 43. 43 https://goo.gl/tMSRPU
  44. 44. Bonus 44
  45. 45. useFiber Feature Flag 45
  46. 46. Is Fiber Ready Yet 46
  47. 47. References ● https://reactjs.org/blog/2018/03/01/sneak-peek-beyond-react-16.html ● https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html ● https://code.facebook.com/posts/1716776591680069/react-16-a-look-inside-an-api-compatible -rewrite-of-our-frontend-ui-library/ ● https://www.youtube.com/watch?v=ZCuYPiUIONs https://dev.to/swyx/react-suspense-qa-28lc ● https://twitter.com/acdlite/status/977291318324948992 ● https://twitter.com/dan_abramov/status/981712092611989509 47

×