---
title: Avoid Chained Effects
impact: MEDIUM
impactDescription: prevents cascading re-renders from effect chains
tags: effect, rerender, optimization, custom
---

# Avoid Chained Effects

Cascading effects cause multiple re-renders. Batch updates in event handlers instead.

```tsx
// BAD: cascading effects
useEffect(() => {
  if (card?.gold) setGoldCardCount(c => c + 1)
}, [card])
useEffect(() => {
  if (goldCardCount > 3) { setRound(r => r + 1); setGoldCardCount(0) }
}, [goldCardCount])

// GOOD: batch in event handler
function handlePlaceCard(nextCard) {
  setCard(nextCard)
  if (nextCard.gold) {
    if (goldCardCount < 3) setGoldCardCount(goldCardCount + 1)
    else { setGoldCardCount(0); setRound(round + 1) }
  }
}
```