리액트 렌더링 최적화를 위한 useDeferredValue 는 debounce 의 완전한 대체제가 아니다.

 

리액트 18 버전에서 추가된 기능입니다.

 

useDeferredValue 는 말그대로 "지연된 값을 사용" 하는 훅 입니다.

 

이 훅에 대해서 오해가 있었는데요. 값을 지연한다고 하기에 debounce 의 대체제 라고 생각했습니다. 

그래서 너무나 당연히 이렇게 쓰면 API 요청이 지연되어서 들어간다고 생각 했었으나, 실상은 그렇지 않았습니다.

  const [input, setInput] = useState<string>('');
  const deferredInput = useDeferredValue(input);
 
  useEffect(() => {
    if (deferredInput) {
      fetchData(deferredInput);
    }
  }, [deferredInput]);

 

 

그렇습니다... 지연된 값을 가지고 매우 무거운 렌더링 작업을 했을때야 비로소 지연이 적용이 되는 것입니다.

  const [input, setInput] = useState<string>('');
  const deferredInput = useDeferredValue(input);

  return (
    <>
      <input value={input} onChange={생략} />
      <Component text={deferredInput}/>
    </>
  )
  
const Component = memo(function Component({text})=>{
  // text를 렌더링 하는 굉장히 무거운 컴포넌트임
  return <></>
}

// 

 

 

여전히 빈번하게 바뀌는 상태 값에 영향을 받는 네트워크 요청에 대한 최적화를 하고 싶으면 debounce 를 쓰는게 맞습니다.

빈번히 바뀌는 상태 값에 영향을 받는 굉장히 비싼 렌더링을 최적화 할때 useDefferedValue 를 쓰는게 맞습니다.

 

역시 공식문서를 여러 번 정독해야 될 것 같습니다.

https://react.dev/reference/react/useDeferredValue

useDeferredValue – React