flushsync

April 28, 2023

들어가기 전

React 18에서 많은 상태를 업데이트 하여도 단 한번만 리렌더링 됨

console.log("Hello react") // 한번만 호출
function handleClick() {
  setIndex(3) // 리렌더링 안함
  setList([]) // 리렌더링 안함
  // 리렌더링 함
}

위의 코드에서 setIndex 이후 setList가 실행되기 전에 index 값을 DOM에 리렌더링 시키고 싶을 때 사용

function handleClick() {
  flushSync(() => {
    setIndex(3)
  })
  setList([])
}