URL state with searchParams in NextJS - Performance & Optimization

Performance: URL state with searchParams

MEDIUM IMPACT

This affects page load speed and interaction responsiveness by how URL parameters are read and updated in the browser.

Updating URL state on every user input change

NextJS

import { useRouter } from 'next/navigation';
import { useState, useEffect } from 'react';

export default function Search() {
  const router = useRouter();
  const [value, setValue] = useState('');

  useEffect(() => {
    const handler = setTimeout(() => {
      const params = new URLSearchParams(window.location.search);
      params.set('query', value);
      router.replace(`?${params.toString()}`);
    }, 300);
    return () => clearTimeout(handler);
  }, [value]);

  return <input type="text" value={value} onChange={e => setValue(e.target.value)} />;
}

Debounces URL updates to reduce frequency of router.replace calls, improving responsiveness and reducing re-renders.

📈 Performance GainSingle reflow per debounce interval, smoother input interaction, fewer history updates.

Updating URL state on every user input change

NextJS

import { useRouter } from 'next/navigation';

export default function Search() {
  const router = useRouter();
  const onChange = (e) => {
    const params = new URLSearchParams(window.location.search);
    params.set('query', e.target.value);
    router.replace(`?${params.toString()}`);
  };
  return <input type="text" onChange={onChange} />;
}

Updates URL on every keystroke causing many router.replace calls, triggering multiple re-renders and history updates.

📉 Performance CostTriggers multiple reflows and repaints, blocks interaction responsiveness (INP) during rapid typing.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Update URL on every keystroke	Many router.replace calls causing repeated DOM updates	Multiple reflows per keystroke	High paint cost due to frequent updates	[X] Bad
Debounced URL update after typing stops	Single router.replace call per debounce interval	Single reflow per debounce	Lower paint cost, smoother interaction	[OK] Good

Rendering Pipeline

Reading and updating URL searchParams affects the browser's layout and paint stages when the URL change triggers component re-renders.

→Layout

→Paint

→Composite

⚠️ BottleneckLayout due to repeated re-renders and router.replace calls causing DOM updates

Core Web Vital Affected

INP

This affects page load speed and interaction responsiveness by how URL parameters are read and updated in the browser.

Optimization Tips

1Avoid updating URL searchParams on every keystroke to prevent excessive re-renders.

2Use debounce or throttle to batch URL updates during user input.

3Minimize router.replace calls to improve interaction responsiveness (INP).

Performance Quiz - 3 Questions

What is the main performance problem with updating URL searchParams on every keystroke?

A It causes many re-renders and layout recalculations, slowing input responsiveness.

B It increases the initial page load time significantly.

C It causes the browser to block network requests.

D It reduces the size of the JavaScript bundle.

DevTools: Performance

How to check: Record a performance profile while typing in the input. Look for frequent scripting and layout events triggered by URL updates.

What to look for: High frequency of layout and paint events during input indicates poor URL update strategy.