Automatic batching
배칭(batching)은 업데이트 대상이 되는 상태 값들을 하나의 그룹으로 묶어 리렌더링 한 번에 업데이트가 모두 진행되게 하는 걸 의미한다. 한 함수 안에서 setState를 아무리 많이 호출해도 리렌더링은 한 번만 발생한다.
함수에 끝에서 업데이트되며 리액트는 마지막에 한 번만 리렌더링한다. 이것은 여러 번 리렌더링을 하는 걸 막기 때문에 성능상 좋은 영향을 준다.
batch update를 사용해 불필요한 리렌더링을 줄일 수 있어 퍼포먼스적으로 큰 이점을 얻을 수 있는데, 이전 버전에서도 이런 batch update가 지원되었으나 클릭과 같은 브라우저 이벤트에서만 적용 가능하고 api 호출에 콜백으로 넣은 함수나 timeouts 함수에서는 작동하지 않았다.
batch 처리하지 않으려면 어떻게 해야 할까?
일반적으로 일괄 처리는 안전하지만 일부 코드는 상태 변경 직후 DOM에서 무언가를 읽는 데 의존할 수 있다. 이러한 사용 사례의 경우 ReactDOM.flushSync()를 사용하여 일괄 처리를 옵트 아웃 할 수 있다.
리액트 18 버전에서 Automatic batching
- 더 나은 성능을 위한 더 적은 리렌더링
- 이벤트 핸들러 밖에서도 작동
- 필요할 때에는 제외 가능
Automatic batching
배칭(batching)은 업데이트 대상이 되는 상태 값들을 하나의 그룹으로 묶어 리렌더링 한 번에 업데이트가 모두 진행되게 하는 걸 의미한다. 한 함수 안에서 setState를 아무리 많이 호출해도 리렌더링은 한 번만 발생한다.
함수에 끝에서 업데이트되며 리액트는 마지막에 한 번만 리렌더링한다. 이것은 여러 번 리렌더링을 하는 걸 막기 때문에 성능상 좋은 영향을 준다.
batch update를 사용해 불필요한 리렌더링을 줄일 수 있어 퍼포먼스적으로 큰 이점을 얻을 수 있는데, 이전 버전에서도 이런 batch update가 지원되었으나 클릭과 같은 브라우저 이벤트에서만 적용 가능하고 api 호출에 콜백으로 넣은 함수나 timeouts 함수에서는 작동하지 않았다.
batch 처리하지 않으려면 어떻게 해야 할까?
일반적으로 일괄 처리는 안전하지만 일부 코드는 상태 변경 직후 DOM에서 무언가를 읽는 데 의존할 수 있다. 이러한 사용 사례의 경우 ReactDOM.flushSync()를 사용하여 일괄 처리를 옵트 아웃 할 수 있다.
리액트 18 버전에서 Automatic batching
- 더 나은 성능을 위한 더 적은 리렌더링
- 이벤트 핸들러 밖에서도 작동
- 필요할 때에는 제외 가능
