디바운싱 및 스로틀링
JavaScript에서는 짧은 시간에 사용자 입력과 같은 많은 이벤트가 발생하면 화면이 잘릴 수 있습니다. 이 경우 특별한 최적화가 필요합니다.
전형적인 예는 자동 완성오전.
Google에 검색어를 입력하면 한 글자가 바뀔 때마다 실시간으로 업데이트되어야 하며 추천 검색어가 나타나야 합니다.
검색 제안이 사용자 입력당 한 번 업데이트되면 불필요한 재렌더링이 초당 여러 번 필요합니다.
따라서 실제로 필요한 검색어에 대한 자동 완성이 느려질 수 있습니다. 이것을 방지하기 위해 디바운싱 처리하다
디바운싱은 특정 함수를 너무 많이 호출하지 않도록 일정 시간 동안 함수 실행을 지연시키는 것을 말합니다.
const useDebouncedEffect = (func, delay, deps) => {
const callback = useCallback(func, deps);
useEffect(() => {
const timer = setTimeout(() => {
callback();
}, delay);
return () => {
clearTimeout(timer);
};
}, (callback, delay));
};동작은 useEffect와 유사하나 지연시간 동안 대기한 후 함수를 실행하고 다시 업데이트할 때 기존 함수를 실행하지 않는다.
스로틀링도 유사한 문제를 해결하는 기술입니다. 주어진 시간 동안 함수가 최대 한 번만 호출되도록 제한합니다.
네트워크 요청이 주기적으로 필요한 경우 throttling을 사용하여 해당 기간을 설정할 수 있습니다.
디바운싱 및 스로틀링을 위한 올바른 지연을 선택하는 것은 매우 어렵습니다.
지연 시간이 너무 길면 사용자 입력에 대한 응답이 훨씬 느려지고 너무 짧으면 응용 프로그램의 의미가 손실됩니다. 또한 CPU 부하가 큰 태스크에 적용해도 거의 의미가 없다.
사용자 빠르게 입력하면 분명히 이 모든 것을 처리하는 것은 비효율적일 것입니다.
useTransition
상태 변경의 우선 순위를 지정하기 위해 새로운 useTransition 후크가 도입되었습니다.
// useTransition 정의
export function useTransition(): (boolean, TransitionStartFunction);일반적으로 (loading, startTransition)을 반환합니다.
- 로드 중:
작업이 지연되고 있음을 나타내는 부울이며 로드 중임을 나타낼 수 있습니다. - 시작 전환:
인자로 낮은 우선순위로 실행할 함수를 받습니다.
function App() {
const (loading, startTransition) = useTransition();
const (count, setCount) = useState(0);
function handleClick() {
startTransition(() => {
setCount(c => c + 1);
})
}
return (
<div>
{loading && <Component />}
<button onClick={handleClick}>{count}</button>
</div>
);
}클릭할 때마다 발생하는 카운트 우선 순위가 낮은 상태 업데이트 실행그래서 더 중요한 이벤트가 있을 때 카운트 업데이트를 연기하고 대신 이전 값을 표시합니다. 로드를 사용하여 업데이트가 지연되는 동안 구성 요소를 볼 수도 있습니다.
useTransition을 통해 다음과 같이 100,000의 배수를 표시하는 페이지를 개선할 수 있습니다.
useDeferredValue
useTransition과 마찬가지로 낮은 우선 순위를 지정하는 후크입니다.
차이점은 useTransition은 함수 실행을 우선시하고 useDeferredValue는 값 업데이트 우선순위구체화하다
우선순위가 높은 작업을 실행하면서 이전 값을 유지하면서 useMemo와 유사하게, 업데이트 지연두고
useMemo와 함께 사용하시면 더욱 효과적입니다.
종속 값을 기억하면 불필요한 다시 렌더링을 피하면서 하위 구성 요소 또는 상태 업데이트를 연기할 수 있습니다.
function Typeahead() {
const query = useSearchQuery('');
const deferredQuery = useDeferredValue(query);
// Memoizing tells React to only re-render when deferredQuery changes,
// not when query changes.
const suggestions = useMemo(() =>
<SearchSuggestions query={deferredQuery} />,
(deferredQuery)
);
return (
<>
<SearchInput query={query} />
<Suspense fallback="Loading results...">
{suggestions}
</Suspense>
</>
);
}위의 코드는 검색의 자동 완성을 처리하는 코드입니다. 제안, 즉 추천 검색어는 사용자 입력 쿼리를 업데이트하기 위해 표시됩니다.
검색 추천 업데이트는 우선 순위가 높은 작업이 없을 때만 수행되기 때문에 디바운싱 없이도 좋은 사용자 경험을 제공할 수 있습니다.
약간의 차이는 사용자 경험을 개선하고 사용자에게 멋진 이미지를 만들 수 있습니다.