[React] 느린 컴포넌트 성능 향상 useTransition, useDeferredValue

react 18 버전에서 새롭게 추가된 hook이 있다.

useTransition

useTransition을 사용하면 동작이 느린 컴포넌트들을 혁신적으로 빠르게 동작시킬 수가 있다.

// App.js
import { useState } from "react";

function App(){
  let [name, setName] = useState('');
  let arr = new Array(10000).fill(0);	// 0이 10000개 담긴 arr

  return (
    <div className="App">
      <input onChange={(e)=>{ setName(e.target.value) }} />
      {
        arr.map(()=>{
          return <div>{name}</div>
        })
      }
    </div>
  )
}

input에 유저가 글을 입력하게 되면 그 값을 name 이라는 state에 저장한 후 arr의 갯수(10000개)만큼 뿌려주는 코드다.
유저가 타이핑을 입력할때마다 10000개의 div박스를 생성하기 때문에 매우 느리다.

성능저하의 원인이 되는 부분을 startTransition으로 감싼다.

// App.js
import { useState, useTransition } from "react";

let arr = new Array(10000).fill(0);	// 0이 10000개 담긴 arr

function App(){
  let [name, setName] = useState('');
  let [isPending, startTransition] = useTransition()

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

브라우저는 한번에 한가지 작업밖에 못하는데,
위의 같은 경우에는 input에 글자를 보여주기, div * 10000 만들기 2가지 일을 해야 하기때문에 버벅거리게 된다.
그런데 startTransition 함수로 감싸게 되면 startTransition안의 코드를 늦게 실행한다.

startTransition으로 실행 시점을 조절함으로써 성능 향상의 효과를 기대할 수 있다.
startTransition === 늦게처리

isPending은 startTransition이 처리중일 때 true를 반환한다.

useDeferredValue

useDeferredValue를 사용해도 느린 컴포넌트의 성능을 향상시킬 수있다.
useDeferredValue() 함수 안에 넣은 state는 늦게 처리해준다.

// App.js
import { useState, useTransition, useDeferredValue } from "react";

let arr = new Array(10000).fill(0);	// 0이 10000개 담긴 arr

function App(){
  let [name, setName] = useState('');
  let [isPending, startTransition] = useTransition()
  let state = useDeferredValue(name)

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