React v18 에서 추가된 중요점

Automatic Batching

React 에서 Bathing 이란, 여러 state 업데이트를 하나의 업데이트로 그룹화하여 렌더링 성능을 향상시키는 것을 의미합니다.

v18 부터는 새로운 Root API 인 createRoot 를 통해 자동으로 state 업데이트를 배칭 시킵니다. 그로 인해 기본적으로 ReactV18 부터는 렌더링 성능이 향상되었습니다.

예를 들어 기존에는 아래의 로직이 자동으로 배칭되어 여러번 수행하지 않고 렌더링 과정을 다 한 번만 처리하도록 합니다.

function clickHandler() {
	setCount(cnt => cnt + 1)
	setFlag(flag => !flag)
}

useTransition

느린 컴포넌트 성능을 향상 시켜 UX 를 개선할 수 있음.

startTransition 안에 있는 코드 시작을 뒤로 늦춰줘서 입력은 먼저 일어나고 그 이후 컴포넌트 렌더링이 발생하여 시점을 조절하여 성능향상효과를 보여줌.

isPending 은 startTransition 이 처리중 일 때 true 로 변함.

import { useState, useTransition } from 'react'

let [name, setName] = useState('')
let [isPending, startTransition] = useTransition()

return (
  <div>
    <input onChange={(e) => {
      startTransition(() => {
        setName(e.target.value)
      })
    }} />
    {isPending ? '로딩중' : ''}
  </div>

)

 

기본적으로 react v18 부터 기본 성능도 향상되었기 때문에 react 사용시 필수적으로 다가가야할 버전이지 않을까 합니다.