Successfully reported this slideshow.
Your SlideShare is downloading. ×

Hello, React Hooks!

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 75 Ad
Advertisement

More Related Content

Similar to Hello, React Hooks! (20)

Advertisement
Advertisement

Hello, React Hooks!

  1. 1. Hello, React Hooks! (heejongahn@gmail.com) 2019-02-09
  2. 2. Table of Contents • Topic: React Hooks • 1. Motivation: ? • 2. Usage: ? • 3. Internal: ?
  3. 3. Motivation • React Hooks ?
  4. 4. Motivation • React Class Component (from ):
  5. 5. Motivation • React Class Component (from ): • It’s hard to reuse stateful logic between components
  6. 6. Motivation • React Class Component (from ): • It’s hard to reuse stateful logic between components • Complex components become hard to understand
  7. 7. Motivation • React Class Component (from ): • It’s hard to reuse stateful logic between components • Complex components become hard to understand • Classes confuse both people and machines
  8. 8. • : HoC, Render Props
  9. 9. • : HoC, Render Props • •
  10. 10. • : HoC, Render Props • • • → Wrapper Hell
  11. 11. https://medium.com/@jackyef/react-hooks-why-we-should-embrace-it-86e408663ad6
  12. 12. https://medium.com/@jackyef/react-hooks-why-we-should-embrace-it-86e408663ad6 Wrapper Hell
  13. 13. • ( , , …) :
  14. 14. • ( , , …) : • : componentDidMount
  15. 15. • ( , , …) : • : componentDidMount • : componentDidUpdate
  16. 16. • ( , , …) : • : componentDidMount • : componentDidUpdate • : componentWillUnmount
  17. 17. • ( , , …) : • : componentDidMount • : componentDidUpdate • : componentWillUnmount •
  18. 18. • ( , , …) : • : componentDidMount • : componentDidUpdate • : componentWillUnmount • • “ ” ?
  19. 19. • ( , , …) : • : componentDidMount • : componentDidUpdate • : componentWillUnmount • • “ ” ? ,
 .
 . Mutually related code that changes together gets split apart,
 but completely unrelated code ends up combined in a single method.
 This makes it too easy to introduce bugs and inconsistencies.
  20. 20. • ( , , …) : • : componentDidMount • : componentDidUpdate • : componentWillUnmount • • “ ” ? ,
 .
 . Mutually related code that changes together gets split apart,
 but completely unrelated code ends up combined in a single method.
 This makes it too easy to introduce bugs and inconsistencies.
  21. 21.
  22. 22. • • class 
 (How does this work?)
  23. 23. • • class 
 (How does this work?) • ,
  24. 24. • • class 
 (How does this work?) • , •
  25. 25. • • class 
 (How does this work?) • , • •
  26. 26. • • class 
 (How does this work?) • , • • • Poor Minification, Flaky & unreliable Hot Reload
  27. 27. Hooks to the rescue!
  28. 28. Hooks to the rescue! https://twitter.com/prchdk/status/1056960391543062528
  29. 29. Hooks to the rescue! https://twitter.com/prchdk/status/1056960391543062528 No more classes, Just functions
  30. 30. Usage • React Hooks Class Component . • React Hooks, ?
  31. 31. Usage • Built-in Hooks • useState • useEffect • useRef • useContext • Custom Hooks
  32. 32. Built-in Hook: useState
  33. 33. Built-in Hook: useState
  34. 34. Built-in Hook: useState state 
 useState
  35. 35. Built-in Hook: useState
  36. 36. Built-in Hook: useEffect • • • • DOM • … • 
 componentDidMount, componentDidUpdate

  37. 37. Built-in Hook: useEffect • useEffect DOM
  38. 38. Built-in Hook: useEffect (w/ cleanup) API • , : componentWillUnmountAPI
  39. 39. Built-in Hook: useEffect (w/ cleanup) : DOM : , • useEffect , 

  40. 40. Built-in Hook: useEffect (optimization) . componentDidMount [] .
  41. 41. Built-in Hook: useEffect
  42. 42. Built-in Hook: useRef • 
 • React.createRef 
 ,
 DOM node reference 
 .
  43. 43. Built-in Hook: useContext
  44. 44. Other Built-in Hooks • useCallback
  45. 45. Other Built-in Hooks • useCallback • useMemo
  46. 46. Other Built-in Hooks • useCallback • useMemo • useLayoutEffect
  47. 47. Other Built-in Hooks • useCallback • useMemo • useLayoutEffect • …
  48. 48. Other Built-in Hooks • useCallback • useMemo • useLayoutEffect • … • https://reactjs.org/docs/hooks-reference.html
  49. 49. Custom Hooks • Hooks = A way to reuse stateful logic (inside function components)
  50. 50. Custom Hooks • Hooks = A way to reuse stateful logic (inside function components) • ,
 Hook
  51. 51. Custom Hooks • Hooks = A way to reuse stateful logic (inside function components) • ,
 Hook • = “use” , A custom Hook is a JavaScript function whose name starts with “use” and that may call other Hooks.
  52. 52. Rule of Hooks (link) • 
 Only call Hooks at the top level.
  53. 53. Rule of Hooks (link) • 
 Only call Hooks at the top level. • , , 
 Don’t call Hooks inside loops, conditions, or nested functions
  54. 54. Rule of Hooks (link) • 
 Only call Hooks at the top level. • , , 
 Don’t call Hooks inside loops, conditions, or nested functions • 
 Only call Hooks from React function components.
  55. 55. Rule of Hooks (link) • 
 Only call Hooks at the top level. • , , 
 Don’t call Hooks inside loops, conditions, or nested functions • 
 Only call Hooks from React function components. • 
 Don’t call Hooks from regular JavaScript functions.
  56. 56. Rule of Hooks (link) • 
 Only call Hooks at the top level. • , , 
 Don’t call Hooks inside loops, conditions, or nested functions • 
 Only call Hooks from React function components. • 
 Don’t call Hooks from regular JavaScript functions. •
  57. 57. Custom Hooks example: useInterval https://overreacted.io/making-setinterval-declarative-with-react-hooks/
  58. 58. Custom Hooks example: useSpring http://react-spring.surge.sh/hooks
  59. 59. … and more Custom Hook examples https://usehooks.com/
  60. 60. Internal • React Hooks Class Component . • React Hooks , ( ) . • React Hooks ?
  61. 61. Rule of Hooks (revisited) • 
 Only call Hooks at the top level. • , , 
 Don’t call Hooks inside loops, conditions, or nested functions • 
 Only call Hooks from React function components. • 
 Don’t call Hooks from regular JavaScript functions. •
  62. 62. • 
 Only call Hooks at the top level. • , , 
 Don’t call Hooks inside loops, conditions, or nested functions • 
 Only call Hooks from React function components. • 
 Don’t call Hooks from regular JavaScript functions. • Rule of Hooks (revisited) yeah but why?
  63. 63. Internal: Pseudocode ver. https://mobile.twitter.com/jamiebuilds/status/1055538414538223616 https://overreacted.io/react-as-a-ui-runtime/
  64. 64. From “Rule of Hooks” doc • useState 
 ? So how does React know which state corresponds to which useState call?
  65. 65. From “Rule of Hooks” doc • useState 
 ? So how does React know which state corresponds to which useState call? • .
 The answer is that React relies on the order in which Hooks are called.
  66. 66. From “Rule of Hooks” doc • useState 
 ? So how does React know which state corresponds to which useState call? • .
 The answer is that React relies on the order in which Hooks are called. • .
 This is why Hooks must be called on the top level of our components.
  67. 67. From “Rule of Hooks” doc • useState 
 ? So how does React know which state corresponds to which useState call? • .
 The answer is that React relies on the order in which Hooks are called. • .
 This is why Hooks must be called on the top level of our components. • ? 👉 See Why Do React Hooks Rely on Call Order?
  68. 68. From “Rule of Hooks” doc • useState 
 ? So how does React know which state corresponds to which useState call? • .
 The answer is that React relies on the order in which Hooks are called. • .
 This is why Hooks must be called on the top level of our components. • ? 👉 See Why Do React Hooks Rely on Call Order? • tl;dr: , 
 .
  69. 69. … • Under the hood of React’s hooks system • React as a UI Runtime • React hooks: not magic, just arrays • react-reconciler/src/ReactFiberHooks.js
  70. 70. Summary • React Hooks CC(Class Component) .
 Hooks CC .
  71. 71. Summary • React Hooks CC(Class Component) .
 Hooks CC . • React useState, useEffect .
 , .
  72. 72. Summary • React Hooks CC(Class Component) .
 Hooks CC . • React useState, useEffect .
 , . • React Hooks Hook .
 , Hook Rules of Hook .
  73. 73. Summary
  74. 74. References (1/2) • General • Introducing Hooks • A comment on RFC: React Hooks • React as a UI Runtime • Motivation • React Today and Tomorrow and 90% Cleaner React With Hooks
  75. 75. References (2/2) • Usage • Making Sense of React Hooks • Making setInterval Declarative with React Hooks • Internal • Why Do React Hooks Rely on Call Order? • React hooks: not magic, just arrays • Under the hood of React’s hooks system • react-reconciler/src/ReactFiberHooks.js

×