---
title: "rerender defer reads"
description: "Don't subscribe to dynamic state (searchParams, localStorage) if you only read it inside callbacks."
type: skill
canonical_url: https://claudary.paisolsolutions.com/skills/rerender-defer-reads
source: "Claudary"
difficulty: intermediate
author: "Claude Code Knowledge Pack"
date: 2026-07-10T11:46:04.709Z
license: CC-BY-4.0
attribution: "rerender defer reads — Claudary (https://claudary.paisolsolutions.com/skills/rerender-defer-reads)"
---

# rerender defer reads
Don't subscribe to dynamic state (searchParams, localStorage) if you only read it inside callbacks.

## Overview

---
title: Defer State Reads to Usage Point
impact: MEDIUM
impactDescription: avoids unnecessary subscriptions
tags: rerender, searchParams, localStorage, optimization
---

## Defer State Reads to Usage Point

Don't subscribe to dynamic state (searchParams, localStorage) if you only read it inside callbacks.

**Incorrect (subscribes to all searchParams changes):**

```tsx
function ShareButton({ chatId }: { chatId: string }) {
  const searchParams = useSearchParams()

  const handleShare = () => {
    const ref = searchParams.get('ref')
    shareChat(chatId, { ref })
  }

  return <button onClick={handleShare}>Share</button>
}
```

**Correct (reads on demand, no subscription):**

```tsx
function ShareButton({ chatId }: { chatId: string }) {
  const handleShare = () => {
    const params = new URLSearchParams(window.location.search)
    const ref = params.get('ref')
    shareChat(chatId, { ref })
  }

  return <button onClick={handleShare}>Share</button>
}
```

---

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