/ REACT

useDeferredValue 사용법

React은 다음과 같이 구성되어 있습니다.




useDeferredValue

이전 글의 useTransition을 보고 오시면 좋습니다.
useDeferredValue는 useTransition의 startTransition()과 비슷한 용도로 사용됩니다.

import { useState, useDeferredValue } from 'react';

let arr = new Array(10000).fill(0);

function App() {
  const [input, setInput] = useState('');
  let state = useDeferredValue(input); 
  
  return (
    <div>
      <input onChange={e => {
        setInput(e.target.value)
      }} />
      {arr.map(() => {
        return <div>{state}</div>
      })}
    </div>
  )
}

useDeferredValue를 import하고 useDeferredValue()의 인자에 원하는 state값을 넣고 변수에 저장합니다. 인자로 넣은 state는 state가 변경사항이 생기면 늦게 처리해줍니다. 처리된 결과를 새 변수에 담아서 사용할 수 있습니다.




End.