How to work with query parameters in React?

// React Router v6
import { useSearchParams } from 'react-router-dom';
 
function App() {
  const [searchParams, setSearchParams] = useSearchParams();
  const query = searchParams.get('search');
  
  return (
    <div>
      <p>Search query: {query}</p>
      <button onClick={() => setSearchParams({ search: 'new query' })}>
        Change query
      </button>
    </div>
  );
}

import { useSearchParams } from 'react-router-dom';
 
function SearchPage() {
  // Get current parameters and function to change them
  const [searchParams, setSearchParams] = useSearchParams();
  
  // Get parameter values
  const query = searchParams.get('search') || '';
  const page = searchParams.get('page') || '1';
  
  // Search change handler
  const handleSearch = (newQuery) => {
    setSearchParams({ search: newQuery, page: '1' });
  };
  
  // Page change handler
  const handlePageChange = (newPage) => {
    setSearchParams({ search: query, page: newPage });
  };
  
  return (
    <div>
      <input 
        value={query}
        onChange={(e) => handleSearch(e.target.value)}
        placeholder="Search..."
      />
      <p>Page: {page}</p>
      <button onClick={() => handlePageChange(String(Number(page) + 1))}>
        Next page
      </button>
    </div>
  );
}

import { useState, useEffect } from 'react';
import queryString from 'query-string';
 
function SearchComponent() {
  // Parse current parameters from URL
  const parsed = queryString.parse(window.location.search);
  const [query, setQuery] = useState(parsed.search || '');
  
  // Update URL when query changes
  const updateUrl = (newQuery) => {
    const newParams = queryString.stringify({ search: newQuery });
    window.history.pushState({}, '', `?${newParams}`);
  };
  
  return (
    <div>
      <input 
        value={query}
        onChange={(e) => {
          setQuery(e.target.value);
          updateUrl(e.target.value);
        }}
        placeholder="Search..."
      />
    </div>
  );
}

import { useState, useCallback, useEffect } from 'react';
 
function useQueryParam(key) {
  // Function to get parameter value
  const getParam = useCallback(() => {
    const params = new URLSearchParams(window.location.search);
    return params.get(key) || '';
  }, [key]);
  
  // State to store the value
  const [value, setValue] = useState(getParam());
  
  // Function to update parameter
  const updateParam = useCallback((newValue) => {
    const params = new URLSearchParams(window.location.search);
    
    if (newValue) {
      params.set(key, newValue);
    } else {
      params.delete(key);
    }
    
    window.history.pushState(
      {}, 
      '', 
      `${window.location.pathname}?${params.toString()}`
    );
    
    setValue(newValue);
  }, [key]);
  
  // Listen for URL changes
  useEffect(() => {
    const handlePopState = () => setValue(getParam());
    window.addEventListener('popstate', handlePopState);
    return () => window.removeEventListener('popstate', handlePopState);
  }, [getParam]);
  
  return [value, updateParam];
}
 
// Usage
function SearchComponent() {
  const [search, setSearch] = useQueryParam('search');
  
  return (
    <input 
      value={search}
      onChange={(e) => setSearch(e.target.value)}
      placeholder="Search..."
    />
  );
}

// With React Router
const [searchParams] = useSearchParams();
 
// Get all parameters at once
const allParams = Object.fromEntries(searchParams.entries());
console.log(allParams); // { search: 'react', page: '1' }
 
// Check if parameter exists
const hasFilter = searchParams.has('filter');

const [searchParams, setSearchParams] = useSearchParams();
 
// Preserve existing parameters when updating
const updatePage = (newPage) => {
  const current = Object.fromEntries(searchParams.entries());
  setSearchParams({ ...current, page: newPage });
};

const [searchParams] = useSearchParams();
 
// Use useEffect to react to changes
useEffect(() => {
  const currentQuery = searchParams.get('search');
  // Perform search when query changes
  if (currentQuery) {
    fetchResults(currentQuery);
  }
}, [searchParams]); // Dependency on searchParams

// ❌ Mistake — parameters are always strings
const page = searchParams.get('page');
const nextPage = page + 1; // '11' instead of 2 if page='1'
 
// ✅ Correct — convert to number
const page = Number(searchParams.get('page') || '1');
const nextPage = page + 1; // 2 if page='1'

// ❌ Mistake — parameter might be missing
const query = searchParams.get('search');
const firstLetter = query.charAt(0); // Error if query=null
 
// ✅ Correct — check existence
const query = searchParams.get('search') || '';
const firstLetter = query.charAt(0); // Safe