useTransition & useDeferredValue

리액트를 사용하다 보면 자주 쓰는 훅들만 익숙해지고, 생각보다 다양한 훅들을 놓치게 되는 것 같다.

useTransition과 useDeferredValue 같은 훅들을 간과하고 있었는데, 이번에 알게 되어 간단하게 정리해 보았다. 

1️⃣ useTransition

useTransition은 비동기 UI 업데이트를 처리할 때, UI를 차단하지 않고 상태를 업데이트할 수 있는 훅이다.

사용자 경험을 개선하기 위해 시간이 걸리는 작업을 "전환(transition)"으로 구분하고, 이를 낮은 우선순위로 처리할 수 있게 해 준다. 

const [isPending, startTransition] = useTransition();

이 훅은 두 가지 값을 반환하는데, 하나는 작업이 진행 중인지 나타내는 isPending 이고, 다른 하나는 전환을 시작하는 함수인 startTransition 이다.

import { useState, useTransition } from 'react';
import TabButton from './TabButton.js';
import AboutTab from './AboutTab.js';
import PostsTab from './PostsTab.js';
import ContactTab from './ContactTab.js';

export default function TabContainer() {
  const [isPending, startTransition] = useTransition();
  const [tab, setTab] = useState('about');

  function selectTab(nextTab) {
    startTransition(() => {
      setTab(nextTab);
    });
  }

  return (
    <>
      <TabButton
        isActive={tab === 'about'}
        onClick={() => selectTab('about')}
      >
        About
      </TabButton>
      <TabButton
        isActive={tab === 'posts'}
        onClick={() => selectTab('posts')}
      >
        Posts (slow)
      </TabButton>
      <TabButton
        isActive={tab === 'contact'}
        onClick={() => selectTab('contact')}
      >
        Contact
      </TabButton>
      <hr />
      {isPending && <p>Loading...</p>}
      {tab === 'about' && <AboutTab />}
      {tab === 'posts' && <PostsTab />}
      {tab === 'contact' && <ContactTab />}
    </>
  );
}

• useState와 useTransition 사용: tab 상태는 현재 선택된 탭을 관리하며, useTransition을 사용하여 전환 작업을 처리한다. isPending 값은 전환이 진행 중인지 나타내고, startTransition 함수는 탭 전환을 낮은 우선순위로 처리하게 한다.
• selectTab 함수: 해당 함수는 새로운 탭을 선택할 때 호출되는데, startTransition으로 감싸져 있어 탭 전환 작업이 비동기적으로, 우선순위가 낮은 작업으로 처리된다. 따라서 UI가 빠르게 반응할 수 있다. 
  해당 예시 코드는 리액트 공식문서에서 가져온 거라 직접 동작시켜 볼 수 있는데, PostsTab처럼 무거운 작업이 포함된 탭을 전환할 때 우선순위가 낮기 때문에 Posts 클릭 후 Contact 탭을 클릭한다면 Posts 탭이 동작될 때까지 UI 업데이트가 멈추는 것이 아니라 빠르게 Contact 탭으로 전환됨을 볼 수 있다! 
• 로딩 상태 표시: isPending 값이 true일 때, 전환이 완료되기 전까지 "Loading..." 메시지를 보여준다. 이를 통해 사용자는 전환이 진행 중임을 알 수 있다.

2️⃣ useDeferredValue 

useDeferredValue는 UI 일부 업데이트를 지연시킬 수 있는 훅이다.

useTransition 와 비슷하게 느껴질 수 있는데, useTransition 는 함수 실행의 우선순위를 지정하는 훅이라면, useDefferdValue는 값의 업데이트 우선순위를 지정한다.

const deferredValue = useDeferredValue(value)

 

value는 즉시 반영되는 값이지만, deferredValue는 우선순위가 낮은 작업으로 처리되어, React가 렌더링 성능에 부담을 주지 않는 시점에 업데이트된다. 따라서 사용자가 입력을 빠르게 하더라도 UI는 즉각 반응하고, 결과는 약간의 지연 후 표시된다.

import { Suspense, useState } from 'react';
import SearchResults from './SearchResults.js';

export default function App() {
  const [query, setQuery] = useState('');
  return (
    <>
      <label>
        Search albums:
        <input value={query} onChange={e => setQuery(e.target.value)} />
      </label>
      <Suspense fallback={<h2>Loading...</h2>}>
        <SearchResults query={query} />
      </Suspense>
    </>
  );
}

 

먼저 useState 활용해서 만든 검색 기능을 구현한 컴포넌트로 사용자가 입력할 때마다 query가 즉시 업데이트되기 때문에, 검색어가 바뀔 때마다 새로운 데이터를 로딩하느라 UI가 잠시 동안 멈추거나 Suspense 폴백 메시지("Loading...")가 나타날 수 있다. 

 

그럼 여기에 useDeferredValue 를 어떻게 활용할 수 있을까?

https://codesandbox.io/p/sandbox/lsmcyq

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

export default function App() {
  const [query, setQuery] = useState('');
  const deferredQuery = useDeferredValue(query);
  return (
    <>
      <label>
        Search albums:
        <input value={query} onChange={e => setQuery(e.target.value)} />
      </label>
      <Suspense fallback={<h2>Loading...</h2>}>
        <SearchResults query={deferredQuery} />
      </Suspense>
    </>
  );
}

1. query는 즉시 업데이트: 사용자가 검색어를 입력할 때 query는 즉시 업데이트된다. 따라서 입력 필드에 사용자가 입력한 값이 바로 반영된다.
2. deferredQuery는 지연된 값: SearchResults 컴포넌트에 전달되는 값은 지연된 deferredQuery이다.
   즉, React는 여유가 있을 때만 deferredQuery를 업데이트하여 새로운 데이터를 로딩하도록 한다. useDeferredValue 를 사용하기 전 UI에서는 Loading UI 가 잠시 보였다면,  useDeferredValue 를 활용한 UI에서는 이전 검색 결과가 유지된다.  

🤨 로딩 표시가 안되면 불친절한 UI 아닌가...

useDeferredValue를 사용하면 검색어가 빠르게 입력될 때 이전 검색 결과가 유지되므로, 로딩 UI가 표시되지 않는 점이 장점일 수 있다.     다만, 로딩 상태가 시각적으로 드러나지 않으면 사용자에게 불친절한 UI가 될 수 있다는 생각이 들었는데..

이럴 때, 검색 결과가 최신 쿼리와 일치하지 않을 경우(즉, 오래된 결과일 때) CSS를 활용해 흐리게 표시함으로써, 로딩 중임을 시각적으로 알리는 방법을 적용할 수 있다! 👍

const isStale = query !== deferredQuery;

<div style={{
          opacity: isStale ? 0.5 : 1,
          transition: isStale ? 'opacity 0.2s 0.2s linear' : 'opacity 0s 0s linear'
        }}>
          <SearchResults query={deferredQuery} />
</div>