성능개선 - useTransition, useDeferredValue

코딩애플 강의 38강 

 

batch - setState함수 맨 마지막것만 실행되는것

리액트 17에서는 ajax나 setTimeout 내부는 batch 없이 
(맨마지막 setState만 실행되는것 없이) 모든 setStatet실행됐음

리액트 18에서는 ajax나 setTimeout 내부에서도 setState batch

 

 

useTransition , useDeferredValue

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

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>    
    );
}
ReactDOM.render(<App/>, document.getElementById("root"));

useTransition 
- 브라우저는 싱글스레드 ~ startTransition 안에 있는 것을 늦게처리하도록 하여 UX 개선 
- isPending은 startTransition이 처리중일때 true로 변함

useDeferredValue
- useDeferredValue 는 인수로 받는 props나 state 를 늦게 처리하도록 하여 성능개선

 

사용 전 

See the Pen Untitled by JEONG (@cona) on CodePen.

 

 

 

 

사용 후 

 

See the Pen Untitled by JEONG (@cona) on CodePen.