batch, useTransition, useDeferredValue

react 18 새로운 기능

1. batch state 변경 함수들이 여러개 있을 때
   마지막에 한번만 재 렌더링이 된다

setState1()
setState2()
setState3() -> 재 렌더링 

2. useTransition , useDeferredValue

import {useState, useTransition} from 'react'

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

function App(){
  let [name, setName] = useState('')
  let [isPending, startTransition] = useTransition()
  // isPending -> startTransition의 작업 상태 , 처리중일 때 true
  // startTransition -> 우선순위가 낮은 , 뒤에 실행할 함수를 인자로 받음
  
  let nameState = useDeferredValue(name) 
  // 안에 넣은 state가 변하면 늦게 처리해줌
  
  return (
    <div>
    // 성능 저하의 원인을 startTransition으로 감싸기 
    // 코드 시작 지점을 뒤로 늦춰줌 
      <input onChange={ (e)=>{ 
        startTransition(()=>{
          setName(e.target.value) 
        })
      }}/>

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

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