Leaderboard Deploy agents

Ensure all hooks (useEffect, useCallback, useMemo) explicitly list every dependency used within their callback functions. Missing dependencies can lead to stale closures, unexpected behaviors, and hard-to-debug issues.

Example of proper dependency management:

// ❌ Incomplete dependencies
useEffect(() => {
  if (textareaRef.current) {
    const finalValue = domValue || localStorageInput || "";
    setInput(finalValue);
    adjustHeight();
  }
}, []); // Missing localStorageInput and setInput

// ✅ Complete dependencies
useEffect(() => {
  if (textareaRef.current) {
    const finalValue = domValue || localStorageInput || "";
    setInput(finalValue);
    adjustHeight();
  }
}, [localStorageInput, setInput]);

// Same applies for useCallback
const handleAction = useCallback(
  async (index: number, action: string) => {
    const item = items[index];
    if (!item) return;
    onAction(item);
    refreshData();
  },
  [items, onAction, refreshData] // List all used dependencies
);

Key points: