18가지 반응 : useDeferredValue

References:
React docs: useDeferredValue
Discussions: useDeferredValue

뭐?

useDeferredValue는 상태 업데이트와 같은 일부 작업에 의해 트리거되는 긴급하지 않은 업데이트를 연기하는 데 사용할 수 있는 새로운 반응 후크입니다.
useDeferredValue 후크가 값을 수락하고 보다 긴급한 업데이트를 연기할 값의 새 복사본을 반환합니다. 긴급 업데이트 렌더링과 같이 반응이 바쁜 경우 반환 값은 이전 값이 되며 긴급 업데이트가 완료되면 후크에서 업데이트된 값을 가져옵니다.

import { useState, useEffect, useDeferredValue } from "react";

function App({data}) {
    const [query, setQuery] = useState("");
    const [result, setResult] = useState(data);

    // Showing result is non-urgent update
    const deferredQuery = useDeferredValue(query);

  useEffect(() => {
      const searchResult = search(data, deferredQuery);
      setResult(searchResult);
  }, [deferredQuery]);

  return (
    <div className="App">
      <label htmlFor="search users">Search: </label>
      <input
        type="search"
        value={query}
        onChange={(e) => setQuery(e.target.value)} // urgent update
      />

        <DataView data={result}/>
    </div>
  );
}

여기에서 지연된 쿼리에 대해 검색이 수행되고 검색 결과가 긴급하지 않은 업데이트임을 보여줍니다. 그러나 사용자가 입력 필드에 입력한 내용을 보여주는 것은 긴급 업데이트입니다. 깊이 들어가자,

"장난감"이라는 검색어를 입력했다고 가정해 보겠습니다.

React 17 이전 버전에서는

"t"에서 입력 상태를 "t"로 업데이트하고 "t"를 검색한 다음 상태를 업데이트하여 결과를 표시합니다.

"o"에서 입력 상태를 "to"로 업데이트하고 "to"를 검색한 다음 상태를 업데이트하여 결과를 표시합니다.

"y"에서 입력 상태를 "장난감"으로 업데이트하고 "장난감"검색을 수행한 다음 상태를 업데이트하여 결과를 표시합니다.

React 18에서: useDeferredValue 사용,

"t"에서 입력 상태를 "t"로 업데이트하고 보류 중인 긴급 업데이트가 있으므로(사용자가 "o"입력, 입력 상태 업데이트 필요) useDeferredValue 후크가 이전 값 ""을 반환합니다. 검색이 수행되었습니다.

"o"에서 입력 상태를 "to"로 업데이트하고 보류 중인 긴급 업데이트가 있으므로(사용자가 "y"를 입력하고 입력 상태를 업데이트해야 함) useDeferredValue 후크가 이전 값 ""을 반환합니다. 검색이 수행되었습니다.

"y"에서 입력 상태를 "장난감"으로 업데이트하고 보류 중인 긴급 업데이트가 없으므로 useDeferredValue 후크가 새 값 "장난감"을 반환하고 검색이 수행되고 ui에 검색 결과가 표시됩니다.

이 훅은 useDebounce과 같은 디바운싱 훅과 유사하지만 useDeferredValue를 사용하는 이점은 React가 다른 작업이 완료되는 즉시 업데이트에 대해 작업한다는 것입니다(임의의 시간을 기다리는 대신).

따라서 useDeferredValue 후크를 사용하는 경우 고급형 컴퓨터는 업데이트를 빠르게 처리할 수 있으므로 고급형 컴퓨터에서는 긴급하지 않은 업데이트가 보급형 컴퓨터보다 빠릅니다. 그러나 useDebounce 의 경우 긴급하지 않은 업데이트에 대한 지연은 두 경우 모두 동일하므로 사용 가능한 전체 리소스를 활용할 수 없습니다.

왜요?

UI 업데이트를 더 잘 제어할 수 있으므로 어떤 업데이트가 긴급하고 어떤 것이 긴급하지 않은지를 반응에 알릴 수 있는 옵션이 있으면 더 나은 사용자 경험을 만들 수 있습니다.

사용하는 방법?

Upgrade to react 18 , useDeferredValue 후크를 사용합니다.

예시:useDeferredValue : https://codesandbox.io/s/react-18-usedeferredvalue-s4lgn2
없이 useDeferredValue : https://codesandbox.io/s/react-18-no-usedeferredvalue-wvel7c

차이점을 확인하려면 CPU 스로틀링을 활성화하십시오.