usePreservedState

comparator로 비교했을 때 값이 변경되었을 때 상태를 변경하는 커스텀 훅입니다.

comparator를 넘기지 않는다면 @devgrace/utils의 deepEqual 함수가 활용됩니다.

• deepEqual

만약, comparator의 반환 값이 true여서 상태가 변경되지 않는다면 참조도 유지됩니다.

Interface

const usePreservedState: <T>(
  value: T,
  comparator?: ((source: T, target: T) => boolean) | undefined
) => T;

Usage

Default Comparator

import React, { useEffect, useState } from "react";
import { usePreservedState } from "@devgrace/react";

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

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

Custom Comparator

import React, { useEffect, useState } from 'react';
import { usePreservedState } from '@devgrace/react';

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

  const preservedState = usePreservedState({ exampleId: 1 }, comparator);
  
  return <>{/* ... */}</>;
};