No Functions in useEffect Dependency Arrays

Never add callback/fetch functions to useEffect dependency arrays

Source: .agents/rules/no-functions-in-effect-deps.mdc

Metadata

• alwaysApply: true

Content

No Functions in useEffect Dependency Arrays

• Do not add the function itself to a useEffect dependency array (e.g. fetchOverview, fetchAnalytics, load, or any callback from a hook).
• Depend only on values the effect logically needs (ids, query params, etc.). The effect runs when those values change; the functions are used inside the effect but are not dependencies.
• If the linter warns about missing dependencies for a function, add an // eslint-disable-next-line react-hooks/exhaustive-deps and a short comment explaining that we intentionally omit the function(s).

// ✅ Preferred: depend only on values; call functions inside the effect
useEffect(() => {
  if (!communityId || !productId) return;
  fetchOverview({ communityId, productId });
  fetchAnalytics({ communityId, productId, lastXDays: 30 });
  // eslint-disable-next-line react-hooks/exhaustive-deps -- omit fetch functions from deps
}, [communityId, productId]);

// ❌ Avoid: adding fetch/callback functions to the dependency array
useEffect(() => {
  if (!communityId || !productId) return;
  fetchOverview({ communityId, productId });
  fetchAnalytics({ communityId, productId, lastXDays: 30 });
}, [communityId, productId, fetchOverview, fetchAnalytics]);