Intro to fiber.

Fiber Notes:-

Why fiber (or anything new) ?

React team wanted to detach reconciler from renderer. Plug-n-play.

Present react reconciler works in a different ways.

JS is a single thread, so all things like API calls, computing Js, user actions have to be done by main thread.
Possible sol is service workers, though the DOM updation can only be done by Main thread.
React after render function call, it internally (used to) update the main thread synchronously, which could block the main thread for sometime. (This was the case with React stack).
Main goal is to give thread the ability to decide when it can pause diffing algorithm and do other stuff. ( when main thread is working with JS, i.e react).

For example:- We have some O(n^3) computation going on to parse the data and send it to server, now in the middle user clicks to start animation. With fiber we can set higher priority to animation and Main thread will take care of that.

Primary Goals:

Pause work and come back to it later. assign priority to different types of work. reuse previously completed work. abort work if it's no longer needed.

Types of priorities:

Synchronous.
Task.
Animations.
High.
Low.
OffScreen.

What is fiber?

Each fiber can be thought of as a virtual stack frame where information from the frame is preserved in memory on the heap, and because info is saved on the heap, you can control and play with the data structures and process the relevant information as needed.

{
stateNode: new HTMLSpanElement,
type: "span",
alternate: null,
key: "2",
updateQueue: null,
memoizedState: null,
pendingProps: {children: 0},
memoizedProps: {children: 0},
tag: 5,
effectTag: 0,
nextEffect: null
}

Fiber provides

Incremental Rendering (The ability to split rendering work into chunks and spread it out over multiple frames) :- React v16.0 includes a completely rewritten server renderer. It’s really fast. It supports streaming, so you can start sending bytes to the client faster
Handle errors in the render API : To make class component an error boundary we define a new lifecycle method called componentDidCatch(error, info).
Return multiple elements from render : With this new feature in React v16.0 now we can also return an array of elements, and string from component’s render method.
Portals : Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
Fragments : A common pattern in React is for a component to return multiple elements. Fragments let you group a list of children without adding extra nodes to the DOM.

Here’s a tweet from Andrew to show same https://twitter.com/acdlite/status/846456239693344769

https://codepen.io/seanclayton/full/BWOVVR/

Root of the fiber.

const domContainer = document.querySelector('#container');
ReactDOM.render(React.createElement(ClickCounter), domContainer);

Reference of DOM node.

const fiberRoot = query('#container')._reactRootContainer._internalRoot

React work tags

export const FunctionComponent = 0;
export const ClassComponent = 1;
export const IndeterminateComponent = 2; // Before we know whether it is function or class
export const HostRoot = 3; // Root of a host tree. Could be nested inside another node.
export const HostPortal = 4; // A subtree. Could be an entry point to a different renderer.
export const HostComponent = 5;
export const HostText = 6;
export const Fragment = 7;
export const Mode = 8;
export const ContextConsumer = 9;
export const ContextProvider = 10;
export const ForwardRef = 11;
export const Profiler = 12;
export const SuspenseComponent = 13;
export const MemoComponent = 14;
export const SimpleMemoComponent = 15;
export const LazyComponent = 16;
export const IncompleteClassComponent = 17;

SideEffect

React docs.

You’ve likely performed data fetching, subscriptions, or manually changing the DOM from React components before. We call these operations “side effects” (or “effects” for short) because they can affect other components and can’t be done during rendering.

React code to manage effect

Phases of reconciliation:

Render/reconciliation phase: process is interruptible, used to build the fibre tree, completely in memory changes, no effect on UI.

Commit phase:- where the output of previous phase will be shown to browser, uninterruptible.

Extra info:-

requestIdleCallback is a window method that provides a way to cooperate with the browser’s overall work schedule.

requestAnimationFrame schedules a high priority function to be called on the next animation frame.

Cooperative Scheduling -

React's own method .

In general .

LIFECYCLES:-

render phase

[UNSAFE_]componentWillMount (deprecated)
[UNSAFE_]componentWillReceiveProps (deprecated)
getDerivedStateFromProps
shouldComponentUpdate
[UNSAFE_]componentWillUpdate (deprecated)
render

commit phase.

getSnapshotBeforeUpdate
componentDidMount
componentDidUpdate
componentWillUnmount

React code link:

aditya-rb/fiberIntro.md