URL state with searchParams in NextJS - Step-by-Step Execution

Concept Flow - URL state with searchParams

User opens page

↓

Parse URL searchParams

↓

Initialize component state from searchParams

↓

Render UI with state

↓

User interacts (e.g., changes filter)

↓

Update state

↓

Update URL searchParams

↓

Re-render UI with new state

The app reads URL searchParams to set initial state, then updates both state and URL when user interacts.

Execution Sample

NextJS

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

export default function Filter() {
  const searchParams = useSearchParams();
  const router = useRouter();
  const [filter, setFilter] = useState('');

  useEffect(() => {
    setFilter(searchParams.get('filter') || '');
  }, [searchParams]);

  function updateFilter(newFilter) {
    const params = new URLSearchParams(searchParams);
    if (newFilter) params.set('filter', newFilter);
    else params.delete('filter');
    router.replace(`?${params.toString()}`);
  }

  return <input value={filter} onChange={e => {
    setFilter(e.target.value);
    updateFilter(e.target.value);
  }} />;
}

This component reads 'filter' from URL, shows it in input, and updates URL when input changes.

Execution Table

Step	Action	searchParams.get('filter')	State filter	URL after router.replace	Rendered input value
1	Page loads with URL '?filter=apple'	'apple'	'apple'	'?filter=apple'	'apple'
2	User types 'banana' in input	'apple'	'banana'	'?filter=banana'	'banana'
3	User clears input (empty string)	'banana'	''	'' (no filter param)	''
4	User types 'cherry'	null	'cherry'	'?filter=cherry'	'cherry'
5	User reloads page with '?filter=cherry'	'cherry'	'cherry'	'?filter=cherry'	'cherry'
6	User types 'date'	'cherry'	'date'	'?filter=date'	'date'
7	User deletes filter param manually from URL	null	''	''	''
8	User types 'eggfruit'	null	'eggfruit'	'?filter=eggfruit'	'eggfruit'
9	Exit	N/A	N/A	N/A	N/A

💡 User stops interacting; URL and state stay synced.

Variable Tracker

Variable	Start	After 1	After 2	After 3	After 4	After 5	After 6	After 7	After 8	Final
searchParams.get('filter')	null	'apple'	'banana'	null	'cherry'	'cherry'	'date'	null	'eggfruit'	'eggfruit'
State filter	''	'apple'	'banana'	''	'cherry'	'cherry'	'date'	''	'eggfruit'	'eggfruit'
URL after router.replace	''	'?filter=apple'	'?filter=banana'	''	'?filter=cherry'	'?filter=cherry'	'?filter=date'	''	'?filter=eggfruit'	'?filter=eggfruit'

Key Moments - 3 Insights

Why does the input show the old filter value before typing?

At step 2 in execution_table, the input value updates only after the state changes, which happens after reading the old searchParams. The component uses the URL param as initial state, then updates state on input.

What happens if the user clears the input? Does the URL keep the filter param?

At step 3, when input is empty, the code deletes the 'filter' param from URL, so the URL no longer has it, and state filter becomes empty string.

How does the URL update without a full page reload?

The router.replace method updates the URL in the browser without reloading the page, keeping the app state and UI in sync.

Visual Quiz - 3 Questions

Look at the execution_table at step 4. What is the URL after router.replace?

A '' (no filter param)

B '?filter=cherry'

C '?filter=banana'

D '?filter=apple'

💡 Hint

Check the 'URL after router.replace' column at step 4 in execution_table.

According to variable_tracker, what is the state filter after step 6?

A 'cherry'

B ''

C 'date'

D 'eggfruit'

💡 Hint

Look at the 'State filter' row and the 'After 6' column in variable_tracker.

If the user manually removes the filter param from the URL, what will the input show next?

A '' (empty string)

B 'date'

C 'apple'

D 'eggfruit'

💡 Hint

See step 7 in execution_table and the 'State filter' value.

Concept Snapshot

URL state with searchParams in Next.js:
- Use useSearchParams() to read URL query params.
- Initialize component state from searchParams.
- On user input, update state and URL with router.replace.
- Removing a param deletes it from URL.
- URL and UI stay in sync without page reload.

Full Transcript

This example shows how a Next.js component uses the URL's searchParams to keep UI state in sync with the URL. When the page loads, it reads the 'filter' parameter from the URL and sets it as the input's value. When the user types in the input, the component updates its state and changes the URL's searchParams using router.replace, which updates the browser URL without reloading the page. Clearing the input removes the filter parameter from the URL. This keeps the UI and URL synchronized, allowing sharing or bookmarking of the current filter state.