성능개선(3) - batching, useTransition, useDeferredValue

batching

- state변경함수를 연달아서 3개 사용하면 재렌더링도 원래 3번 되어야하지만 리액트는 똑똑하게도 재렌더링을 마지막에 1회만 처리해준다. 이런 재렌더링 방지기능을 batching이라고 한다.

- 근데 문제는 ajax요청, setTimeout안에 state변경함수가 있는 경우 batching이 일어나지 않는다. 리액트 17버전까진 그런 식으로 일관적이지 않게 동작했는데18버전 이후 부터는 어디 있든 간에 재렌더링은 마지막에 1번만 된다. 

- batching 되는게 싫고 state변경함수 실행마다 재렌더링시키고 싶으면 flushSync라는 함수를 쓰면 된다. 

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

 

useTransition

useTransition로 재렌더링이 오래걸리는 부분을 감싸면 렌더링시 버벅이지 않게 해준다.

 

- startTransition() 함수 : state변경함수 같은걸 묶으면 그걸 다른 코드들보다 나중에 처리해준다.

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

그래서 <input> 타이핑같이 즉각 반응해야하는걸 우선적으로 처리해줄 수 있다. 

물론 근본적인 성능개선이라기보단 특정코드의 실행시점을 뒤로 옮겨주는 것일 뿐이다. 

 

- isPending : startTransition() 으로 감싼 코드가 처리중일 때 true로 변하는 변수이다.

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

위의 코드는 useTransition으로 감싼게 처리완료되면 <div>{name}</div> 이 보인다.

 

useDeferredValue

- startTransition()랑 용도가 비슷하다.

- 근데 얘는 state 아니면 변수하나를 집어넣을 수 있게 되어있다. 그래서 그 변수에 변동사항이 생기면 그걸 늦게 처리해준다. 

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

 

useDeferredValue 안에 state를 집어넣으면 그 state가 변동사항이 생겼을 때 나중에 처리해준다.

그리고 처리결과는 let state에 저장해준다.