[React] useTransition, useDefferedValue

react 18 버전 이후부터 기능이 추가된게 있는데

렌더링 성능이 저하되는 컴포넌트에서 쓸 수 있는 기능이다.

 

 

batching 이란

 

automatic batching 이라는 기능은 리액트 18버전 이후로 추가된 기능이다.

setCount(1) 
setName(2) 
setValue(3)   //여기서 1번만 재렌더링됨

이런식으로 state 변경함수가 연달아서 3번이 있다면

원래 재렌더링도 3번될거지만 1번만 해주는 기능이다,

재렌더링을 방지해주는 기능이다.

---

useTransition 이란

 

오래걸리는 부분을 감싸면 렌더링시에 체감 속도를 높여줄 수 있다.

import {useState, useTransition} from 'react'

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) 
        })
      }}/>

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

먼저 useTransition() 으로 isPending 이라는 변수와 startTransition 이라는 함수를 만든다(보통 이렇게 작명한다)

그리고 오래걸리는

setName(e.target.value)

을 stratTransition 으로 감싸면 이걸 다른 코드보다 나중에 처리해준다( 먼저 처리할수 있는건 먼저 처리해주는 식)

그래서 즉각 반응해야하는 걸 우선적으로 처리해줄 수 있다.

사실 근본적으로 성능을 개선하는 건 아니고 특정 오래걸리는 코드의 실행시점을

뒤로 좀 미뤄주는 것일 뿐이다

 

isPending 이라는 변수는 뭐냐면 그 감싼 오래걸리는 코드가 처리중일때 true 인 변수이다.

그래서

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

이런식으로 코드를 짜놓으면 코드를 처리중일때에는 "로딩중"이라는 글자가 출력되어보일 것이다

---

useDeferredValue 란

이것도 startTransition() 이랑 용도가 같다.

import {useState, useTransition, useDeferredValue} from 'react'

let a = new Array(10000).fill(0)

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

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

저렇게 name 이라는 state 를 집어넣으면

나중에 state 에 변동사항이 생겼을 때에 나중에 처리한다.

결과는 state1에 저장된다.