1. React 15 이전 (Stack Reconciler)

1. 업데이트 발생

   • setState, props 변화, 이벤트 등으로 "화면 리렌더링" 트리거

2. (스케쥴링)

   • 별도의 정교의 스케쥴링 없음

   • 들어온 업데이트는 바로 처리

3. Render Phase (Stack Reconciler)

   • 재귀 호출로 컴포넌트 트리를 끝까지 한 번에 탐색

   • 어떤 DOM의 변경이 필요한지 계산

   • 중단 불가 > 작업이 길면 브라우저가 멈춘 듯 보임

4. Commit Phase

   • 계산된 변경 사항을 DOM에 실제로 반영

   • 빠르게 끝내지만 Render와 사실상 이어져 있어서 구분이 모호

5. Effects 실행

   • 클래스 컴포넌트 라이프사이클 실행

>> 단순하지만 무조건 동기적 > 긴 렌더링 시 "프리즈 현상" 발생

2. React 16 이후 (Fiber Reconciler)

1. 업데이트 발생

   • setState, props 변화, 이벤트 등으로 "화면 리렌더링" 트리거

2. 스케쥴링

   • Fiber가 각 업데이트에 우선순위(lanes) 부여

   • 사용자 입력과 같은 급한 작업은 먼저, 덜 급한 작업은 뒤로

3. Render Phase (Fiber Reconciler)

   • 컴포넌트를 Fiber 단위(작업 단위)로 쪼개 탐색

   • 변경 사항을 계산하지만, 중단/재개 가능

   • 브라우저가 프레임 그릴 기회를 먼저 가질 수 있음 > 반응성 개선

4. Commit Phase

   • 계산된 변경 사항을 DOM에 실제로 반영

   • 짧고 원자적(atomic)으로 실행 (중간에 멈추지 않음 - 변경이 한 번에 전부 적용)

5. Effects 실행

   • useLayoutEffect(동기), useEffect(비동기) 실행

   • 클래스 컴포넌트라면 기존 라이프사이클도 여기서 실행

>> Render와 Commit을 분리, 작업 중단/재개 + 우선순위 → 끊김 없는 렌더링 가능