느린컴포넌트 성능 향상가능한 useDeferredValue& useTransition(REACT 18)

 🧩짧은 시간에 유저 입력 등의 이벤트가 많이 일어나는 경우 화면이 끊길 수 있는 경우가 있는데 이때 useDeferredValue& useTransition 사용하여 보완을 할수 있다

 

 

 

useTransition

useTransition  특정 상태 업데이트의 우선 순위가 낮음을 알리는 데 사용할 수 있다 

React state를 업데이트할 때 트랜지션을 추가하여 상태 업데이트를 부드럽게 처리하게 도와준다

사용자가 화면을 스크롤하거나, 페이지를 이동할 때 사용된다 사용자가 다음 페이지를 클릭하면, 새로운 페이지가 로드되기 전에 기존  페이지 전환을 부드럽게 만들어준다

=> 다른 모든 상태 업데이트 또는 UI 렌더링 트리거의 우선순위가 더 높음

비동기 작업을 시작하는 시점에서 일시적으로 UI를 지연시켜 로딩 중임을 알리고, 작업이 완료될 때까지 대기 상태를 유지하여 사용자 경험을 개선할 수 있다.

const [isPending, startTransition] = useTransition();

isPending는 현재 트랜지션 상태를 나타내며 우선순위가 낮은 상태 업데이트가 아직 보류 중 인지여부를 알려줄 때 startTransition은 트랜지션을 시작하는 함수

startTransition 함수는 콜백 함수를 인자로 받아 실행하며, 이 콜백 함수 내에서 상태를 변경하는 작업을 수행할 수 있다.

 

useDeferredValue

 코드를 래핑하고 낮은 우선 순위로 처리할지 결정하므로 완전한 제어가 가능

사용자가 입력을 하거나 서버에서 데이터를 가져올 때 사용된다

예를 들어, 사용자가 검색창에 입력을 할 때마다 검색 결과를 가져오는 API 호출을 수행하게 되면, 검색어가 바뀔 때마다 API를 호출하여 불필요한 호출이 발생할 수 있는데 이런 경우 useDeferredValue를 사용하여 사용자 입력이 일정 시간 동안 유지되는 경우에만 API를 호출하도록한다

=>useMemo와 유사하게 이전 값을 계속 들고 있으면서 업데이트를 지연 시킨다

 

 

미적용시

import { useState } from "react";
import classes from "./ex.module.css";
function Ex() {
  const [name, setName] = useState("");
  let array = new Array(10000).fill(0);
  return (
    <div>
      <input
        className={classes.i}
        onChange={(e) => {
          setName(e.target.value);
        }}
      />
      {array.map((_, idx) => {
        return (
          <div className={classes.a} key={idx}>
            {name}
          </div>
        );
      })}
    </div>
  );
}
export default Ex;

 

useDeferredValue& useTransition적용

import { useState, useTransition, useDeferredValue } from "react";
import classes from "./ex.module.css";
function Ex() {
  const [name, setName] = useState("");
  const [isPending, startTransition] = useTransition();
  let array = new Array(10000).fill(0);
  let 늦게처리할거_담기 = useDeferredValue(name);
  return (
    <div>
      <input
        className={classes.i}
        onChange={(e) => {
          startTransition(() => {
            setName(e.target.value);
          });
        }}
      />
      {isPending
        ? "로딩중입니다...."
        : array.map((_, idx) => {
            return (
              <div className={classes.a} key={idx}>
                {늦게처리할거_담기}
              </div>
            );
          })}
    </div>
  );
}
export default Ex;

시작 시점을 뒤로 미룰 수 있다!

useDeferredValue는 입력을 지연시키는 경우에 사용하고, useTransition은 화면 전환을 부드럽게 처리하는 경우에 사용

 

 

📌기존에 디바운싱, 스로틀링의 사용시 애매한처리?(디바운싱과 스로틀링에서 적절한 딜레이를 선택하는 것은 꽤 어렵다 )우회하던 문제를 react hooks api 로 직접 해결할수 있게 되었다