본문으로 건너뛰기

usePreservedState

주어진 값과 비교 함수(comparator)를 사용하여 상태를 보존하는 커스텀 훅입니다.

comparator를 넘기지 않는다면 @modern-kit/utils의 isEqual 함수가 기본 함수로 활용됩니다.

이 훅은 주어진 값이 변경될 때마다 비교 함수(comparator)를 통해 이전 상태와 새로운 값을 비교하여, 값이 다르다고 판단될 때에만 상태를 업데이트합니다.

이를 통해 불필요한 상태 업데이트를 방지할 수 있습니다.


Code​

🔗 실제 구현 코드 확인


Interface​

typescript
function usePreservedState<T>(
  value: T,
  comparator?: (source: T, target: T) => boolean
): T;

Options​

NameTypeDefaultDescription
valueT-보존하고자 하는 값
comparator(source: T, target: T) => booleanisEqual이전 상태와 새로운 값을 비교하는 함수. 두 값이 동일하면 true를 반환해야 함

Usage​

기본 비교 함수 사용법​

typescript
import React, { useEffect, useState } from "react";
import { usePreservedState } from "@modern-kit/react";

const Example = () => {
  const preservedState = usePreservedState({ exampleId: 1 }); // 컴포넌트가 리렌더링 되도 preservedState 참조는 유지됩니다.

  return  <>{/* ... */}</>;
}

커스텀 비교 함수 사용법​

typescript
import React, { useEffect, useState } from 'react';
import { usePreservedState } from '@modern-kit/react';

const Example = () => {
  const comparator = (
    source: { exampleId: number },
    target: { exampleId: number }
  ) => source.exampleId === target.exampleId;

  const preservedState = usePreservedState({ exampleId: 1 }, comparator);

  return <>{/* ... */}</>;
};