usePrevious

이전 렌더링에서 인수의 값을 반환하는 커스텀 훅입니다.

현재 값이 변경될 때마다 이전 값을 저장하고, 컴포넌트가 다시 렌더링될 때 그 이전 값을 반환합니다.

Code

🔗 실제 구현 코드 확인

Interface

typescript

function usePrevious<T>(value: T): T;

Parameters

Name	Type	Description
value	T	이전 값을 추적할 현재 값

Usage

typescript

import { useState } from 'react';
import { usePrevious } from '@modern-kit/react';

const Example = () => {
  const [count, setCount] = useState(0);
  const previousCount = usePrevious(count);

  const onIncrementCount = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <div>Current Count is - {count}</div>
      <div>Previous Count is - {previousCount}</div>
      <button onClick={onIncrementCount}>Increment</button>
    </div>
  );
};

Example

Current Count is - 0

Previous Count is - 0