Skip to content

usePrevious ​

입력 상태의 이전 값을 반환해요. 만약 다시 렌더링이 발생하지만 상태 값이 변경되지 않으면 이전 값은 변경되지 않아요. 상태가 객체이거나 사용자 정의 변경 감지가 필요한 경우, compare 함수를 제공할 수 있어요. 기본적으로 상태 변경은 prev === next을 사용하여 감지해요.

인터페이스 ​

ts
function usePrevious<T>(state: T, compare?: (prev: T, next: T) => boolean): T;

파라미터 ​

  • staterequired · T

    이전 값을 추적할 상태예요.

  • compare(prev: T, next: T) => boolean

    상태가 변경되었는지를 판단하기 위한 선택적 비교 함수예요.

반환 값 ​

  • T

    상태의 이전 값이에요.

예시 ​

tsx
const [count, setCount] = useState(0);
// previousCount의 초기 값은 `0`이에요
const previousCount = usePrevious(count);

MIT 라이선스에 따라 배포됩니다.