What the hell is Fiber and why should I care

React Fiber is an ongoing reimplementation of React's core algorithm. For more join the talk :)
Until then isfiberreadyyet.com.

Transcript

1. WHAT THE HELL IS FIBER AND WHY SHOULD I CARE? Fatos Hoti / @hotifatos
2. WHO AM I ➤ Fatos Hoti ➤ Pula, Croatia ➤ Berlin, Germany ➤ SW Engineer@Klara GmbH
4. WHAT THE HELL IS FIBER AND WHY SHOULD I CARE?
5. REACT V.16
6. NEW REACT RECONCILIATION ALGORITHM
7. A NEW VERSION OF REACT WHERE INTERNALLY EVERYTHING CHANGES, BUT THE API STILL REMAINS THE SAME
8. { stateNode, child, return, sibling, …rest }
9. WHAT THE HELL IS FIBER AND WHY SHOULD I CARE?
10. HOW DOES CURRENT RECONCILIATION WORK?
11. LET'S TAKE A STEP BACK ➤ No need to explain how to get from A to B, just tell me what is B ➤ “Virtual DOM” && “Diffing" ➤ v.14 -> react && react-dom ➤ react-native, react-vr, react-aframe, react-hardware… ➤ reconciler && renderer
14. HostRoot List 1 2 3 Button Wrapper HostRoot div div div div button div
17. Fiber splits work into units of work (tree/subtree chunks) computes the changes and schedules their execution
18. requestIdleCallback do the work when you have time requestAnimationFrame do the work before the next frame
19. phase1 - renderer/reconciler interruptable phase2 - commit non-interruptable
21. HostRoot List 1 2 3 Button child return sibling Initial render div div div
22. { stateNode, child, return, sibling, …rest }
23. WORK LOOP next unit of work time remaining
25. Next unit of work - List Time remaining > 0 HostRoot List 1 Button 2 3 HostRoot Current Work in Progress div div div
26. List has an update queue Time Remaining > 0 HostRoot List 1 Button 2 3 HostRoot Current Work in Progress List div div div
27. this.setState((state, props) => {}); render();
28. HostRoot List 1 Button 2 3 HostRoot 1 2 3 Current Work in Progress List Next unit of work - 1 Time remaining > 0 div div div div div div
29. Next unit of work - div Time remaining > 0 HostRoot List 1 Button 2 3 HostRoot 1 2 3 Current Work in Progress List div div div div div div
30. Next unit of work - 2 Time remaining > 0 HostRoot List 1 Button 2 3 HostRoot 1 2 3 Current Work in Progress List div div div div div div
31. 1 div
32. Next unit of work - 2 Time remaining > 0 HostRoot List 1 Button 2 3 HostRoot 1 2 3 Current Work in Progress List div div div div div div
33. Next unit of work - 3 Time remaining > 0 HostRoot List 1 Button 2 3 HostRoot 1 2 3 Current Work in Progress List div div div div div div
34. Next unit of work - div Time remaining > 0 HostRoot List 1 Button 2 3 HostRoot 1 2 3 Current Work in Progress List div div div div div div
35. div 1 div 3
36. div 1 div 3 List
37. HostRoot List 1 Button 2 3 HostRoot 1 2 3 Current Work in Progress List div div div div div div Button Next unit of work - Button Time remaining > 0
39. HostRoot List 1 Button 2 3 HostRoot 1 2 3 Current Pending Commit List div div div div div div Button
40. componentDidUpdate handleErrors div 1 div 3 List
41. HostRoot List 1 Button 2 3 HostRoot 1 2 3 Outdated Current List div div div div div div Button
43. Next unit of work - 2 Time remaining > 0 Someone pressed the “Super-hyper-turbo urgent update” HostRoot List 1 Button 2 3 HostRoot 1 2 3 Current Work in Progress List div div div div div div
44. Priorities Synchronous / stack reconciler Task / before next tick Animation / before next frame High / requestIdleCallback Low / requestIdleCallback Offscreen / requestIdleCallback
45. phase1 - renderer/reconciler componentWillMount, componentWillReceiveProps, shouldComponentUpdate, componentWillUpdate phase2 - commit componentDidMount, componentDidUpdate, componentWillUnmount
46. OH MY GOD, THIS IS SO COOL, I WANT TO KNOW MORE ➤ https://www.youtube.com/watch?v=aV1271hd9ew ➤ https://www.youtube.com/watch?v=ZCuYPiUIONs ➤ https://www.youtube.com/watch?v=_MAD4Oly9yg ➤ https://facebook.github.io/react/blog/2015/12/18/react- components-elements-and-instances.html ➤ https://facebook.github.io/react/contributing/ implementation-notes.html ➤ https://facebook.github.io/react/docs/reconciliation.html ➤ https://github.com/acdlite/react-fiber-architecture
47. yarn add react@next react-dom@next npm i react@next react-dom@next
49. GRAZIE 1K Fatos Hoti / @hotifatos https://joind.in/talk/b6223