React 18 가지 : 자동 일괄 처리

References:
New Feature: Automatic Batching
Discussions: Automatic Batching

뭐?

일괄 처리는 여러 상태 업데이트를 단일 리렌더링으로 그룹화하는 프로세스입니다. 자동 일괄 처리는 예를 들어 클릭 이벤트에 대한 핸들러 내부와 같이 React 이벤트 핸들러 내부의 반응에 존재합니다. 그러나 React 17 또는 이전 버전의 약속, setTimeout, 기본 이벤트 핸들러 등 내부 업데이트에는 존재하지 않았습니다.

function App() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  useEffect(() => {
    fetchData().then(() => {
      // React 17 or earlier does NOT batch these updates 
      // These will be two different updates
      setData(data); // 1st update and re-render
      setLoading(false); // 2nd update and re-render
    });
  }, []);

  return (...)
}

React 18을 사용하면 모든 업데이트가 어디서 시작되었는지에 관계없이 자동으로 일괄 처리됩니다.

function App() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  useEffect(() => {
    fetchData().then(() => {
      // React 18 and later batch these updates
      setData(data); 
      setLoading(false); 
     // Re-render only once at the end 🥳
    });
  }, []);

  return (...)
}

왜요?

성능상의 이유: 여러 상태가 일괄적으로 단일 렌더링으로 업데이트되면 불필요한 재렌더링을 피할 수 있으므로 성능이 향상됩니다.

사용하는 방법?

Upgrade to react 18 , 이 기능은 react 18에서만 사용할 수 있습니다. React 18 채택의 일부로 replace render with createRoot 예상됩니다.

탈퇴하는 방법?

드문 경우입니다 🤔, ReactDOM.flushSync()를 사용하여 자동 일괄 처리를 옵트아웃할 수 있습니다.

import { flushSync } from 'react-dom';

function App() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  useEffect(() => {
    fetchData().then(() => {
      flushSync(() => {
        setData(data); // 1st update and re-render
      });
      flushSync(() => {
        setLoading(false); // 2nd update and re-render
      });

    });
  }, []);

  return ()
}