리액트 공식 문서를 참고한 정리 내용 (25.08 기준)
일부 UI 업데이트를 지연시킬 수 있는 Hook이다.
const deferredValue = useDeferredValue(value)컴포넌트의 최상위 레벨에서 useDeferredValue를 호출하여 지연된 버전의 값을 가져온다.
import { useState, useDeferredValue } from 'react';
function SearchPage() {
const [query, setQuery] = useState('');
const deferredQuery = useDeferredValue(query);
// ...
}매개변수
value
- 지연시키고 싶은 값으로, 어떤 타입이든 가능하다.
👉 “바로 안 바꿔도 되는 값”을 넣는 자리
initialValue
- 컴포넌트가 처음 렌더링될 때 보여줄 기본 값으로, 이걸 안 주면 첫 렌더링시에는
useDeferredValue가 값을 지연시키지 않고 그냥value를 그대로 사용한다. - (why? 처음에는 “지연할 이전 값”이 없기 때문!)
👉 “처음에 보여줄 대체 값”을 넣는 자리.(없으면 그냥 실제 값 보여줌)
반환값
currentValue
- 항상 지연된 값을 돌려준다.
- 물론 처음 렌더링 때는 지연할 이전 값이 없기 때문에, 그냥 원래 값(
value) 그대로 돌려준다. 반면에 업데이트가 일어날 때는
→ 먼저 이전 값을 그대로 반환해서 화면을 빠르게 보여준다.
→ 그 뒤에 React가 백그라운드에서 새 값으로 다시 렌더링 해준다.
👉 즉, 새로운 값으로 바꾸기 전에 잠시 이전 값을 유지했다가, 나중에 부드럽게 새 값으로 바꿔주는 것이다.
주의사항
1. Transition 안에서는 따로 지연 안 한다.
startTransition으로 이미 업데이트를 느리게하고 있다면, useDeferredValue는 그냥 새로운 값을 바로 돌려준다.
이미 지연 중이니까 굳이 또 지연할 필요 없다는 의미이다.
2. 값은 원시값이나 외부에서 만든 객체만 전달한다
useDeferredValue에 매번 새로운 객체를 만들어 넣으면, 랜더링 때마다 값이 달라졌다고 생각해서 계속 불필요하게 리렌더링을 한다.
그래서 숫자, 문자열 같은 원시값이나, 컴포넌트 바깥에서 만든 객체를 사용해야 한다.
3. 값이 바뀌면 백그라운드에서 새 랜더링 예약
React는 지연된 값이 달라지면 백그라운드에서 새 값으로 렌더링을 준비한다.
하지만 사용자가 입력을 너무 빨리하면, 이전 백그라운드 작업을 취소하고 다시 시작한다.
예를 들자면, 차트가 무거우면 입력할 때마다 안 바뀌고, 입력이 멈춘 뒤에 업데이트될 수 있는 경우
4.<Suspense>와 함께 동작
만약 지연된 값으로 인한 업데이트가 데이터를 로딩하게 되더라도, 화면은 Fallback(로딩 화면)을 안 보여주고 이전 값을 그대로 보여준다.
즉, UX가 부드럽게 유지된다.
5. 네트워크 요청을 줄여주진 않음
useDeferredValue는 화면 렌더링 시점을 조절할 뿐, 추가 네트워크 요청을 막아주지는 않는다.
6. 지연이 “고정된 시간”은 아님
“뮤조건 500ms 늦게 보여준다” 같은 게 아니라, React가 현재 랜더링을 끝내는 즉시 백그라운드 랜더링을 시작한다.
단, 이벤트(ex: 타이핑) 같은 급한 작업이 들어오면 그게 우선이라 중간에 멈출 수 있다.
7. 백그라운드 렌더링 동안에는 Effect 실행 안 함
useEffect 같은 훅은 백그라운드 렌더링이 실제 화면에 반영되기 전까지 실행되지 않고, 최종 UI가 화면에 커밋된 후에만 실행된다.
👉 한줄 요약
useDeferredValue는 값 업데이트를 부드럽게 지연시켜 주지만, Transition과 중복되진 않고, 값은 신중히 전달해야 하며, 네트워크 요청을 줄여주진 않는다. React는 항상 급한 업데이트를 우선 처리해서 UX가 끊기지 않도록 해준다.
값을 지연시키는 것은 내부적으로 어떻게 작동하나요?
useDeferredValue는 값이 바뀌었을 때 화면을 곧바로 새 값으로 바꾸지 않고, 잠시 이전 값을 유지했다가 새로운 값이 준비되면 바꿔주는 방식으로 동작한다.
예를 들어 사용자가 검색창에
"a"를 입력한 뒤 곧바로"ab"를 입력하면, React는 내부적으로query는"ab"로 갱신하지만deferredQuery는 잠시"a"상태를 유지한다.
그래서 화면에는 "a"에 대한 검색 결과가 그대로 보이는 거임.
그동안 React는 백그라운드에서 deferredQuery = "ab" 상태로 다시 렌더링을 준비한다. 데이터가 다 준비되면 화면은 "ab"에 대한 업데이트는 버려지고, React는 "abc" 기준으로 다시 렌더링을 시도한다. 항상 가장 최신 입력값이 우선이 된다.
중요한 점은 네트워크 요청 자체는 지연되지 않는다는 것이다.
"a", "ab", "abc" 입력이 있을 때마다 서버 요청은 모두 즉시 전송된다. 지연되는 것은 화면에 표시되는 시점뿐이며, 또 한 번 요청한 값은 캐시에 저장되기 때문에, 사용자가 다시 입력하면 곧바로 결과를 보여줄 수 있다.
검색창처럼 입력이 빠르게 변하는 상황에서 화면이 매번 깜빡이지 않고, 부드럽게 최신 결과만 보여줄 수 있도록 도와주는 것이
useDeferredValue의 핵심 역할이다.
