useTransition, useDeferredValue

batching

• useState 사용 시, 재렌더링이 발생하는데, 여러번 state 변경이 일어나면 맨 마지막 state 변경 시에만 재렌더링
  • 하지만, ajax, setTimeout와 같이 시간이 오래걸리는 작업에서도 적용되버렸는데 React 18에서는 모두 잘 렌더링 되도록 바꼈다.

useTransition

• 느린 컴포넌트 성능향상

import { useState, useTransition, useDeferredValue } from "react";
let a = new Array(10000).fill(0)l; 

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 ? '로딩중' :
        a.map(() => { return <div>{state}</div> }; // 성능저하 
     }
    </div> 
  )
}

• 10000개 데이터를 모두 보여줘야한다 ? -> useTransition !
• startTransition으로 문제의 state 변경 감싸기
  • 브라우저는 값을 input에 보여주고, 10000번 데이터 생성을 하므로 오래걸림
  • startTransition 내의 콜백 내용을 코드 시작을 뒤로 늦춰준다.
  • 실행 시점을 바꿔서 성능향상을 높인 것이다. (렌더링 전에 먼저 input 처리해주고 랜더링)
• isPending은 startTransition 처리 중일 때 true
• useDeferredValue(state) 늦에 처리하길 원하는 state에 사용