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
Problem: Complex functional updates cause unnecessary re-renders.
// ❌ 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.
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>
}