recursively • Diff and Patch are the same time during traversing ReactElement tree • Process synchronously • Create a public instance and an internal instance
lifecycle is mounting ʙ unmounting • Stack traverses a React Component tree through the internal instance • ReactInstanceMap.set(publicInstance, internalInstance);
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
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)
{ 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
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
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
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
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
Placeholder If Promise has not yet been resolved -> Suspend has been resolved -> Resume the rendering had not resolved -> Display Fallback Component Fallback
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.