React 공식문서 -flushSync

- flushSync : 강제로 제공된 콜백 내부의 모든 업데이트를 동기적으로 flush(강제로 비워냄)하도록 하고 DOM이 즉시 업데이트 된다.

- flushSync는 자주 사용되지 않으며 앱 성능을 저하시킬 수 있습니다.

- flushSync를 호출하면 React가 보류 중이던 작업을 강제로 flsuh하고 DOM을 동기적으로 업데이트 한다.

import { flushSync } from 'react-dom';

flushSync(() => {
  setSomething(123);
});

- flushSync는 매개변수로 전달받는 콜백함수를 즉시 호출하고 여기에 포함된 모든 업데이트를 동기적으로 flush한다.

- 보류 중인 모든 업데이트, Effect 또는 Effect 내부의 업데이트를 flush할 수도 있다.

- flushSync를 사용하면 React가 콜백 내부의 모든 state 업데이트를 강제로 동기적으로 flush하도록 할 수 있다.

- 위 예제의 경우 React는 다음 코드 줄이 실행될 때 이미 DOM을 업데이트한 상태가 된다.

- 앱이 React API만을 사용하고 서드파티 라이브러리와 통합하지 않는 경우 flushSync는 필요하지 않을 것이다.
- 대신 브라우저 API와 같은 서드파티 코드와 함께 사용될 때는 유용할 수 있다.

 

- 일부 브라우저 API는 콜백이 끝날 때까지 콜백 내부의 결과가 DOM에 동기적으로 기록되어 브라우저가 렌더링된 DOM으로 무언가를 할 수 있기를 예상하는데, 이 경우 React는 대부분 자동으로 처리하지만 어떤 경우에는 동기식 업데이트를 강제해야 할 수도 있다.

import { useState, useEffect } from 'react';
import { flushSync } from 'react-dom';

export default function PrintApp() {
  const [isPrinting, setIsPrinting] = useState(false);
  
  useEffect(() => {
    function handleBeforePrint() {
      flushSync(() => {
        setIsPrinting(true);
      })
    }
    
    function handleAfterPrint() {
      setIsPrinting(false);
    }

    window.addEventListener('beforeprint', handleBeforePrint);
    window.addEventListener('afterprint', handleAfterPrint);
    return () => {
      window.removeEventListener('beforeprint', handleBeforePrint);
      window.removeEventListener('afterprint', handleAfterPrint);
    }
  }, []);
  
  return (
    <>
      <h1>isPrinting: {isPrinting ? 'yes' : 'no'}</h1>
      <button onClick={() => window.print()}>
        Print
      </button>
    </>
  );
}

- 위의 예시에서 onbeforeprint 브라우저 API를 사용하여 인쇄 미리보기 페이지를 발생시킬 수 있다.

- 만약 flushSync를 사용하지 않는다면, 미리 보기 페이지에서 isPrinting은 "no"로 표시되겠지만, flushSync를 사용하여 isPrinting state 및 DOM을 동기적으로 업데이트 하였기 때문에, 미리 보기 페이지에서는 "yes"로 표시된다.

---

* 참고 : React 공식문서(https://react-ko.dev/learn)