useDeferredValue 와 useTransition 차이

useDeferredValue는 상태 값의 지연 렌더링을 처리하고 useTransition은 함수 실행과 연관된 작업들을 비동기적으로 처리합니다. React의 비동기 렌더링 기능 을 활용하여 성능 최적화와 사용자 경험 개선에 기여합니다.

1. useDeferredValue

• 상태 값(state)의 업데이트를 지연시킵니다.
• 사용 사례: 상태 값이 즉시 변경되더라도, 비동기 작업이 완료될 때까지 렌더링을 지연 처리하고 싶을 때 사용합니다.
• 작동 방식:
  • 특정 상태 값이 실제 값보다 늦게 업데이트되도록 만들어 렌더링을 지연시킵니다.
  • React의 비동기 렌더링을 활용하여 성능을 최적화합니다.

컴포넌트 로딩 구현

import { Suspense, useState, useDeferredValue } from 'react';

export default function App() {
  const [query, setQuery] = useState('');
  const deferredQuery = useDeferredValue(query);
  const isStale = query !== deferredQuery;
  
  return (
    <>
      <input value={query} onChange={e => setQuery(e.target.value)} />
      <Suspense fallback={<h2>Loading...</h2>}>
        <div style={{
          opacity: isStale ? 0.5 : 1,
          transition: isStale ? 'opacity 0.2s 0.2s linear' : 'opacity 0s 0s linear'
        }}>
          <SearchResults query={deferredQuery} />
        </div>
      </Suspense>
    </>
  );
}

import { use } from "react";
import { fetchData } from "./data.js";

export default function SearchResults({ query }) {
  if (query === "") {
    return null;
  }
  const albums = use(fetchData(`/search?q=${query}`));
  if (albums.length === 0) {
    return (
      <p>
        No matches for <i>"{query}"</i>
      </p>
    );
  }
  return (
    <ul>
      {albums.map((album) => (
        <li key={album.id}>
          {album.title} ({album.year})
        </li>
      ))}
    </ul>
  );
}

입력 지연 없이 느린 컴포넌트 최적화하기

import { useState, useDeferredValue } from 'react';
import SlowList from './SlowList.js';

export default function App() {
  const [text, setText] = useState('');
  const deferredText = useDeferredValue(text);
  return (
    <>
      <input value={text} onChange={e => setText(e.target.value)} />
      <SlowList text={deferredText} />
    </>
  );
}

import { memo } from 'react';

const SlowList = memo(function SlowList({ text }) {

  let items = [];
  for (let i = 0; i < 250; i++) {
    items.push(<SlowItem key={i} text={text} />);
  }
  return (
    <ul className="items">
      {items}
    </ul>
  );
});

function SlowItem({ text }) {
  let startTime = performance.now();
  while (performance.now() - startTime < 1) {
    // Do nothing for 1 ms per item to emulate extremely slow code
  }

  return (
    <li className="item">
      Text: {text}
    </li>
  )
}

export default SlowList;

• 결과:
  • inputValue는 입력 즉시 업데이트됩니다.
  • deferredValue는 렌더링이 지연되어, 더 복잡한 작업이나 성능 최적화가 필요한 경우 유용합니다.

---

2. useTransition

• 함수 실행을 지연시켜 비동기 작업으로 처리합니다.
• 사용 사례: 상태 업데이트나 함수 실행이 복잡하여, **사용자 경험(UX)**에 부정적인 영향을 주는 경우 지연 처리를 통해 부드러운 사용자 경험을 제공할 때 사용합니다.
• 작동 방식:
  • React가 업데이트를 비차단(non-blocking) 작업으로 처리하도록 요청합니다.
  • UI의 로딩 상태를 표시하는 데 유용합니다.

import { useState, useTransition } from "react";

export default function App() {
  const [list, setList] = useState([]);
  const [isPending, startTransition] = useTransition();

  const handleClick = () => {
    startTransition(() => {
      // 큰 데이터 배열을 생성 및 업데이트
      const newList = Array(5000).fill(0).map((_, i) => i);
      setList(newList);
    });
  };

  return (
    <div>
      <button onClick={handleClick} disabled={isPending}>
        {isPending ? "Loading..." : "Update List"}
      </button>
      <ul>
        {list.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

• 결과:
  • handleClick 실행 시 큰 데이터를 업데이트하는 동안 UI가 블록되지 않고 로딩 상태를 보여줍니다.

---

3. 주요 차이점

기능	useDeferredValue	useTransition
작동 대상	상태 값 (state)	함수 실행 (상태 업데이트 포함)
지연 처리 방식	상태 값의 업데이트를 지연	함수 실행과 관련된 상태 업데이트를 비동기로 처리
주요 목적	상태 값이 변경될 때 렌더링 최적화	복잡한 함수나 상태 업데이트의 부드러운 실행
사용 사례	느린 렌더링 최적화, 값 지연 반영	성능 비용이 큰 업데이트, 로딩 상태 표시

 

React 19의 useTransition을 활용한 비동기 상태 업데이트와 UI 반응성 향상

React 19 useTransition을 활용한 Axios 데이터 로딩과 상태 업데이트