use-state-history

use-state-history

상태의 변경 이력(history)을 기록하고 되돌리기(back)/앞으로(forward)/초기화(reset)할 수 있게 해 주는 훅이에요.

출처: 문서

본문

사용법 (Usage)

useStateHistory 훅은 초기 값과 함께 사용하며, 현재 값(value), 핸들러들(handlers), 이력(history)을 배열로 반환해요:

import { Button, Code, Group, Text } from '@mantine/core';
import { useStateHistory } from '@mantine/hooks';

function Demo() {
  const [value, handlers, history] = useStateHistory(1);
  return (
    <>
      Current value: {value}

         handlers.set(Math.ceil(Math.random() * 100) + 1)}>Set value
         handlers.back()}>Back
         handlers.forward()}>Forward
         handlers.reset()}>Reset

      {JSON.stringify(history, null, 2)}

  );
}

정의 (Definition)

UseStateHistoryHandlers와 UseStateHistoryValue 인터페이스는 @mantine/hooks 패키지에서 내보내져요:

interface UseStateHistoryHandlers {
  set: (value: T) => void;
  back: (steps?: number) => void;
  forward: (steps?: number) => void;
  reset: () => void;
}

interface UseStateHistoryValue {
  history: T[];
  current: number;
}

type UseStateHistoryReturnValue = [
  T,
  UseStateHistoryHandlers,
  UseStateHistoryValue,
];

function useStateHistory(initialValue: T): UseStateHistoryReturnValue;

내보내는 타입 (Exported types)

UseStateHistoryHandlers, UseStateHistoryReturnValue, 그리고 UseStateHistoryValue 타입은 @mantine/hooks에서 내보내져요:

import type { UseStateHistoryHandlers, UseStateHistoryReturnValue, UseStateHistoryValue } from '@mantine/hooks';

더 알아보기 (Learn more)

• use-set-state
• use-throttled-callback