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.

Practice

1. What does the useSearchParams hook in Next.js App Router do?

easy

A. It fetches data from an API based on URL parameters.

B. It changes the URL path without reloading the page.

C. It reads and lets you access query parameters from the URL.

D. It manages local component state unrelated to the URL.

Solution

1. Step 1: Understand the purpose of useSearchParams

   The hook is designed to read query parameters from the URL, making it easy to access values like ?page=2 or ?filter=active.

2. Step 2: Compare with other options

   Changing URL path or fetching data are different tasks; useSearchParams specifically reads URL search parameters.

3. Final Answer:

   It reads and lets you access query parameters from the URL. -> Option C

4. Quick Check:

   useSearchParams reads URL query parameters = C [OK]

Hint: Remember: useSearchParams reads URL queries, not changes path [OK]

Common Mistakes:

• Confusing useSearchParams with navigation or data fetching hooks
• Thinking it changes the URL instead of reading it
• Assuming it manages local state unrelated to URL

2. Which of the following is the correct way to import and use useSearchParams in a Next.js component?

easy

A. import { useSearchParams } from 'next/navigation'; const params = useParams();

B. import useSearchParams from 'next/router'; const params = useSearchParams();

C. import { useSearchParams } from 'next/router'; const params = useSearchParams();

D. import { useSearchParams } from 'next/navigation'; const params = useSearchParams();

Solution

1. Step 1: Identify correct import source

   In Next.js App Router, useSearchParams is imported from 'next/navigation', not 'next/router'.

2. Step 2: Check usage syntax

   The hook is called as useSearchParams(), returning the params object. Using useParams() is incorrect here.

3. Final Answer:

   import { useSearchParams } from 'next/navigation'; const params = useSearchParams(); -> Option D

4. Quick Check:

   Correct import and call = D [OK]

Hint: Import from 'next/navigation' and call useSearchParams() [OK]

Common Mistakes:

• Importing from 'next/router' instead of 'next/navigation'
• Calling useParams() instead of useSearchParams()
• Using default import instead of named import

3. Given this Next.js component code snippet, what will be logged if the URL is ?page=3&sort=asc?

import { useSearchParams } from 'next/navigation';
export default function Page() {
  const searchParams = useSearchParams();
  console.log(searchParams.get('page'));
  console.log(searchParams.get('sort'));
  return null;
}

medium

A. 3 and asc

B. page and sort

C. null and null

D. undefined and undefined

Solution

1. Step 1: Understand useSearchParams behavior

   useSearchParams returns an object with a .get() method to read query parameters by name.

2. Step 2: Check the URL query parameters

   The URL has ?page=3 and ?sort=asc, so searchParams.get('page') returns '3' and searchParams.get('sort') returns 'asc'.

3. Final Answer:

   3 and asc -> Option A

4. Quick Check:

   searchParams.get('page') = '3', get('sort') = 'asc' [OK]

Hint: Use .get('key') to read exact query values [OK]

Common Mistakes:

• Expecting keys instead of values
• Confusing null with undefined for missing params
• Not calling .get() method on searchParams

4. What is wrong with this Next.js component code that tries to read a search parameter?

import { useSearchParams } from 'next/navigation';
export default function Page() {
  const params = useSearchParams;
  const filter = params.get('filter');
  return <div>Filter: {filter}</div>;
}

medium

A. The import statement is incorrect; it should be from 'next/router'.

B. useSearchParams is not called as a function, so params is the function itself.

C. The component returns invalid JSX syntax with <div> tags.

D. The get method does not exist on the params object.

Solution

1. Step 1: Check how useSearchParams is used

   The code assigns params = useSearchParams without parentheses, so params is the function itself, not the returned object.

2. Step 2: Understand consequence of missing parentheses

   Calling params.get('filter') fails because params is a function, not the searchParams object with .get() method.

3. Final Answer:

   useSearchParams is not called as a function, so params is the function itself. -> Option B

4. Quick Check:

   Missing () after useSearchParams causes error = A [OK]

Hint: Always call useSearchParams() with parentheses [OK]

Common Mistakes:

• Forgetting parentheses when calling hooks
• Importing from wrong module
• Misunderstanding JSX syntax for div

5. You want to build a Next.js page that shows a list filtered by a search term from the URL query parameter search. Which approach correctly updates the displayed list when the URL changes without a full page reload?

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

export default function SearchPage() {
  const searchParams = useSearchParams();
  const [searchTerm, setSearchTerm] = useState('');

  // Which code below correctly updates searchTerm when URL changes?

  // A:
  // useEffect(() => {
  //   setSearchTerm(searchParams.get('search') || '');
  // }, [searchParams]);

  // B:
  // setSearchTerm(searchParams.get('search') || '');

  // C:
  // useEffect(() => {
  //   setSearchTerm(searchParams.search || '');
  // }, [searchParams]);

  // D:
  // useEffect(() => {
  //   setSearchTerm(searchParams.get('searchTerm') || '');
  // }, [searchParams]);

  return <div>Search: {searchTerm}</div>;
}

hard

A. Use useEffect with dependency on searchParams and call searchParams.get('search').

B. Call setSearchTerm directly without useEffect.

C. Use useEffect but access searchParams.search property (which does not exist).

D. Use useEffect but get 'searchTerm' key instead of 'search'.

Solution

1. Step 1: Understand reactivity to URL changes

   useSearchParams returns a new object when URL changes, so useEffect with [searchParams] dependency runs on URL updates.

2. Step 2: Correctly read the query parameter

   The parameter key is 'search', so use searchParams.get('search'). Accessing searchParams.search or wrong keys will fail.

3. Final Answer:

   Use useEffect with dependency on searchParams and call searchParams.get('search'). -> Option A

4. Quick Check:

   useEffect + searchParams.get('search') updates state on URL change = B [OK]

Hint: Use useEffect with searchParams dependency and .get('search') [OK]

Common Mistakes:

• Calling setState outside useEffect causing infinite loops
• Accessing non-existent properties on searchParams
• Using wrong query parameter keys