Generics in React

// Generic list component
type ListProps<T> = {
  items: T[];
  renderItem: (item: T) => React.ReactNode;
  keyExtractor: (item: T) => string;
};
 
function List<T>({ items, renderItem, keyExtractor }: ListProps<T>) {
  return (
    <ul>
      {items.map((item) => (
        <li key={keyExtractor(item)}>{renderItem(item)}</li>
      ))}
    </ul>
  );
}
 
// Usage - TypeScript infers T as User
type User = { id: string; name: string; email: string };
 
const users: User[] = [
  { id: "1", name: "Alice", email: "alice@example.com" },
  { id: "2", name: "Bob", email: "bob@example.com" },
];
 
<List
  items={users}
  keyExtractor={(user) => user.id}       // user is typed as User
  renderItem={(user) => <span>{user.name}</span>}  // user is typed as User
/>

// Generic custom hook
function useLocalStorage<T>(key: string, initialValue: T) {
  const [storedValue, setStoredValue] = useState<T>(() => {
    if (typeof window === "undefined") return initialValue;
    try {
      const item = window.localStorage.getItem(key);
      return item ? (JSON.parse(item) as T) : initialValue;
    } catch {
      return initialValue;
    }
  });
 
  const setValue = (value: T | ((prev: T) => T)) => {
    const valueToStore = value instanceof Function ? value(storedValue) : value;
    setStoredValue(valueToStore);
    window.localStorage.setItem(key, JSON.stringify(valueToStore));
  };
 
  return [storedValue, setValue] as const;
}
 
// Usage - T is inferred as { theme: string; fontSize: number }
const [settings, setSettings] = useLocalStorage("settings", {
  theme: "dark",
  fontSize: 14,
});

type HasId = { id: string };
 
type TableProps<T extends HasId> = {
  data: T[];
  columns: (keyof T)[];
};
 
function Table<T extends HasId>({ data, columns }: TableProps<T>) {
  return (
    <table>
      <thead>
        <tr>{columns.map((col) => <th key={String(col)}>{String(col)}</th>)}</tr>
      </thead>
      <tbody>
        {data.map((row) => (
          <tr key={row.id}>
            {columns.map((col) => <td key={String(col)}>{String(row[col])}</td>)}
          </tr>
        ))}
      </tbody>
    </table>
  );
}
 
// Usage - T must have an id field
<Table data={users} columns={["name", "email"]} />

type SelectProps<T> = {
  options: T[];
  value: T;
  onChange: (value: T) => void;
  getLabel: (option: T) => string;
  getValue: (option: T) => string;
};
 
function Select<T>({ options, value, onChange, getLabel, getValue }: SelectProps<T>) {
  return (
    <select
      value={getValue(value)}
      onChange={(e) => {
        const selected = options.find((opt) => getValue(opt) === e.target.value);
        if (selected) onChange(selected);
      }}
    >
      {options.map((opt) => (
        <option key={getValue(opt)} value={getValue(opt)}>
          {getLabel(opt)}
        </option>
      ))}
    </select>
  );
}

function usePairedState<A, B>(initialA: A, initialB: B) {
  const [a, setA] = useState<A>(initialA);
  const [b, setB] = useState<B>(initialB);
  return { a, setA, b, setB };
}

// Production example: Generic SSE streaming hook for multiple tool types
// File: src/hooks/use-builder-generator.ts
export function useBuilderGenerator<
  TSections = Record<string, unknown>,
>(options: UseBuilderGeneratorOptions) {
  const { toolId, toolSlug, maxGenerations = 3, onSectionReceived } = options;
 
  const [streamState, setStreamState] = useState<
    BuilderStreamState<TSections>
  >(INITIAL_STREAM_STATE as BuilderStreamState<TSections>);
  const abortControllerRef = useRef<AbortController | null>(null);
 
  const handleSseEvent = useCallback(
    (event: string, data: string) => {
      try {
        if (event === 'error') {
          setStreamState((prev) => ({ ...prev, error: JSON.parse(data).error || 'Generation failed.' }));
          return;
        }
        if (event === 'done') {
          setStreamState((prev) => ({ ...prev, streamingSection: null }));
          return;
        }
        // Tool-specific section parsing via callback injection
        const parsed = onSectionReceived(event, data);
        if (parsed) {
          setStreamState((prev) => ({
            ...prev,
            sections: { ...prev.sections, ...parsed } as TSections,
            streamingSection: event,
          }));
        }
      } catch { /* ignore individual event parse errors */ }
    },
    [onSectionReceived]
  );
 
  const generate = useCallback(async (inputs: Record<string, unknown>, model: string) => {
    abortControllerRef.current?.abort();
    const controller = new AbortController();
    abortControllerRef.current = controller;
 
    setStreamState({ ...(INITIAL_STREAM_STATE as BuilderStreamState<TSections>), isStreaming: true });
 
    const csrfToken = await getCsrfToken();
    const response = await fetch(`/api/tools/${toolSlug}/generate`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': csrfToken },
      signal: controller.signal,
      body: JSON.stringify({ inputs, model }),
    });
    // ... SSE stream parsing with handleSseEvent
  }, [toolId, toolSlug, handleSseEvent]);
 
  const canGenerate = !streamState.isStreaming && streamState.generationCount < maxGenerations;
 
  return { streamState, generate, abort: () => abortControllerRef.current?.abort(), canGenerate };
}