[React] useTranstion ,useDeferredValue 사용하기

state 1,state 2, state 3 가 존재하는 경우,

변경할 때마다 재렌더링 되는 것이 아니라

마지막에 변경되는 state 값 이후에 재렌더링 해주는 것을 batching 이라고 한다

 

하지만 ajax, setTimeout  내부라면 baching이 일어나지 않는다

 

React 18 버전 이후부터는 이러한 성능 문제를 해결하기 위해서

useTranstion 과 useDeferredValue 기능이 나오면서 위의 문제를 해결가능하게 되었다

 

 

useTranstion

 

import {useTransition} from 'react'

다음 코드는 10000개의 배열 안에 input 값을 출력 해준다

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

 

위의 코드를 실행시켜주면 타이핑을 할 때

state값이 계속 변하면서  빠르게 타이핑을 할 경우

살짝 느린것을 느낄 수 있다

 

1. input 값을 받고

2. <div>박스  *10000개 만들어주기 <-여기서 딜레이가 걸리는 것

useTransition을 사용하면

startTransition 안에있는 코드의 처리를 뒤로 미뤄주면서

 

1. input 값을 받고

2. <div>박스  *10000개 만들어주기 <- 후처리

 

위의 방법보다 빠르게 작성되는 것을 확인 할 수있다

let a = new Array(10000).fill(0)
function App() {
  let [name, setName] = useState('')
  let [isPending, startTransition] = useTransition()
  return (
    <div>
      { <input onChange={ (e)=>{ 
        //코드의 실행을 나중에 처리 해줌
        startTransition(()=>{
         setName(e.target.value) 
        })}}/>}

      {
        isPending ? '로딩중' : 
        a.map(()=>{
          return <div>{name}</div>
        })
      }
    </div>
  )
}

 

useDeferredValue 

 

useTranstion 와 사용하는 이유가 비슷하나

사용하는 방법은 다음과 같다

 

useDeferredValue(state 변수) 안에 들어가는

state 변수의 변동 사항이 있는 경우 후처리를 해준다

 

let a = new Array(10000).fill(0)
function App() {
  let [name, setName] = useState('')
  let [isPending, startTransition] = useTransition()

 let state = useDeferredValue(name)
  return (
    <div>
      { <input onChange={ (e)=>{ 
         setName(e.target.value) 
        }}/>
      }
      {
        isPending ? '로딩중' : 
        a.map(()=>{
          return <div>{state}</div>
        })
      }
    </div>
  )
}