Basic Concept

• React components
• React elements
• Component Instances

React Components

Form

const App = () => {
  return (
    <div>App Component</div>
  );
}

• React Component: a function or a class that returns some react elements or a react element tree, typically using JSX, the javascript XML

Return value

{
  "$$typeof": Symbol(react.element),
  key: null,
  props: { children: "App component" },
  ref: null,
  type: "div"
}

Screen Shot 2022-08-11 at 8.51.01 PM.png

React Element

• Not only can react element describes a DOM node (HTML element), they can also describe a component instance.

Component Instance

• When react element describes a component, react keeps track of it and creates a component instance of it
• Each instance has a lifecycle and internal state

Reconciliation

• React creates a tree of elements and keeps it in the memory, called virtual DOM

Rendering

• Rendering is handled by packages called renders (ReactDOM, ReactNative, etc)

React Fiber

• React Fiber is a plain javascript object with some properties
• Fiber reconciler = current React reconciler based on fiber

it can

• split work into chunks and prioritize them

• pause work and come back later

• reuse work or abort it if it's not need

• Fiber represents a unit of work

  • render phase React processes those fibers (unit of work) and we end up with finished work
  • commit phase This work is later comitted resulting

Two Reconciler phases

Rander Phase

• this phase is asynchronous
• tasks can be prioritized, work can be paused, discarded and so on
• during this phase, internal functions like beginWork and completeWork are being called

Commit Phase

• the function commitWork is being called, this phase is synchronous and cannot be interrupted.

Fiber Properties

Fiber always has 1-1 relationship with something
* component instance, DOM node, etc.

• tag type of something, number can be from 0 to 24

export const FunctionComponent = 0;
export const ClassComponent = 1;
export const IndeterminateComponent = 2 // ?
export const HostRoot = 3; // the upmost root
export const HostComponent = 5; // an environment specified container, in web, like div, span
export const HostText = 6; // a text (maybe inner a span)
export const Fragment = 7; // a dom fragment <></>
export const Mode = 8; //?
export const ContextConsumer = 9; // a context consumer? rarely used
export const ContextProvider = 10; // context.Provider
export const ForwardRef = 11; // an element forwards ref?
export const Profiler = 12; // ?
export const SuspenseComponent = 13; // a Suspense ?
export const MemoComponent = 14; // component uses Rect.memo ?
export const SimpleMemoComponent = 15; // ?
export const LazyComponent = 16; // a component uses React.lazy ?
export const IncompleteClassComponent = 17; // ?
export const DehydratedFragment = 18; // a fragment used in dehydrate ?
export const SuspenseListComponent = 19; // ?
// no 20 ?
export const ScopeComponent = 21; // ?
export const OffscreenComponent = 22; // ?
export const LegacyHiddenComponent = 23; // ?
export const CacheComponent = 24; //?

• stateNode holds the reference to the thing it hold, through this property, react can reach the state
• child: its first child
• sibling: its next sibling
• return: its parent

fibers forms a tree

Screen Shot 2022-08-13 at 8.41.49 PM.png

• child, sibling and return are related to the fiber tree structure

Aren't Fiber really similar to react elements?

Partially true.

• Fibers are often created from react elements
• They even share some of the element properties like type and key
• DIFFER While React elements are re-created every time, Fibers are being reused as often as possible.
• Most of the fibers are created during initial mount

We could find createFiberFromElement, createFiberFromFragment, createFiberFromText

What's a work

• state change -> work

• lifecycle function -> work

• changes in the DOM -> work

• work can be handled directly or scheduled for the future

• use a feature called time slicing, work can be split into chunks

• high priority work like animation can be scheduled in such a way they are handled ASAP

• low priority work like network requests can be delayed

• requestAnimationFrame, schedules a high priority function

• requestIdleCallback schedules a low priority function

Fiber Tree

There are actual two fiber trees, current tree is what displayed on screen, react won't change on that tree, instead, it change in workInProgress tree, after the changes are done, it will be swapped with current tree.
Gaming tech encounters similar questions that some in the screen isn't consistent with the others, they use a tech called double buffering, they wrote to a separate invisible buffer and when completed, they just swapped the buffers. React uses the same thing with the fiber trees during the commit phase.

Screen Shot 2022-08-15 at 8.28.17 AM.png

Swapping trees is not enough

• React works asynchronously during the render phase
• Work has to be done during the commit phase as well
  • What type of work? lifecycle methods / DOM Changes
• The result of the render phase is not only a tree of fibers, but also a list of effects.

What is an effect?

• mutating the DOM / calling specific lifecycle methods.
• they cannot be executed during render phase
• effect is also a kind of work, and heavily depends on fiber
• HostComponent(div) -> updating the DOM
• ClassComponent -> calling lifecycle methods
• Lifecycle methods like render and shouldComponentUpdate are part of the render phase
• Effects are tracked using properties like firstEffect, lastEffect, nextEffect, etc.

How are Effects applied

• During the commit phase, React goes through all Effects and applies them to component instances.
• This results in changes visible to the user
• React does all of that in a single pass

Fibers = units of work processed by functions like beginWork() and completeWork()

• React steps into a fiber by calling beginWork() and keeps stepping in until it reaches a Fiber without children.
• React then completes that Fiber by calling completeWork()
• beginWork() = going downwards
• completeWork() = going upwards

How react processes a fiber tree

tree processing

• All this isn't recursive and done using a while loop (Work Loop), and is possible only because of the tree architecture using one child, one sibling and one return

alternate

• points to the Fiber on the other end of the pair

React Fiber Usase

• Error boundaries
  • act like catch blocks of components and they come in the form of two form of methods
    • getDerivedStateFromError()
    • componentDidCatch()
• Suspense and Concurrent Mode

Background Tasks API

https://developer.mozilla.org/en-US/docs/Web/API/Background_Tasks_API

The Cooperative Scheduling of Background Tasks API (also referred to as the Background Tasks API or the requestIdleCallback() API) provides the ability to queue tasks to be executed automatically by the user agent when it determines that there is free time to do so.

• Use idle callbacks for tasks which don't have high priority.
• Idle callbacks should do their best not to overrun the time allotted.
• Avoid making changes to the DOM within your idle callback. If your callback needs to change the DOM, it should use Window.requestAnimationFrame() to schedule that.
• Avoid tasks whose run time can't be predicted. Should avoid resolving or rejecting Promises.
• Use timeouts when you need to, but only when you need.