URL state with searchParams in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does the component update URL searchParams?

Consider a Next.js component that updates the URL's searchParams when a user selects a filter. What happens when the user selects a new filter?

NextJS

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

export default function FilterComponent() {
  const searchParams = useSearchParams();
  const router = useRouter();
  const [filter, setFilter] = useState(searchParams.get('filter') || 'all');

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

  return (
    <select value={filter} onChange={e => onChangeFilter(e.target.value)} aria-label="Select filter">
      <option value="all">All</option>
      <option value="active">Active</option>
      <option value="completed">Completed</option>
    </select>
  );
}

A The URL's searchParams update only after a manual page refresh.

B The URL's searchParams update but cause a full page reload, losing component state.

C The component state updates but the URL's searchParams remain unchanged.

D The URL's searchParams update with the new filter value without a page reload, and the component state updates accordingly.

💡 Hint

Think about how router.replace works in Next.js App Router.

Using router.replace updates the URL without reloading the page. The component state updates with setFilter, so the UI and URL stay in sync.

📝 Syntax

intermediate

Identify the correct way to read searchParams in a Next.js client component

Which code snippet correctly reads the 'page' parameter from the URL searchParams inside a Next.js client component?

A const page = new URL(window.location).searchParams.page;

B const searchParams = useSearchParams(); const page = searchParams.get('page');

C const page = useRouter().query.page;

D const page = window.location.search.get('page');

💡 Hint

Remember that useSearchParams returns a URLSearchParams object.

useSearchParams is the Next.js hook to access URL search parameters in client components. It returns a URLSearchParams instance, so you use .get() to read a parameter.

🔧 Debug

advanced

Why does the URL not update when calling router.replace with new searchParams?

Given this code snippet inside a Next.js client component, why does the URL not update as expected?

const searchParams = useSearchParams();
const router = useRouter();

function updateCategory(cat) {
  const params = searchParams;
  params.set('category', cat);
  router.replace(`?${params.toString()}`);
}

A Because searchParams is immutable and calling set on it does not change the original object.

B Because router.replace requires a full URL, not just searchParams string.

C Because useRouter cannot be used inside client components.

D Because the function updateCategory is missing an async keyword.

💡 Hint

Check if searchParams can be modified directly.

useSearchParams returns an immutable URLSearchParams object. You must create a new URLSearchParams instance to modify parameters. Directly calling set on the original does not change it.

❓ state_output

advanced

What is the value of 'filter' after URL changes externally?

In a Next.js client component, the state variable filter is initialized from useSearchParams().get('filter'). If the user manually changes the URL's filter parameter in the browser address bar, what happens to the filter state variable?

NextJS

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

export default function Filter() {
  const searchParams = useSearchParams();
  const [filter, setFilter] = useState(searchParams.get('filter') || 'all');

  return <div>Current filter: {filter}</div>;
}

A The filter state remains unchanged until the component re-mounts or reloads.

B The filter state updates immediately when the URL changes externally.

C The filter state resets to 'all' automatically on URL change.

D The component throws an error because state and URL are out of sync.

💡 Hint

Think about how React state works with initial values.

React state initialized from a value does not update automatically when that value changes externally. The filter state stays the same until explicitly updated or the component re-renders with new initial state.

🧠 Conceptual

expert

Why use URL searchParams for state in Next.js App Router?

What is the main advantage of syncing UI state with URL searchParams in a Next.js App Router application?

A It prevents any client-side state updates, forcing all changes to reload the page.

B It automatically improves server-side rendering performance by caching searchParams.

C It allows users to share and bookmark the current UI state via the URL, enabling better navigation and persistence.

D It disables browser back and forward buttons to avoid inconsistent UI states.

💡 Hint

Consider how URLs help users share or return to specific views.

Using URL searchParams to store UI state means the URL reflects the current view. This lets users bookmark, share, or reload the page and keep the same state, improving user experience and navigation.