728x90
- React 18에서 새로이 생긴 훅으로 useTransition, useDeferredValue가 있다.
- 이 두 훅의 사용으로 쓰로틀링과 디바운싱을 간단하게 해결할 수 있다.
- useTransition, useDeferredValue를 사용하면 실행순서를 뒤로 미룰 수 있다.
useTransition
const [isPending, startTransition] = useTransition();
- useTransition을 사용하는 대표적인 예로 검색 미리보기를 들 수 있다.
- 검색 결과가 많으면 렌더링이 많아져 렉이 걸릴 수도 있다.
- 나중에 업데이트 해도 되는, 우선순위가 낮은 함수를 구분할 수 있게 해준다.
- startTransition 인자로 콜백 함수를 넣는데 내부에 우선순위가 낮은, 나중에 실행될 함수를 넣는다.
startTransition(() => {
setState(prev => prev + 1);
});
- setState는 천천히, 미뤄져서 한 번에 처리 하는 느낌으로 실행된다.
- 랜더링이 바로바로 일어나야하는 중요한 함수는 startTransition 밖에 작성하고, 렌더링이 매번 일어날 필요가 없는 함수는 startTransition 내부에서 실행한다.
- 렌더링이 많이 일어나지만, 업데이트 중요도가 낮은 함수를 startTransition를 통해서 최적화할 수 있다.
- isPending은 startTransition가 실행되기 전에 true가 되고, 실행되지 않는동안 false가 된다.
- isPending을 이용하여 spinner, 로딩창을 띄울 수 있다.
useDeferredValue
- useTransition을 사용하지 않고 비슷하게 우선순위가 낮은 변수값을 설정할 수 있다.
- useDeferredValue 내부에 인자로 들어간 변수는 우선순위가 낮은 변수가 된다.
- 업데이트가 바로바로 되지 않아도 괜찮은 변수가 된다.
const [value, setValue] = useState('');
const deferredValue = useDeferredValue(value);
- useDeferredValue는 useMemo와도 함께 사용할 수 있다.
const result = useMemo(() => (deferredValue + " is the value"), [deferredValue]);
- 리액트는 이 우선순위가 낮춰진 함수/변수를 성능에 여유가 있을 때 실행/업데이트한다.
https://beta.reactjs.org/reference/react/useTransition#usetransition
https://beta.reactjs.org/reference/react/useDeferredValue
728x90
'React' 카테고리의 다른 글
reduxjs/toolkit 더 자세히 알아보기 (typescript 적용) (0) | 2023.02.27 |
---|---|
간단하게 Redux Saga 사용하기 (0) | 2023.01.03 |
React에서의 side effect와 effect hook (0) | 2022.12.07 |
React의 StrictMode란? (0) | 2022.11.30 |
간단하게 Jest, React Testing Library 사용하기 (0) | 2022.11.29 |