[React] Automatic Batching 17 버전 vs Automatic Batching 18 버전 차이

※ Automatic Batching (17버전)
  - 여러개의 state 값이 하나의 핸들러 함수 안쪽에서 동시에 변경이 될 때 그룹으로 묶어서 한번만 렌더링 처리
  - 17에도 동작되는 기능이긴 하나 promise를 반환하는 함수 안쪽에 여러개의 state값이 변경될 경우에는 동작 안됨 

※ Automatic Batching (18버전)
  - 핸들러함수 안쪽에서 복수개의 state값이 변경될때 해당 변경사항을 묶어서(batching)해서 한번만 리랜더링
  - 기존 17버전에서는 promise를 반환하는 함수 안에서는 auto batching동작 불가 (18버전에서 개선됨)

  - 리액트 18에서 동일 핸들러함수 안쪽에 있더라도 flushSync를 이용해 특정 State만 auto batching에서 제외 처리 가능

 

같은 소스임에도 출력되는 내용이 달라짐

function App() {
	console.log('rendered');
	const [Count, setCount] = useState(0);
	const [Count2, setCount2] = useState(0);

	const returnPromise = () => {
		return new Promise((res) => setTimeout(res, 500));
	};

	const handleClick = () => {
		returnPromise().then(() => {
			setCount(Count + 1);
			setCount2(Count2 + 1);
		});
	};

	return (
		<div className='App'>
			<button onClick={handleClick}>button</button>
			<h1>
				{Count}-{Count2}
			</h1>
		</div>
	);
}

export default App;

 

17버전

 

18버전