Skip to main content

Destructure Hook Results Explicitly

Source: .agents/rules/destructure-hook-results.mdc

Content​

Destructure Hook Results Explicitly

  • When using hooks, destructure only what you need from the hook result.
  • Do not assign the entire hook result to a single variable (e.g., const data = useHook()).
  • Explicitly destructure the properties you use so it's clear what dependencies the component has on the hook.
// ❌ Avoid: unclear what's being used
const payment = usePhysicalProductPayment({ checkoutData });
if (!payment) return null;
// ... later: payment.selectedPaymentMethod, payment.communityData, etc.

// ✅ Prefer: explicit destructuring shows dependencies
const paymentHookResult = usePhysicalProductPayment({ checkoutData });
if (!paymentHookResult) return null;

const {
  selectedPaymentMethod,
  communityData,
  productId,
  fetchPaymentState,
  handleStripePayment,
  // ... only what you actually use
} = paymentHookResult;

Benefits:

  • Makes dependencies explicit and visible
  • Easier to see what the component needs from the hook
  • Better for refactoring and understanding component behavior
  • TypeScript will catch if you destructure something that doesn't exist