Algorithms in React

Transcript

1. "MHPSJUINT
   JO
   3FBDU !LPCB
   CVJMEFSTDPO
   4FQ
   
   

2. LPCB

3. We Are Hiring!!

4. 8IBU
   *
   UBML
   BCPVU • Why does React replace its implementation from Stack

   to Fiber? • The concept of Fiber • How to solve the problems • Algorithms that Fiber uses

5. 8IBU
   JT
   3FBDU

6. https://reactjs.org

7. const LikeApp = props => <main> <Heading>Like App!</Heading> <p>{props.likeCount}</p>
 <button

   onClick={props.like}>like</button> </main>; let likeCount = 0; const update = () => ++likeCount; const render = () => ReactDOM.render( <LikeApp likeCount={likeCount} like={() => update() && render()} />, document.getElementById(‘app’) ); render(); ←only update the UI ←render the whole App

8. -FUnT
   EJWF
   JOUP
   3FBDU
   JOUFSOBMT

9. None

10. "SDIJUFDUVSF
    PG
    3FBDU

11. "SDIJUFDUVSF
    PG
    3FBDU <div /> <App /> <View /> <Text /> Stack

    Fiber DOM(Stack) Native(Stack) Canvas etc Component Reconciler Renderer HTMLElement SVGElement UIView Host CanvasElement Native(Fiber) DOM(Fiber) Fiber(Wasm?)

12. 4UBDL
    3FDPODJMFS

13. 4UBDL
    3FDPODJMFS • ʙv15 • Traverse and process a ReactElement tree

    recursively • Diff and Patch are the same time during traversing ReactElement tree • Process synchronously • Create a public instance and an internal instance

14. 3FBDU&MFNFOU • ReactElement is an object represents the corresponding DOM

    • Recreate each calling the render function • Lightweight • No state

15. 1VCMJD
    *OTUBODF • An instance of Composite Component that you create

    with React.Component • The lifecycle is mounting ʙ unmounting

16. *OUFSOBM
    *OTUBODF • An instance that React uses internally • The

    lifecycle is mounting ʙ unmounting • Stack traverses a React Component tree through the internal instance • ReactInstanceMap.set(publicInstance, internalInstance);

17. 3FBDU*OTUBODF.BQ var ReactInstanceMap = { remove: function(key) { key._reactInternalInstance =

    undefined; }, get: function(key) { return key._reactInternalInstance; }, has: function(key) { return key._reactInternalInstance !== undefined; }, set: function(key, value) { key._reactInternalInstance = value; }, }; /15-stable/src/renderers/shared/shared/ReactInstanceMap.js

18. ReactElement InternalInstance ReactElement ReactElement PublicInstance Mount Unmount

19. Reconciler.mountComponent InternalInstance.mountComponent Reconciler.mountComponent InternalInstance.mountComponent Reconciler.mountComponent InternalInstance.mountComponent … child child child

    recursive
20. None

21. 8IBU
    JT
    UIF
    QSPCMFN

22. 5IF
    QSPCMFNT
    PG
    4UBDL • Stack must process a ReactElement tree synchronously because

    it traverse the tree with recursive calls • It leads blocking the UI thread with a big ReactElement tree • It takes time to traverse the tree even though you have only small updates • In order to avoid that, you have to implement shouldComponentUpdate in your components

23. Sync

24. 'JCFS
    3FDPODJMFS

25. 'JCFS
    3FDPODJMFS • Traverse and process a ReactElement tree through Fiber

    objects • Render Phase and Commit Phase • Fiber can suspend and resume in its Render Phase

26. 'JCFS • Fiber is an unit of work • A

    ReactElement tree becomes A Linked list of Fibers • Fiber is a fixed data structure, which can share the same hidden class • A Fiber has an alternate Fiber • Double Buffer (workInProgress <-> current)

27. https://en.wikipedia.org/wiki/Fiber_(computer_science)

28. type Fiber = {| tag: WorkTag, type: any, stateNode: any,

    return: Fiber | null, child: Fiber | null, sibling: Fiber | null, pendingProps: any, memoizedProps: any, memoizedState: any, updateQueue: UpdateQueue<any> | null, mode: TypeOfMode, effectTag: TypeOfSideEffect, nextEffect: Fiber | null, expirationTime: ExpirationTime, alternate: Fiber | null, : |} /packages/react-reconciler/src/ReactFiber.js

29. -JOLFE
    -JTU • A ReactElement tree becomes A Linked list of

    Fibers • Fiber processes sequentially, doesn’t need random access • Search … O(n) • Insert/Delete … O(1)

30. https://en.wikipedia.org/wiki/Linked_list

31. <App> <UserList> <User name=“koba01” /> <User name=“koba02” /> </UserList> </App>

    HostRoot App child parent UserList child parent User child parent User sibling koba01 koba02 child parent parent child parent

32. child parent child parent Insert child parent Delete child child

    parent parent

33. let root = fiber; let node = fiber; while (true)

    { if (node.child && !hasProcessed(node.child)) { node = node.child; continue; } if (node === root) { return; } while (!node.sibling) { if (!node.parent) { return; } node = node.parent;
 } node = node.sibling; } Search the children Reach the root Return to the root Reach the root Search the siblings

34. HostRoot App UserList User User koba01 koba02 child child child

    parent sibling child parent parent parent child parent

35. )PX
    UP
    BDIJFWF
    BTZODISPOPVT
    SFOEFSJOH

36. %PVCMF
    #VGGFS HostRoot App child parent section child parent … alternate

    HostRoot App child parent section child parent … Current Work in Progress alternate alternate alternate

37. %PVCMF
    #VGGFS HostRoot App child parent section child parent … alternate

    HostRoot App child parent section child parent … (Work In Progress) Current alternate alternate alternate Commit!

38. https://www.gameprogrammingpatterns.com/double-buffer.html

39. 3FOEFS
    1IBTF
    BOE
    $PNNJU
    1IBTF

40. FiberA FiberB FiberC FiberD FiberE IdleTime IdleTime IdleTime Render Phase

    (Async) Commit Phase (Sync) SideEffect SideEffect SideEffect Commit SideEffects

41. 3FOEFS
    1IBTF $PNNJU
    1IBTF • Prepare for updating • Render Phase can

    be async • Extract Side Effects • No Side Effects • Interruptible • Apply Side Effects that affect to the Host • Commit Phase must be sync • Call some lifecycle methods • Consistency

42. let nextUnitOfWork = findNextUnitOfWork(); const workLoop = () => {

    while (nextUnitOfWork !== null) { const workInProgress = nextUnitOfWork; nextUnitOfWork = beginWork(workInProgress); if (nextUnitOfWork === null) { nextUnitOfWork = completeWork(workInProgress); ɹɹ } if (!hasRemainingTime()) {
 scheduleUpdate(workLoop); return; } } commitWork(); }

43. HostRoot App child parent UserList child parent User child parent

    User sibling koba01 koba02 child parent parent child parent beginWork completeWork

44. Async

45. 8IBU
    JT
    UIF
    4JEF
    &GGFDU

46. 4JEF
    &GGFDU • Side Effect is set to Fiber at Render

    Phase • Side Effect is processed at Commit Phase • Because it must process at the right time • Fiber has nextEffect property as the pointer to apply Side Effects by the right order

47. export const NoEffect = 0b00000000000; export const PerformedWork = 0b00000000001;

    export const Placement = 0b00000000010; export const Update = 0b00000000100; export const PlacementAndUpdate = 0b00000000110; export const Deletion = 0b00000001000; export const ContentReset = 0b00000010000; export const Callback = 0b00000100000; export const DidCapture = 0b00001000000; export const Ref = 0b00010000000; export const Snapshot = 0b00100000000; export const Incomplete = 0b01000000000; export const ShouldCapture = 0b10000000000; /packages/shared/ReactSideEffectTags.js

48. <App> <UserList> <User name=“koba01” /> <User name=“koba02” /> </UserList> </App>

    HostRoot App UserList User User koba01 koba04 <App> <UserList> <User name=“koba01” /> <User name=“koba04” /> </UserList> </App> nextEffect nextEffect nextEffect firstEffect PureComponent

49. )PX
    UP
    NBOBHF
    NVMUJQMF
    VQEBUFT
    

50. 6QEBUF
    2VFVF • Update Queue is a Linked list • Update

    Queue is stored in a Fiber that invoke the update • Double Buffering to interrupt the other updates • workInProgress 㲗 current • You can imagine Git rebase as a metaphor

51. type Update<State> = { expirationTime: ExpirationTime, tag: 0 | 1

    | 2 | 3, payload: any, callback: (() => mixed) | null, next: Update<State> | null, nextEffect: Update<State> | null, }; type UpdateQueue<State> = { baseState: State, firstUpdate: Update<State> | null, lastUpdate: Update<State> | null, firstEffect: Update<State> | null, lastEffect: Update<State> | null, : } /packages/react-reconciler/src/ReactUpdateQueue.js

52. if (queue.lastUpdate === null) {
 queue.firstUpdate = queue.lastUpdate = update;

    } else { queue.lastUpdate.next = update; queue.lastUpdate = update; } Append a update to the Update Queue /packages/react-reconciler/src/ReactUpdateQueue.js

53. class App extends React.Component { constructor(props) { this.state = {

    count: 1 } } render() { return ( <section> <p>{this.state.count}</p> <button onClick={() => this.setState(state => ({ count: state.count + 1}))} > ++ </button> </section> ); } }

54. HostRoot App child parent section child parent … alternate HostRoot

    App child parent section child parent … alternate alternate alternate Update Queue Update Queue

55. A Current Queue WorkInProgress Queue B C D C D

    Commit A Current Queue WorkInProgress Queue B C D C D

56. A Current Queue WorkInProgress Queue B C D C D

    Abort Current Queue WorkInProgress Queue A B C D A B C D

57. A(High) Update Queue 1st Update B(Low) C(High) D(Low) A(High) C(High)

    2nd Update B(Low) C(High) D(Low) A(High) Rebase baseState

58. this.setState({ count: this.state.count + 1 }); this.setState(state => ({ count:

    state.count + 1 }));

59. )PX
    UP
    QSJPSJUJ[F
    UIF
    VQEBUFT

60. &YQJSBUJPO
    5JNF • React had used priority levels to prioritize the

    updates • The approach of priority levels has a Starvation Problem • In order to solve this, React uses Expiration Time • If an expiration time has come, the update processes synchronously

61. https://en.wikipedia.org/wiki/Starvation_(computer_science)

62. export type PriorityLevel = 0 | 1 | 2 |

    3 | 4 | 5; module.exports = { NoWork: 0, SynchronousPriority: 1, AnimationPriority: 2, HighPriority: 3, LowPriority: 4, OffscreenPriority: 5, }; /15-stable/src/renderers/shared/fiber/ReactPriorityLevel.js

63. export const NoWork = 0; export const Sync = 1;

    export const Never = MAX_SIGNED_31_BIT_INT; const UNIT_SIZE = 10; const MAGIC_NUMBER_OFFSET = 2; function ceiling(num: number, precision: number): number { return (((num / precision) | 0) + 1) * precision; } function computeExpirationBucket(currentTime, expirationInMs, bucketSizeMs): ExpirationTime { return ( MAGIC_NUMBER_OFFSET + ceiling( currentTime - MAGIC_NUMBER_OFFSET + expirationInMs / UNIT_SIZE, bucketSizeMs / UNIT_SIZE, ) ); } export const LOW_PRIORITY_EXPIRATION = 5000; export const LOW_PRIORITY_BATCH_SIZE = 250; export const HIGH_PRIORITY_EXPIRATION = __DEV__ ? 500 : 150; export const HIGH_PRIORITY_BATCH_SIZE = 100 /packages/react-reconciler/src/ReactFiberExpirationTime.js

64. 100 90 120 50 100 90 120 100 120 1

    Sync 1st 2nd 3rd

65. *OUFSBDUJWF&WFOU5ZQF • React treats some event types as interactive events

    • Updates in interactive events are prioritized as High Priorities • Interactive Events … • blur, click, dragStart, drop, focus, input, keyDown, mouseDown, play, pause, submit, touchStart… • /packages/react-dom/src/events/SimpleEventPlugin.js

66. <input type=“text” value={inputText} onChange={({ target: { value } }) =>

    { this.setState({ inputText: value }); // High Priority requestAnimationFrame(() => { this.setState({ filterValue: value }); // Low Priority }); }} />

67. %FNP https://github.com/koba04/react-timeslicing-demo

68. #JUXJTF
    0QFSBUPST

69. #JUXJTF
    0QFSBUPST • Fiber uses Bitwise operations in many places internally

    • Mode • Effect • Context API - ObservedBits • (Simple Cache Provider - CalculateChangedBits)

70. export const PerformedWork = 0b00000000001; export const Placement = 0b00000000010;

    export const Update = 0b00000000100; export const PlacementAndUpdate = 0b00000000110; export const Deletion = 0b00000001000; export const ContentReset = 0b00000010000; export const Callback = 0b00000100000; export const DidCapture = 0b00001000000; export const Ref = 0b00010000000; export const Snapshot = 0b00100000000; export const LifecycleEffectMask = 0b00110100100; export const HostEffectMask = 0b00111111111; /packages/shared/ReactSideEffectTags.js

71. // Render Phase (/packages/react-reconciler/src/ReactFiberCompleteWork.js) next.effectTag &= HostEffectMask; sourceFiber.effectTag &= ~LifecycleEffectMask;

    function markUpdate(workInProgress: Fiber) { workInPregress.effectTag |= Update; } // CommitPhase (/packages/react-reconciler/src/ReactFiberCommitWork.js) if (finishedWork.effectTag & Update) { if (current === null) { : instance.componentDidMount(); } else { : } }

72. // Mode export const NoContext = 0b000; export const AsyncMode

    = 0b001; export const StrictMode = 0b010; export const ProfileMode = 0b100; if (workInProgress.mode & StrictMode) { // do something } const pingTime = (workInProgress.mode & AsyncMode) === NoEffect ? Sync : renderExpirationTime; /packages/react-reconciler/src/ReactTypeOfMode.js

73. const observedBits = { foo: 0b01, bar: 0b10 }; const

    { Consumer } = React.createContext(store, (prev, next) => { let result = 0; if (prev.foo !== next.foo) result |= observedBits.foo; if (prev.bar !== next.bar) result |= observedBits.bar; return result; }); const Foo = () => <Consumer unstable_observedBits={observedBits.foo}> {({foo}) => …} </Consumer> const Bar = () => <Consumer unstable_observedBits={observedBits.bar}> {({bar}) => …} </Consumer>

74. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Examples

75. 4VTQFOTF

76. )PX
    UP
    NBOBHF
    BTZOD
    EFQFOEFODJFT

77. &SSPS
    #PVOEBSJFT HostRoot App UserList User Text Throw Error!!! ErrorPage Error

    Error componentDidCatch

78. 4VTQFOTF HostRoot App UserList User Text Throw Promise!!! Promise React.

    Placeholder If Promise has not yet been resolved -> Suspend has been resolved -> Resume the rendering had not resolved -> Display Fallback Component Fallback

79. const App = () => ( <React.Placeholder delayMs={1000} fallback={<Loading />}>

    <EntrySection /> </React.Placeholder> ); const EntrySection = () => <Entry />; const Entry = () => { // throw Promise if a cache doesn’t have an entry data const entry = fetchEntryWithCache(); return <p>{entry.data}</p>; };

80. How to handle tryʙcatch in async reconciliation?

81. 4VTQFOTF HostRoot App UserList User Text Throw Promise!!! React. Placeholder

    Fallback parent parent Fiber can trace the component stack through the Linked List structures

82. %FNP https://github.com/koba04/react-suspense-demo

83. 4VTQFOTF • Suspense can suspend a rendering by throwing a

    Promise • tryʙcatch can’t catch thrown objects in Async Rendering • Fiber can trace the component stack through Linked List • Still in development

84. 3FDBQ • React has replaced its implementation from Stack to

    Fiber to solve the problems. • Fiber makes async and flexible scheduling possible • Fiber uses many technics internally like LinkedList, Double Buffer, Expiration Time, Bitwise Operators etc.

85. 5IBOL
    ZPV TQFBLFSEFDLDPNLPCB