Hooks under the hood

Gli hook estendono le potenzialità dei componenti funzione in React, offrono la possibilità di avere logica stateful senza dover definire una classe e possono essere composti per essere riutilizzati.

Nonostante le reazioni della community React (e web in generale) siano state prevalentemente positive, qualcuno afferma che gli hook introducano troppa “magia”
nell’utilizzo di React, ne inficino la semplicità e perdano i vantaggi strutturali delle classi.

Probabilmente questa spaccatura deriva dal fatto che alla base della API finale degli hook ci sono molteplici considerazioni sia di natura tecnica che di API design che non è facile comunicare in modo sintetico nella documentazione della feature.

In questo talk, cercheremo di elencare insieme queste considerazioni e capire da dove derivano vantaggi e limitazioni della API degli hook.

L’obiettivo è avere un’idea più chiara non tanto di come si usino, ma del perché la API sia stata disegnata come oggi la conosciamo.

Transcript

1. November 2019 - 1 HOOKS UNDER THE HOOD @simonedavico
2. November 2019 - 2 “Hooks let you use state and other React features without writing a class.”
3. November 2019 - 3 Manage state...
4. November 2019 - 4 …and run side effects
5. November 2019 - 5 WHY AM I HERE? Spoilers: Dan made me do it 5 November 2019 -
6. November 2019 - 6 With hooks, beginners no longer need to learn about 'this' to avoid shooting themselves in the foot.
7. November 2019 - 7 It can’t only be about this!
8. November 2019 - 8 What about impact? ~6+ million monthly downloads ~3 million monthly downloads ~1.5 million monthly downloads
9. November 2019 - 9 THERE IS MORE 9 November 2019 -
10. November 2019 - 10 1. Technical implications 2. Programming model
11. November 2019 - 11 PROGRAM FOR TONIGHT • Technical implications Mutability vs. closures Performance and bundle size • Programming model (Behaviour) Composition The impedance mismatch • Rules of hooks React Fiber 101 Let’s hack! • Bonus: algebraic effects
12. November 2019 - 12 MUTABILITY What happens if I click follow and immediately switch profile page? Hint: this is mutable
13. November 2019 - 13 CLOSURES props are immutable!
14. November 2019 - 14 BUNDLE SIZE Functions minify better than classes • Function: 331 !-> 142 bytes • Class: 455 !-> 325 bytes (output from try.terser.org)
15. November 2019 - 15 BUNDLE SIZE WITH A LARGER CODEBASE
16. November 2019 - 16 PERFORMANCE 1. Function allocation still happens in class components 2. No constructor invocation, no class instances needed 3. Flatter component hierarchies (more on this in a while…)
17. November 2019 - 17 (BEHAVIOUR) COMPOSITION We often need to reuse business logic, not only view structure…
18. November 2019 - 18 (BEHAVIOUR) COMPOSITION …until it's not even about the view anymore
19. November 2019 - 19 FLATTER HIERARCHIES Composing without nesting helps keep the component tree clean
20. November 2019 - 20 THE IMPEDANCE MISMATCH “One might say Databases are from Mars and Objects are from Venus. Databases do not map naturally to object models.” Phil Haack
21. November 2019 - 21 React classes give us declarative render. A React element describes all its possible states at once… THE IMPEDANCE MISMATCH
22. November 2019 - 22 …but side effects are bound to lifecycles! • It feels imperative • Easy to forget cleanup THE IMPEDANCE MISMATCH
23. November 2019 - 23 We don't think in lifecycles anymore We think of staying in sync with changes THE IMPEDANCE MISMATCH
24. November 2019 - 24 With hooks, related logic is colocated THE IMPEDANCE MISMATCH
25. November 2019 - RULES OF HOOKS 25 November 2019 -
26. November 2019 - 26 RULES OF HOOKS • Only call Hooks at the top level Don’t call Hooks inside loops, conditions, or nested functions. • Only call Hooks from React functions Don’t call Hooks from regular JavaScript functions
27. November 2019 - REACT FIBERS 101 27 November 2019 -
28. November 2019 - 28 App Counter … button span REACT FIBERS 101 - ELEMENTS • Returned from render • Immutable at every rerender this tree gets rebuilt
29. November 2019 - 29 REACT FIBERS 101 - RECONCILIATION App Counter … button span App Fiber Counter Fiber button Fiber span Fiber … reconciliation
30. November 2019 - 30 REACT FIBERS 101 - FIBERS • One fiber for each component • Mutable created once, updated at each reconciliation • Keep track of state and effects App Fiber Counter Fiber button Fiber span Fiber …
31. November 2019 - 31 A FIBER TRACKS STATE AND EFFECTS Fiber State queue Effects queue useState useState useEffect
32. November 2019 - 32 LET’S HACK Play a little with state and effects 32 November 2019 -
33. November 2019 - 33 RULES OF HOOKS • Only call Hooks at the top level Don’t call Hooks inside loops, conditions, or nested functions. • Only call Hooks from React functions Don’t call Hooks from regular JavaScript functions
34. November 2019 - 34 ALGEBRAIC EFFECTS 32 November 2019 -
35. November 2019 - 35 BONUS: ALGEBRAIC EFFECTS “Hooks rely on global mutable state. This is an implementation detail. They wouldn’t have to rely on mutation in a language that supports algebraic effects. (…) JS doesn’t have that.”
36. November 2019 - 36 What happens to the control flow when we try…catch ? THE MAGIC WORD: EXCEPTIONS
37. November 2019 - 37 THE MAGIC WORD: EXCEPTIONS makeFriends getName <main> <main>
38. November 2019 - 38 EXCEPTIONS • The call stack is discarded • We can handle the exception, but we can’t resume execution
39. November 2019 - 39 RESUMABLE EXCEPTIONS What if there was a way to handle the exception and then resume? We can perform an effect… (Disclaimer: this syntax was made up by Dan)
40. November 2019 - 40 RESUMABLE EXCEPTIONS …which can be handled higher in the call stack… (Disclaimer: this syntax was made up by Dan)
41. November 2019 - 41 RESUMABLE EXCEPTIONS …and resume from where we left off (Disclaimer: this syntax was made up by Dan)
42. November 2019 - 42 A GIRL HAS NO NAME, AN EFFECT HAS NO COLOR 1. async effects require no changes to the rest of the code: they do not color the function 2. getName does not need to know how the effect is handled
43. November 2019 - 43 PUTTING THE PIECES TOGETHER How are hooks and algebraic effects related?
44. November 2019 - 44 PUTTING THE PIECES TOGETHER Actually, very loosely! We can think of hooks as effects (useState !-> perform ‘state’)
45. November 2019 - 45 PUTTING THE PIECES TOGETHER The idea of resumable control flow is more related to the upcoming concurrent mode…
46. November 2019 - 46 PUTTING THE PIECES TOGETHER The idea of resumable control flow is more related to the upcoming concurrent mode… …but that’s another talk :)
47. November 2019 - 47 RECAP Thanks!
48. November 2019 - 48 REFERENCES • React Hooks docs • Algebraic Effects for the rest of us • The how and why on react usage of linked lists in fiber • Inside fiber - in depth overview of the new reconciliation algorithm • Algebraic effects in JS: continuations and control transfer • Deep dive: how do React hooks really work? • Under the hood of React's hook system • Making setInterval declarative with React hooks