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.
Hello, React Hooks!
(heejongahn@gmail.com)

2019-02-09
Table of Contents
• Topic: React Hooks

• 1. Motivation: ?

• 2. Usage: ?

• 3. Internal: ?
Motivation
• React Hooks ?
Motivation
• React Class Component (from ):
Motivation
• React Class Component (from ):

• It’s hard to reuse stateful logic between components
Motivation
• React Class Component (from ):

• It’s hard to reuse stateful logic between components
• Complex components b...
Motivation
• React Class Component (from ):

• It’s hard to reuse stateful logic between components
• Complex components b...
• : HoC, Render Props
• : HoC, Render Props

• 

•
• : HoC, Render Props

• 

• 

• → Wrapper Hell
https://medium.com/@jackyef/react-hooks-why-we-should-embrace-it-86e408663ad6
https://medium.com/@jackyef/react-hooks-why-we-should-embrace-it-86e408663ad6
Wrapper Hell
• ( , , …) :
• ( , , …) :

• : componentDidMount
• ( , , …) :

• : componentDidMount

• : componentDidUpdate
• ( , , …) :

• : componentDidMount

• : componentDidUpdate

• : componentWillUnmount
• ( , , …) :

• : componentDidMount

• : componentDidUpdate

• : componentWillUnmount
•
• ( , , …) :

• : componentDidMount

• : componentDidUpdate

• : componentWillUnmount
• 

• “ ” ?
• ( , , …) :

• : componentDidMount

• : componentDidUpdate

• : componentWillUnmount
• 

• “ ” ?
,

.

.

Mutually relate...
• ( , , …) :

• : componentDidMount

• : componentDidUpdate

• : componentWillUnmount
• 

• “ ” ?
,

.

.

Mutually relate...
•
• 

• class 

(How does this work?)
• 

• class 

(How does this work?)

• ,
• 

• class 

(How does this work?)

• , 

•
• 

• class 

(How does this work?)

• , 

• 

•
• 

• class 

(How does this work?)

• , 

• 

• 

• Poor Minification, Flaky & unreliable Hot Reload
Hooks to the rescue!
Hooks to the rescue!
https://twitter.com/prchdk/status/1056960391543062528
Hooks to the rescue!
https://twitter.com/prchdk/status/1056960391543062528
No more classes,

Just functions
Usage
• React Hooks Class Component .

• React Hooks, ?
Usage
• Built-in Hooks
• useState

• useEffect
• useRef

• useContext

• Custom Hooks
Built-in Hook: useState
Built-in Hook: useState
Built-in Hook: useState
state 

useState
Built-in Hook: useState
Built-in Hook: useEffect
• 

• 

• 

• DOM 

• …

• 

componentDidMount,
componentDidUpdate

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

DOM
:

,
• useEffect ,


Built-in Hook: useEffect (optimization)
.
componentDidMount [] .
Built-in Hook: useEffect
Built-in Hook: useRef
• 



• React.createRef 

,

DOM node reference 

.
Built-in Hook: useContext
Other Built-in Hooks
• useCallback
Other Built-in Hooks
• useCallback

• useMemo
Other Built-in Hooks
• useCallback

• useMemo

• useLayoutEffect
Other Built-in Hooks
• useCallback

• useMemo

• useLayoutEffect

• …
Other Built-in Hooks
• useCallback

• useMemo

• useLayoutEffect

• …

• https://reactjs.org/docs/hooks-reference.html
Custom Hooks
• Hooks = A way to reuse stateful logic (inside function components)
Custom Hooks
• Hooks = A way to reuse stateful logic (inside function components)

• ,

Hook
Custom Hooks
• Hooks = A way to reuse stateful logic (inside function components)

• ,

Hook 

• = “use” ,
A custom Hook i...
Rule of Hooks (link)
• 

Only call Hooks at the top level.
Rule of Hooks (link)
• 

Only call Hooks at the top level.
• , , 

Don’t call Hooks inside loops, conditions, or nested fu...
Rule of Hooks (link)
• 

Only call Hooks at the top level.
• , , 

Don’t call Hooks inside loops, conditions, or nested fu...
Rule of Hooks (link)
• 

Only call Hooks at the top level.
• , , 

Don’t call Hooks inside loops, conditions, or nested fu...
Rule of Hooks (link)
• 

Only call Hooks at the top level.
• , , 

Don’t call Hooks inside loops, conditions, or nested fu...
Custom Hooks example: useInterval
https://overreacted.io/making-setinterval-declarative-with-react-hooks/
Custom Hooks example: useSpring
http://react-spring.surge.sh/hooks
… and more Custom Hook examples
https://usehooks.com/
Internal
• React Hooks Class Component .

• React Hooks , ( ) .

• React Hooks ?
Rule of Hooks (revisited)
• 

Only call Hooks at the top level.
• , , 

Don’t call Hooks inside loops, conditions, or nest...
• 

Only call Hooks at the top level.
• , , 

Don’t call Hooks inside loops, conditions, or nested functions

• 

Only cal...
Internal: Pseudocode ver.
https://mobile.twitter.com/jamiebuilds/status/1055538414538223616
https://overreacted.io/react-a...
From “Rule of Hooks” doc
• useState 

? So how does React know which state corresponds to which useState call?
From “Rule of Hooks” doc
• useState 

? So how does React know which state corresponds to which useState call?

• .

The a...
From “Rule of Hooks” doc
• useState 

? So how does React know which state corresponds to which useState call?

• .

The a...
From “Rule of Hooks” doc
• useState 

? So how does React know which state corresponds to which useState call?

• .

The a...
From “Rule of Hooks” doc
• useState 

? So how does React know which state corresponds to which useState call?

• .

The a...
…
• Under the hood of React’s hooks system

• React as a UI Runtime

• React hooks: not magic, just arrays 

• react-recon...
Summary
• React Hooks CC(Class Component) .

Hooks CC .
Summary
• React Hooks CC(Class Component) .

Hooks CC .

• React useState, useEffect .

, .
Summary
• React Hooks CC(Class Component) .

Hooks CC .

• React useState, useEffect .

, .

• React Hooks Hook .

, Hook ...
Summary
References (1/2)
• General

• Introducing Hooks

• A comment on RFC: React Hooks

• React as a UI Runtime

• Motivation

•...
References (2/2)
• Usage

• Making Sense of React Hooks 

• Making setInterval Declarative with React Hooks 

• Internal

...
Upcoming SlideShare
Loading in …5
×

Hello, React Hooks!

2,729 views

Published on

React 16.8 버전에 들어온 Hooks API에 대해 소개합니다.

Published in: Technology
  • Download or read that Ebooks here ... ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • -- DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT -- ......................................................................................................................... ......................................................................................................................... Download FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... (Unlimited)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • If you want to download or read this book, copy link or url below in the New tab ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ACCESS that WEBSITE Over for All Ebooks (Unlimited) ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... DOWNLOAD FULL EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M }
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ACCESS that WEBSITE Over for All Ebooks (Unlimited) ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... DOWNLOAD FULL EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M }
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×