useConditionalEffect

useConditionalEffect es un Hook de React que ejecuta efectos de forma condicional según una función de predicado. Te permite controlar cuándo se ejecutan los efectos con criterios adicionales a los cambios en las dependencias.

Interfaz

function useConditionalEffect<T extends DependencyList>(
  effect: EffectCallback,
  deps: DependencyList,
  condition: (prevDeps: T | undefined, currentDeps: T) => boolean
): void;

Parámetros

• effectrequired · EffectCallback
  

  El callback del efecto que debe ejecutarse.

• depsrequired · DependencyList
  

  Arreglo de dependencias, similar al de useEffect.

• conditionrequired · (prevDeps: T | undefined, currentDeps: T) => boolean
  

  Función que determina si el efecto debe ejecutarse según las dependencias anteriores y actuales.
  - En el renderizado inicial, prevDeps será undefined. Tu función condition debe gestionar este caso.
  - Si quieres que el efecto se ejecute en el renderizado inicial, devuelve true cuando prevDeps sea undefined.
  - Si no quieres que el efecto se ejecute en el renderizado inicial, devuelve false cuando prevDeps sea undefined.

Valor de retorno

Esta función no devuelve ningún valor.

Ejemplo

import { useConditionalEffect } from 'react-simplikit';

function Component() {
  const [count, setCount] = useState(0);

  // Ejecuta el efecto solo cuando count aumenta
  useConditionalEffect(
    () => {
      console.log(`El contador aumentó a ${count}`);
    },
    [count],
    (prevDeps, currentDeps) => {
      // Ejecuta solo cuando count está definido y ha aumentado
      return prevDeps && currentDeps[0] > prevDeps[0];
    }
  );

  return (
    <button onClick={() => setCount(prev => prev + 1)}>
      Incrementar: {count}
    </button>
  );
}