generate-hook

Génération Custom Hook React

Tu es un développeur React senior. Tu dois générer un custom hook React avec TypeScript, tests et documentation.

Arguments

$ARGUMENTS

Arguments :

• Nom du hook (ex: useDebounce, useLocalStorage, useFetch)
• (Optionnel) Description du comportement

Exemple : /react:generate-hook useDebounce ou /react:generate-hook useFetch "Hook pour fetch avec cache"

MISSION

Étape 1 : Structure du Hook

src/
└── hooks/
    ├── index.ts
    └── {hookName}/
        ├── index.ts
        ├── {hookName}.ts
        ├── {hookName}.types.ts
        └── {hookName}.test.ts

Étape 2 : Types

// src/hooks/{hookName}/{hookName}.types.ts

/**
 * Options pour le hook {hookName}
 */
export interface {HookName}Options {
  /**
   * Délai en millisecondes
   * @default 500
   */
  delay?: number;

  /**
   * Activer/désactiver le hook
   * @default true
   */
  enabled?: boolean;

  /**
   * Callback appelé lors du changement
   */
  onChange?: (value: unknown) => void;
}

/**
 * Retour du hook {hookName}
 */
export interface {HookName}Return<T> {
  /**
   * La valeur actuelle
   */
  value: T;

  /**
   * Fonction pour mettre à jour la valeur
   */
  setValue: (value: T | ((prev: T) => T)) => void;

  /**
   * Indique si le hook est en cours de traitement
   */
  isPending: boolean;

  /**
   * Réinitialiser à la valeur initiale
   */
  reset: () => void;
}

Étape 3 : Implémentation - Exemples de Hooks Courants

useDebounce

// src/hooks/useDebounce/useDebounce.ts
import { useState, useEffect, useCallback, useRef } from 'react';

export interface UseDebounceOptions {
  delay?: number;
  leading?: boolean;
}

export interface UseDebounceReturn<T> {
  debouncedValue: T;
  isPending: boolean;
  cancel: () => void;
  flush: () => void;
}

export function useDebounce<T>(
  value: T,
  options: UseDebounceOptions = {}
): UseDebounceReturn<T> {
  const { delay = 500, leading = false } = options;

  const [debouncedValue, setDebouncedValue] = useState<T>(
    leading ? value : (undefined as T)
  );
  const [isPending, setIsPending] = useState(false);
  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
  const valueRef = useRef(value);

  useEffect(() => {
    valueRef.current = value;
  }, [value]);

  useEffect(() => {
    setIsPending(true);

    if (leading && timeoutRef.current === null) {
      setDebouncedValue(value);
    }

    timeoutRef.current = setTimeout(() => {
      setDebouncedValue(value);
      setIsPending(false);
      timeoutRef.current = null;
    }, delay);

    return () => {
      if (timeoutRef.current) {
        clearTimeout(timeoutRef.current);
      }
    };
  }, [value, delay, leading]);

  const cancel = useCallback(() => {
    if (timeoutRef.current) {
      clearTimeout(timeoutRef.current);
      timeoutRef.current = null;
    }
    setIsPending(false);
  }, []);

  const flush = useCallback(() => {
    if (timeoutRef.current) {
      clearTimeout(timeoutRef.current);
      timeoutRef.current = null;
    }
    setDebouncedValue(valueRef.current);
    setIsPending(false);
  }, []);

  return { debouncedValue, isPending, cancel, flush };
}