react-dom의 flushSync

개념

flushSync 는 react-dom에서 지원하는 함수다. 이 함수는 React 업데이트를 동기적으로 처리하여 즉시 렌더링하도록 강제한다.

일반적으로 react의 state는 비동기적으로 처리된다. 비동기로 처리된다는 것은 개발자 의도대로 코드가 작동하지 않는 경우가 있다는 뜻이다. 예제로 살펴보면,

const [num, setNum] = useState<number>(0);

const fuc = () => {
    setNum(1);
    console.log(num);
}

해당 fun 함수에서는 useState의 setter로 num state를 변경하고, 변경된 state를 출력하려고 한다. 콘솔에 출력되는 값은 1이라고 생각될 수 있지만, 안타깝게도 출력되는 값은 0이다. 이는 state의 setter 함수가 비동기적으로 작동하기 때문이다.

이는 React가 setState들의 호출을 후순위로 미루고, 마지막에 한번에 처리한다. 이는 중복된 렌더링을 방지하고 최적화된 성능을 끌어내기 위함이다.

물론 개발을 진행할 때, 동기적인 처리가 이루어지게끔 해야할 경우도 있을 것이다. 이럴 때 사용 가능한것이 flushSync()함수이다.

import { flushSync } from 'react-dom';

.
.
.

const [num, setNum] = useState<number>(0);

const fuc = () => {
   	flushSync(() => {
    	setNum(1);
    );
      
    console.log(num);				// 1이 출력
}

useState의 setState가 어떤 함수 내부에서 2개 이상 실행될 경우, react 컴포넌트의 업데이트는 일괄적으로 한번에 모두 처리한다. 따라서 UI 업데이트는 한번만 처리한다. 하지만 경우에 따라서, 일괄처리 말고 하나씩 업데이트 하게 해주는 방법도 있다. 바로 flushSync() 안에 콜백함수로 setState를 넣어주면 된다.

이 메서드를 사용하면 React는 현재 큐에 있는 업데이트를 즉시 처리하고, 해당 업데이트가 완료될 때까지 다음 코드 실행을 차단한다. 이는 React의 내부 스케줄링을 우회하는 것으로, 주로 사용자 상호작용에 반응하여 빠르게 UI를 갱신해야 하는 경우에 유용하다.

하지만, 이러한 메서드는 주의해서 사용해야 한다. 이를 남용하면 성능 문제가 발생할 수 있기에 사용 시점과 상황을 신중하게 고려해야 한다. 또한 대부분의 경우 React가 제공하는 일반적인 업데이트 메커니즘으로 충분히 처리될 수 있기 때문에 flushSync()를 사용할 필요가 없는 경우도 많다. 위의 예제도 flushSync()가 아닌 useEffect()를 활용하면 충분히 작동한다. 따라서 특별한 경우가 아니라면 사용하지 않는 것을 추천한다.