두 단어를 들어본 적 있는 수준인지, render의 _순수 계산_과 commit의 _동기 반영_을 동시성 맥락까지 연결해 설명하는 사람인지를 가른다.
render phase는 state/props 변화를 받아 다음 UI를 _계산_하는 단계로, 컴포넌트 함수를 실행해 새 virtual tree를 만든다. 동시성 모드에서는 이 단계가 _중단·재실행_될 수 있어 부수 효과를 넣으면 안 된다. commit phase는 계산 결과를 실제 DOM에 반영하고 useLayoutEffect 동기 실행, 이어서 useEffect 비동기 실행으로 이어지는 _동기 반영 구간_이다. 이 분리가 React 18 동시성 처리, 우선순위 기반 업데이트의 기반이 된다.
render 본문에서 호출되던 fetch를 useEffect로 옮겨 무한 루프를 끊은 적이 있다면 두 단계 분리 이야기로 자연스럽게 이어진다
useLayoutEffect로 측정-보정을 한 프레임 안에 끝내본 적이 있다면 commit 단계 동기 실행 이유를 그대로 답변 후크로 쓸 수 있다
Profiler에서 render와 commit 비용을 따로 들여다본 경험이 있다면 어느 쪽이 진짜 병목이었는지로 말할 수 있다
아직 공개된 답변이 없어요. 첫 공개 답변을 남겨보세요.