description: Imported skill rerender_defer_reads from vercel name: rerender_defer_reads signature: 234050a77faf50cb306be10a9e15bd4421134ab5907e75f13e6d78e2bd262dc9 source: /a0/tmp/skills_research/vercel/skills/react-best-practices/rules/rerender-defer-reads.md

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>
}