---
title: "rerender dependencies"
description: "Specify primitive dependencies instead of objects to minimize effect re-runs."
type: skill
canonical_url: https://claudary.paisolsolutions.com/skills/rerender-dependencies
source: "Claudary"
difficulty: intermediate
author: "Claude Code Knowledge Pack"
date: 2026-07-10T11:46:04.709Z
license: CC-BY-4.0
attribution: "rerender dependencies — Claudary (https://claudary.paisolsolutions.com/skills/rerender-dependencies)"
---

# rerender dependencies
Specify primitive dependencies instead of objects to minimize effect re-runs.

## Overview

---
title: Narrow Effect Dependencies
impact: LOW
impactDescription: minimizes effect re-runs
tags: rerender, useEffect, dependencies, optimization
---

## Narrow Effect Dependencies

Specify primitive dependencies instead of objects to minimize effect re-runs.

**Incorrect (re-runs on any user field change):**

```tsx
useEffect(() => {
  console.log(user.id)
}, [user])
```

**Correct (re-runs only when id changes):**

```tsx
useEffect(() => {
  console.log(user.id)
}, [user.id])
```

**For derived state, compute outside effect:**

```tsx
// Incorrect: runs on width=767, 766, 765...
useEffect(() => {
  if (width < 768) {
    enableMobileMode()
  }
}, [width])

// Correct: runs only on boolean transition
const isMobile = width < 768
useEffect(() => {
  if (isMobile) {
    enableMobileMode()
  }
}, [isMobile])
```

---

Source: [Claudary](https://claudary.paisolsolutions.com/skills/rerender-dependencies) · https://claudary.paisolsolutions.com