React Batching 및 그것이 페이지를 더 빠르게 만드는 방법

신규 개발자부터 숙련된 개발자에 이르기까지 그들은 React 페이지의 가장 큰 문제가 렌더링의 양이라는 것을 알고 있습니다. 작을수록 애플리케이션이 더 빨라지고 생성된 페이지에 대한 사용자 피드백이 더 효과적입니다.

React에서 후크와 상태 변경은 페이지의 크기에 따라 사용자 경험에 중요한 몇 밀리초가 걸릴 수 있는 페이지에서 새로운 렌더링을 생성할 수 있습니다. 실제 예를 살펴보겠습니다.

setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
}, 1000);

위의 예에서 React는 동일한 구성 요소를 두 번 렌더링합니다(소품 구조에 따라 페이지도 렌더링됨). 기본적으로 Promise, async awaits 및 timeout에서 잠긴 모든 setState는 단일하게 렌더링됩니다.

이 동작은 일련의 상태를 연속으로 렌더링하는 코드에 async await 호출이 있는 경우에도 발생합니다. 아래 예를 보자.

  const [name, setName] = useState('');
  const [lastName, setLastName] = useState('');
  const [phone, setPhone] = useState('');

  const handleClickAsync = async () => {
    await setName('Ary');
    setLastName('Barros');
    setPhone('+5584999828379');
  }

이것은 useEffect에서 API를 호출하고 비동기 함수를 사용하여 데이터를 가져올 때 매우 일반적인 코드입니다. 위의 함수에서 코드에 비동기 블록이 있을 때마다 React는 모든 상태 변경을 렌더링합니다. 이 경우 불필요하게 연속으로 3번 렌더링합니다.

그렇다면 어떻게 렌더 루프를 없앨 수 있을까요? 일괄 처리의 개념을 통해.

Batching is the act of grouping tasks together, so you do them all at once, instead of switching between tasks that take place in different programs or areas. - Kelsey Jones

React 애플리케이션에서 강제 일괄 처리

React와 함께 작동하는 라이브러리인 ReactDOM에는 그 기능 중 하나에 stability_batchedUpdates 메서드가 있습니다. 이를 통해 async-await 메서드의 내부와 외부 모두에서 일련의 상태 집합을 강제할 수 있습니다.

  const [name, setName] = useState('');
  const [lastName, setLastName] = useState('');
  const [phone, setPhone] = useState('');

  const handleClickAsync = async () => {
    ReactDOM.unstable_batchedUpdates(() => {
      await setName('Ary');
      setLastName('Barros');
      setPhone('+5584999828379');
    )};
  }

React 18.0의 자동 배치 소개

React 18.0의 새로운 기능은 자동 일괄 처리를 가져왔습니다. 이 경우 약속 내부의 모든 코드 블록, 비동기 대기 및 시간 초과가 자동으로 일괄 처리되어 단일 렌더링을 생성하므로 페이지 전체의 성능이 향상됩니다. React 페이지의 공식 예제를 살펴보겠습니다.

// Before: only React events were batched.
setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // React will render twice, once for each state update (no batching)
}, 1000);

// After: updates inside of timeouts, promises,
// native event handlers or any other event are batched.
setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // React will only re-render once at the end (that's batching!)
}, 1000);

따라서 두 가지 솔루션이 있습니다. 프로젝트에서 React 버전을 업로드할 수 없는 경우 stability_batchedUpdates 메서드를 사용하세요. 업그레이드의 가능성이 있다면 항상 최신 버전의 React를 사용하고 자동 일괄 처리와 같이 개발된 새로운 기능을 활용하십시오.

새로운 것을 배우는 데 도움이 되었기를 바랍니다. 다음에 보자.