usePreservedReference

usePreservedReference es un Hook de React que te ayuda a conservar la referencia de un valor cuando no ha cambiado y te permite usar el estado más reciente de forma segura. Evita renderizados innecesarios y te permite acceder siempre a los datos más recientes.

Interfaz

function usePreservedReference<T extends NotNullishValue>(
  value: T,
  areValuesEqual?: (a: T, b: T) => boolean
): T;

Parámetros

• valuerequired · T
  

  El valor cuya referencia quieres conservar. Devuelve una nueva referencia si la comparación indica que el valor del estado ha cambiado.

• areValuesEqual(a: T, b: T) => boolean
  

  Una función opcional para determinar si dos valores son iguales. De forma predeterminada, usa JSON.stringify para compararlos.

Valor de retorno

• T
  

  Devuelve la misma referencia si el valor se considera igual al anterior; de lo contrario, devuelve una nueva referencia.

Ejemplo

import { usePreservedReference } from 'react-simplikit';
import { useState } from 'react';

function ExampleComponent() {
  const [state, setState] = useState({ key: 'value' });

  const preservedState = usePreservedReference(state);

  return <div>{preservedState.key}</div>;
}

import { usePreservedReference } from 'react-simplikit';
import { useState } from 'react';

function ExampleComponent() {
  const [state, setState] = useState({ key: 'value' });

  const preservedState = usePreservedReference(
    state,
    (a, b) => a.key === b.key
  );

  return <div>{preservedState.key}</div>;
}