Hooks Documentation

Complete reference for all custom React hooks.

Data Hooks

useDataFetch

Fetch data with caching and retry logic.

const { data, isLoading, error, refetch } = useDataFetch<T>(
  url: string | null,
  options?: UseDataFetchOptions<T>
);

Options:

• enabled: Enable/disable fetching (default: true)
• refetchInterval: Auto-refetch interval in ms
• onSuccess: Success callback
• onError: Error callback
• cache: Caching options
• timeout: Request timeout
• retries: Number of retries
• retryDelay: Delay between retries

Example:

function DataComponent() {
  const { data, isLoading, error } = useDataFetch('/api/users', {
    cache: { strategy: 'cache-first', ttl: 60000 },
    retries: 3,
    refetchInterval: 5000,
  });

  if (isLoading) return <LoadingState />;
  if (error) return <Error message={error.message} />;

  return <div>{JSON.stringify(data)}</div>;
}

useForm

Form handling with validation.

const {
  values,
  handleChange,
  handleSubmit,
  errors,
  isSubmitting,
  reset,
} = useForm<T>(options);

Options:

• initialValues: Initial form values
• validation: Validation rules
• onSubmit: Submit handler

Example:

function MyForm() {
  const { values, handleChange, handleSubmit, errors } = useForm({
    initialValues: { email: '', password: '' },
    validation: {
      email: { required: true, email: true },
      password: { required: true, minLength: 8 },
    },
    onSubmit: async (values) => {
      await submitForm(values);
    },
  });

  return (
    <form onSubmit={handleSubmit}>
      <input name="email" value={values.email} onChange={handleChange} />
      {errors.email && <span>{errors.email}</span>}
      <button type="submit">Submit</button>
    </form>
  );
}

State Hooks

usePersistedState

State that persists to localStorage.

const [state, setState] = usePersistedState<T>(
  key: string,
  initialValue: T,
  options?: PersistenceOptions
);

Example:

function SettingsComponent() {
  const [settings, setSettings] = usePersistedState('settings', {
    theme: 'light',
    language: 'en',
  });

  return (
    <div>
      <select
        value={settings.theme}
        onChange={(e) =>
          setSettings({ ...settings, theme: e.target.value })
        }
      >
        <option value="light">Light</option>
        <option value="dark">Dark</option>
      </select>
    </div>
  );
}

useStore

Connect to state store.

const [state, setState] = useStore<T>(store: StateStore<T>);

Example:

import { createStore } from '@/lib/state-management';

const userStore = createStore({ name: '', email: '' });

function UserComponent() {
  const [user, setUser] = useStore(userStore);

  return (
    <div>
      <input
        value={user.name}
        onChange={(e) => setUser({ ...user, name: e.target.value })}
      />
    </div>
  );
}

UI Hooks

useAnimation

Animation hook with scroll trigger.

const ref = useAnimation(options);

Options:

• type: 'fade' | 'slide' | 'scale'
• direction: 'up' | 'down' | 'left' | 'right'
• duration: Animation duration in ms
• delay: Delay in ms
• trigger: 'mount' | 'scroll'
• disabled: Disable animation

Example:

function AnimatedComponent() {
  const ref = useAnimation({
    type: 'fade',
    direction: 'up',
    duration: 300,
    trigger: 'scroll',
  });

  return <div ref={ref}>Animated content</div>;
}

useMobile

Mobile device detection.

const { isMobile, isTouch, viewport } = useMobile();

Example:

function ResponsiveComponent() {
  const { isMobile, viewport } = useMobile();

  return (
    <div>
      {isMobile ? (
        <MobileLayout />
      ) : (
        <DesktopLayout />
      )}
      <p>Viewport: {viewport.width}x{viewport.height}</p>
    </div>
  );
}

useAccessibility

Accessibility utilities.

const { reducedMotion, announce } = useAccessibility();

Example:

function AccessibleComponent() {
  const { reducedMotion, announce } = useAccessibility();

  useEffect(() => {
    announce('Page loaded', 'polite');
  }, []);

  return (
    <div style={{ animation: reducedMotion ? 'none' : 'fadeIn 0.3s' }}>
      Content
    </div>
  );
}

Utility Hooks

useI18n

Internationalization hook.

const { locale, t, changeLocale } = useI18n();

Example:

function LocalizedComponent() {
  const { locale, t, changeLocale } = useI18n();

  return (
    <div>
      <p>{t('common.loading')}</p>
      <button onClick={() => changeLocale('de')}>
        Switch to German
      </button>
    </div>
  );
}

useClipboard

Clipboard operations.

const { copy, read, copied, clipboardText } = useClipboard();

Example:

function CopyButton() {
  const { copy, copied } = useClipboard();

  return (
    <button onClick={() => copy('Text to copy')}>
      {copied ? 'Copied!' : 'Copy'}
    </button>
  );
}

useKeyboardShortcut

Register keyboard shortcuts.

useKeyboardShortcut(shortcut: KeyboardShortcut);

Example:

function SearchComponent() {
  useKeyboardShortcut({
    key: 'k',
    ctrl: true,
    action: () => {
      openSearch();
    },
    description: 'Open search',
  });

  return <div>Press Ctrl+K to search</div>;
}

useNavigation

Navigation utilities.

const { navigate, goBack, canGoBack, pathname } = useNavigation();

Example:

function NavigationComponent() {
  const { navigate, goBack, canGoBack } = useNavigation();

  return (
    <div>
      <button onClick={() => navigate('/about')}>Go to About</button>
      {canGoBack && (
        <button onClick={goBack}>Go Back</button>
      )}
    </div>
  );
}

Performance Hooks

usePerformance

Performance monitoring.

const { metrics, recordMetric } = usePerformance();

Example:

function PerformanceComponent() {
  const { recordMetric } = usePerformance();

  useEffect(() => {
    const start = performance.now();
    // Do work
    const duration = performance.now() - start;
    recordMetric('component_render', duration);
  }, []);

  return <div>Component</div>;
}

useMemory

Memory usage monitoring.

const { memory, checkMemory } = useMemory();

Example:

function MemoryComponent() {
  const { memory } = useMemory();

  return (
    <div>
      {memory && (
        <p>
          Memory: {(memory.used / 1024 / 1024).toFixed(2)} MB /{' '}
          {(memory.total / 1024 / 1024).toFixed(2)} MB
        </p>
      )}
    </div>
  );
}

Async Hooks

useRetry

Retry logic with exponential backoff.

const { retry, isRetrying, retryCount } = useRetry(
  fn: () => Promise<T>,
  options?: RetryOptions
);

Example:

function RetryComponent() {
  const { retry, isRetrying } = useRetry(
    async () => {
      const response = await fetch('/api/data');
      if (!response.ok) throw new Error('Failed');
      return response.json();
    },
    { maxRetries: 3, delay: 1000 }
  );

  return (
    <div>
      <button onClick={retry} disabled={isRetrying}>
        {isRetrying ? 'Retrying...' : 'Retry'}
      </button>
    </div>
  );
}

Debounce/Throttle Hooks

useDebounce

Debounce value changes.

const debouncedValue = useDebounce(value, delay);

Example:

function SearchComponent() {
  const [query, setQuery] = useState('');
  const debouncedQuery = useDebounce(query, 300);

  useEffect(() => {
    if (debouncedQuery) {
      performSearch(debouncedQuery);
    }
  }, [debouncedQuery]);

  return (
    <input
      value={query}
      onChange={(e) => setQuery(e.target.value)}
    />
  );
}

useThrottle

Throttle value changes.

const throttledValue = useThrottle(value, limit);

Example:

function ScrollComponent() {
  const [scrollY, setScrollY] = useState(0);
  const throttledScrollY = useThrottle(scrollY, 100);

  useEffect(() => {
    const handleScroll = () => setScrollY(window.scrollY);
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return <div>Scroll: {throttledScrollY}</div>;
}

Observer Hooks

useIntersectionObserver

Intersection Observer hook.

const { ref, isIntersecting, entry } = useIntersectionObserver(options);

Example:

function LazyComponent() {
  const { ref, isIntersecting } = useIntersectionObserver({
    threshold: 0.1,
  });

  return (
    <div ref={ref}>
      {isIntersecting ? <HeavyComponent /> : <LoadingState />}
    </div>
  );
}

Feature Flags

useFeatureFlag

Feature flag hook.

const enabled = useFeatureFlag('feature-name');

Example:

function FeatureComponent() {
  const showNewFeature = useFeatureFlag('new-feature');

  return (
    <div>
      {showNewFeature && <NewFeature />}
      <OldFeature />
    </div>
  );
}

Monitoring

useMonitoring

Monitoring hook.

const monitoring = useMonitoring();

Example:

function MonitoredComponent() {
  useMonitoring();

  return <div>Component</div>;
}