useTransition, useDeferredValue

1. Automatic Batching

 

state1 변경()

state2 변경()

state3 변경() => 여기서만 재렌더링 1회

 

2. useTransition: 느린 컴포넌트 성능 향상 기능

 

import { useState, useTransition, useDeferredValue } from "react";

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

function App() {
	let [name, surname] = useState('');
    	let [isPending, startTransition] = useTransition();
    
    // let state = useDeferredValue(변수);	// 여기 넣은 것에 변동 사항이 생기면 늦게 처리
    
    return (
    	<div className="App">
          <input onChange={(e) => {
            startTransition(()=>{		// startTransition으로 감싸준다.
              setName(e.target.value}
            })
           }}/>
       	  {
             isPending ? '로딩중' :
             a.map(()=>{
               return <div>{name}</div>
             })
           }    
        </div>
    )
}

startTransition 안에 있는 코드의 실행 시점을 뒤로 좀 늦춰준다.