10 React Component Patterns That Ship 5x Faster with AI Agents

"use client";

import { createContext, useContext, useState, ReactNode } from "react";
import { ChevronDown } from "lucide-react";

// Context for accordion state management
type AccordionContextType = {
  activeId: string | null;
  setActiveId: (id: string | null) => void;
};

const AccordionContext = createContext<AccordionContextType | null>(null);

function useAccordionContext() {
  const context = useContext(AccordionContext);
  if (!context) {
    throw new Error("Accordion compound components must be used within <Accordion>");
  }
  return context;
}

// Root component
export function Accordion({ children }: { children: ReactNode }) {
  const [activeId, setActiveId] = useState<string | null>(null);

  return (
    <AccordionContext.Provider value={{ activeId, setActiveId }}>
      <div className="space-y-2 w-full">{children}</div>
    </AccordionContext.Provider>
  );
}

// Item component
Accordion.Item = function AccordionItem({
  id,
  children,
}: {
  id: string;
  children: ReactNode;
}) {
  const { activeId } = useAccordionContext();
  const isActive = activeId === id;

  return (
    <div
      className={`rounded-xl border transition-colors ${
        isActive
          ? "border-primary/50 bg-primary/5"
          : "border-border bg-card/30"
      }`}
    >
      {children}
    </div>
  );
};

// Trigger component
Accordion.Trigger = function AccordionTrigger({
  id,
  children,
}: {
  id: string;
  children: ReactNode;
}) {
  const { activeId, setActiveId } = useAccordionContext();
  const isActive = activeId === id;

  return (
    <button
      onClick={() => setActiveId(isActive ? null : id)}
      className="w-full px-6 py-4 flex items-center justify-between text-left hover:bg-primary/5 transition-colors"
    >
      <span className="font-semibold">{children}</span>
      <ChevronDown
        className={`h-5 w-5 text-primary transition-transform ${
          isActive ? "rotate-180" : ""
        }`}
      />
    </button>
  );
};

// Content component
Accordion.Content = function AccordionContent({
  id,
  children,
}: {
  id: string;
  children: ReactNode;
}) {
  const { activeId } = useAccordionContext();
  const isActive = activeId === id;

  if (!isActive) return null;

  return (
    <div className="px-6 pb-4 text-muted-foreground animate-in slide-in-from-top-2">
      {children}
    </div>
  );
};

// Usage example:
// <Accordion>
//   <Accordion.Item id="item-1">
//     <Accordion.Trigger id="item-1">What is compound components?</Accordion.Trigger>
//     <Accordion.Content id="item-1">A flexible pattern...</Accordion.Content>
//   </Accordion.Item>
// </Accordion>

import { useState, useEffect, useRef, useCallback } from "react";

/**
 * Debounces a value with configurable delay and cleanup
 * Optimized to prevent unnecessary re-renders
 */
export function useDebounce<T>(value: T, delay: number = 500): T {
  const [debouncedValue, setDebouncedValue] = useState<T>(value);
  const timeoutRef = useRef<NodeJS.Timeout | null>(null);

  useEffect(() => {
    // Clear existing timeout
    if (timeoutRef.current) {
      clearTimeout(timeoutRef.current);
    }

    // Set new timeout
    timeoutRef.current = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    // Cleanup on unmount or value change
    return () => {
      if (timeoutRef.current) {
        clearTimeout(timeoutRef.current);
      }
    };
  }, [value, delay]);

  return debouncedValue;
}

/**
 * Advanced debounce hook with cancel and flush controls
 */
export function useDebouncedCallback<T extends (...args: any[]) => any>(
  callback: T,
  delay: number = 500
) {
  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
  const callbackRef = useRef(callback);

  // Keep callback ref up to date
  useEffect(() => {
    callbackRef.current = callback;
  }, [callback]);

  const debouncedCallback = useCallback(
    (...args: Parameters<T>) => {
      if (timeoutRef.current) {
        clearTimeout(timeoutRef.current);
      }

      timeoutRef.current = setTimeout(() => {
        callbackRef.current(...args);
      }, delay);
    },
    [delay]
  );

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

  const flush = useCallback(() => {
    if (timeoutRef.current) {
      clearTimeout(timeoutRef.current);
      callbackRef.current();
    }
  }, []);

  // Cleanup on unmount
  useEffect(() => {
    return () => {
      if (timeoutRef.current) {
        clearTimeout(timeoutRef.current);
      }
    };
  }, []);

  return { debouncedCallback, cancel, flush };
}

// Usage example:
// const searchTerm = useDebounce(inputValue, 300);
//
// const { debouncedCallback } = useDebouncedCallback(
//   (query: string) => fetchResults(query),
//   500
// );