Render and Commit Phases

• 공식문서 : https://beta.reactjs.org/learn/render-and-commit

• 렌더 동작 방식 : https://blog.isquaredsoftware.com/2020/05/blogged-answers-a-mostly-complete-guide-to-react-rendering-behavior/

• hook 라이프사이클 : https://wavez.github.io/react-hooks-lifecycle/

• class 라이프사이클 : https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

• Fiber metadata : https://www.youtube.com/watch?v=ZCuYPiUIONs

• Render Phase
• The "Render phase" contains all the work of rendering components and calculating changes

• Commit Phase
• The "Commit phase" is the process of applying those changes to the DOM

리렌더가 트리거되는 순간

• 부모가 리렌더되는 경우 모든 자식 컴포넌트들이 recursively하게 모두 리렌더됨.

• Function components:
• useState setters
• useReducer dispatches

• Class components:
• this.setState()
• this.forceUpdate()

• Other:
• Calling the ReactDOM top-level render(<App>) method again (which is equivalent to calling forceUpdate() on the root component)
• Updates triggered from the new useSyncExternalStore hook

Fiber metadata

If you've ever heard the phrase "React Fiber" used to describe a React version or feature, that's really referring to the rewrite of React's internals that switched the rendering logic to rely on these "Fiber" objects as the key data structure. That was released as React 16.0, so every version of React since then has used this approach.

export type Fiber = {
  // Tag identifying the type of fiber.
  tag: WorkTag;

  // Unique identifier of this child.
  key: null | string;

  // The resolved function/class/ associated with this fiber.
  type: any;

  // Singly Linked List Tree Structure.
  child: Fiber | null;
  sibling: Fiber | null;
  index: number;

  // Input is the data coming into this fiber (arguments/props)
  pendingProps: any;
  memoizedProps: any; // The props used to create the output.

  // A queue of state updates and callbacks.
  updateQueue: Array<State | StateUpdaters>;

  // The state used to create the output
  memoizedState: any;

  // Dependencies (contexts, events) for this fiber, if any
  dependencies: Dependencies | null;
};

• React 18에서의 Fiber : https://github.com/facebook/react/blob/v18.0.0/packages/react-reconciler/src/ReactInternalTypes.js#L64-L193