검색 기능을 개발할 때 검색 타이핑에 따른 지연된 네트워크 요청을 위한 debounce 기능을 활용하는 경우가 많습니다. 이러한 기능을 React의 useDeferredValue 훅을 통해 구현할 수 있다는 포스팅을 읽게 되어 요약해보고자 합니다.

참고문헌

https://medium.com/@Evelyn.Taylor/say-goodbye-to-debouncing-use-usedeferredvalue-hook-56e1c28a3e49

요약

useDeferredValue?

• 목적은 덜 중요한 부분의 렌더링을 지연시켜 렌더링의 우선순위를 반영하고자 함입니다.

• 검색 input 의 입력을 예시로 생각해보면, 즉각적으로 화면 업데이트가 반영되어야 할 부분은 입력창입니다. ('a' -> 'ab')

• 입력결과에 따른 리스트는 캐시된 데이터가 아닌 이상 즉각적인 업데이트가 사실상 불가능합니다. (서버에 요청을 하는경우)

• 이때, 변경되는 입력 state 를 useDeferredValue 의 인자로 넣어, 새로운 반환 state 를 사용하게 되면, 입력창에 대한 즉각적인 업데이트와 더불어, 새로운 검색어('ab') 에 대한 리스트 데이터가 전달될때까지 이전 렌더링 결과('a')를 화면에 우선적으로 렌더링합니다.

특이사항 및 장점

• 매 요청마다 loading 화면이 아닌 이전 상태값을 화면에 렌더링 할 수 있어 경우에 따라서는 사용자의 경험에 유리할 수 있습니다.

• 우선적으로 이전 화면을 렌더링 하지만, 백그라운드에서는 새롭게 변경된 state 에 대한 렌더링을 진행하게 됩니다. 이러한 렌더링 과정에 간섭이 발생한다면(예를 들면 검색 상태값 'ab'에 대한 렌더링을 진행중인데, 그 중간에 'abc' 로 변경을 할 경우) 기존에 작업중이던 렌더과정을 중단하고, 새로운 상태값에 대한 렌더링을 진행하게 됩니다.

• 만일 렌더링 이후 effect 가 적용되는 상황이라면, 중단된 렌더링에서는 effect 가 실행되지 않습니다

• 이러한 특징점은 기존에 사용되던 debounce 의 기능과, 렌더링 최적화에 도움을 줄 수 있습니다.