React-reconciler | HookEffectTags (19.0.0)

효율적이고 빠른 처리를 위해 2진수 기반 비트연산을 사용합니다.

react/packages/react-reconciler/src/ReactHookEffectTags.js

export type HookFlags = number;
 
export const NoFlags = /*   */ 0b0000; // 0
 
// Represents whether effect should fire.
export const HasEffect = /* */ 0b0001; // 1
 
// Represents the phase in which the effect (not the clean-up) fires.
export const Insertion = /* */ 0b0010; // 2
export const Layout = /*    */ 0b0100; // 4
export const Passive = /*   */ 0b1000; // 8

`NoFlags`

Flag가 없음을 나타내지만 실제로 사용되지 않습니다.

`HasEffect`

useInsertionEffect, useLayoutEffect, useEffect 중 1개를 실행시켜야 함을 비트 연산자를 통해 나타냅니다.

commitHookPassiveMountEffects(
  finishedWork,
  HookPassive | HookHasEffect, // 9 (0001, 1000을 OR 비트연산)
);

`Insertion`

useInsertionEffect를 나타냅니다.
useLayoutEffect 실행 전 주로 Emotion, styled-components에서 스타일 태그를 삽입할 때 사용됩니다.

`Layout`

useLayoutEffect를 나타냅니다.
DOM에 반영되기 전 실행되는 로직입니다.

`Passive`

useEffect를 나타냅니다.
DOM에 반영된 후 실행되는 로직입니다.

Lane FiberFlags