[React]useTransition, useDeferredValue

batch

state1변경()
state2변경()
state3변경() <-- 여기서만 재렌더링 1회

ajax, setTimeout 내부라면 batching 이 일어나지 않음
하지만! 리액트 18부터는 batching이 발생함.

useTransition

useTransition 사용해보기

느린 컴포넌트 성능향상 가능(카드 빚 돌려막기)

import {useState, useTransition} from 'react'

let a = new Array(10000).fill(0)
//0 10000개로 채워진 어레이

let [isPending, startTransition] = useTransition();

function App(){
  let [name, setName] = useState('')
  
  return (
    <div>
      <input onChange={ (e)=>{ startTransition(()=>{setName(e.target.value)})
                             }}/>
      {
        a.map(()=>{
          return <div>{name}</div>
        })
      }
    </div>
  )
}

1. useTransition 갖고오기
2. 성능저하 일으키는 state 변경함수 감싸기.

작동원리

코드 시작을 뒤로 늦춰준다.

isPending은 startTransition이 처리중일 때 true로 변한다.
처리 끝나면 false.

isPending ? '로딩중' : 보여줄 요소

useDeferredValue

let state = useDeferredValue(state)

넣어둔 state 변동사항을 늦게 처리해준다.
비슷함 트랜지션이랑.

useDeferredValue(name)

--
a.map(()=>{
return <div>{state}</div>)