Fiber
In Depth
Concurrent
Time-slicing
Suspense
Non-blocking render
Pre-render in background
Coordinate updates at different priorities
Async Component
Pause render without blocking siblings
Reduce junk component state
(In Future)
Non-blocking render
16ms
Non-Blocking WALL
Coordinate Updates
NoWork: 0
SynchronousPriority: 1
TaskPriority: 2
AnimationPriority: 3
HighPriority: 4
LowPriority: 5
OffscreenPriority: 6
requestIdleCallback
requestAnimationFrame
}
}
Input
Last task cursor
General
Fetch Data
not in screen (by position or zIndex)
Async Component
import { Suspense, lazy } from 'react';
import Loading from './Loading';
const AsyncComponent = lazy(() => import('./AsyncComponent'));
function Container() {
return (
<Suspense fallback={<Loading />}>
<AsyncComponent />
</Suspense>
);
}Async Component - 2
import { Suspense, lazy } from 'react';
import { Switch, Route } from 'react-router';
import Loading from './Loading';
const Page1 = lazy(() => import('./Page1'));
const Page2 = lazy(() => import('./Page2'));
function Container() {
return (
<Suspense fallback={<Loading />}>
<Switch>
<Route path="/page1" component={Page1} />
<Route path="/page2" component={Page2} />
</Switch>
</Suspense>
);
}Render in fiber
Render / Reconciliation
Commit
interruptible
not interruptible
Render in fiber - 2
Render in fiber - 3
current
work in progress
current
(new)
commit
Render in fiber - 4
Effect List
fiber node
{
stateNode: new Component, // instance of component
type: Component, // reference of component class
alternate: null, // reference of WIP or current (base on state)
key: null, // Important Key!!!
updateQueue: null, // batch queue
memoizedState: {count: 0}, // now state (rendered on screen)
pendingProps: {}, // next props
memoizedProps: {}, // now props (rendered on screen)
tag: 1, // element type (Component / input ... for organize priority)
effectTag: 0, // type of DOM change (PLACEMENT / UPDAET / DELETION)
nextEffect: null // reference of next fiber node
}
fiber render
performUnitOfWork
beginWork
completeUnitOfWork
completeWork
iterator on WIP tree
create node / check children
execute complete work in time limit
generate instance
Fiber in depth
By Chia Yu Pai
