Docs
CodeRabbit
Cloudflare
AG Grid
SerpAPI
Netlify
OpenRouter
Neon
WorkOS
Clerk
Electric
PowerSync
Sentry
Railway
Prisma
Strapi
Unkey
CodeRabbit
Cloudflare
AG Grid
SerpAPI
Netlify
OpenRouter
Neon
WorkOS
Clerk
Electric
PowerSync
Sentry
Railway
Prisma
Strapi
Unkey
Integrations

DRAFT: Optimize Search Parameter Performance

Final Destination: docs/router/framework/react/how-to/optimize-search-param-performance.md
Progressive Series Position: Advanced Level (Power User Patterns) - Guide #7
Depends On: setup-basic-search-params.md, navigate-with-search-params.md
Status: Ready for implementation - performance patterns available


Content Staged from navigate-with-search-params.md

Performance Issues with Functional Updates

Problem: Complex functional updates cause unnecessary re-renders.

tsx
// ❌ Wrong - complex computation in render
<Link search={(prev) => {
  // Expensive computation on every render
  const result = expensiveCalculation(prev)
  return { ...prev, computed: result }
}}>
  Update
</Link>

// ✅ Correct - memoize or use callback
const updateSearch = useCallback((prev) => {
  const result = expensiveCalculation(prev)
  return { ...prev, computed: result }
}, [])

<Link search={updateSearch}>Update</Link>

Problem: Calling navigate during component render causes infinite loops.

tsx
function ProblematicComponent() {
  const navigate = useNavigate()

  // ❌ Wrong - navigate during render
  if (someCondition) {
    navigate({ search: { redirect: true } })
  }

  return <div>Content</div>
}

function FixedComponent() {
  const navigate = useNavigate()

  // ✅ Correct - navigate in effect
  useEffect(() => {
    if (someCondition) {
      navigate({ search: { redirect: true } })
    }
  }, [someCondition, navigate])

  return <div>Content</div>
}

Implementation Notes

Additional Content Needed:

  • Search parameter selectors to prevent unnecessary re-renders
  • Debouncing search input updates
  • Memoization strategies for expensive search computations
  • React.memo usage with search parameters
  • useMemo patterns for derived search state
  • Search parameter batching techniques
  • Performance monitoring and profiling search params
  • Bundle size optimization strategies

Cross-References to Add:

  • Link to setup-basic-search-params.md for foundation
  • Link to navigate-with-search-params.md for navigation patterns
  • Link to search-params-in-forms.md for debouncing forms
  • Forward link to debug-search-param-issues.md for debugging performance

README Update Required:

  • Mark guide as completed in progressive series
  • Uncomment "Common Next Steps" in related guides