Hone logo
Hone
Problems

React Query Parameter Hook with TypeScript

Building reusable hooks is a cornerstone of efficient React development. This challenge asks you to create a useQueryParams hook that manages query parameters in the URL, allowing components to easily read and update them. This hook will simplify URL manipulation and data fetching based on query parameters, promoting cleaner and more maintainable code.

Problem Description

You need to implement a custom React hook called useQueryParams. This hook should:

  1. Initialize: When the hook is first mounted, it should parse the current URL's query parameters and store them in a state variable.
  2. Read: Provide a way for components to access the current query parameters as an object.
  3. Update: Offer a function to update individual query parameters or the entire set of query parameters. Updating a parameter should automatically update the URL.
  4. Remove: Provide a function to remove a specific query parameter from the URL.
  5. Handle Empty Values: When a query parameter is updated to an empty string, it should be removed from the URL.
  6. Handle No Initial Params: If the URL has no query parameters initially, the hook should return an empty object.

Key Requirements:

  • The hook must be written in TypeScript.
  • It should use the useLocation and useNavigate hooks from react-router-dom (or equivalent if not using React Router).
  • The URL updates should be handled correctly, ensuring the browser history is updated.
  • The hook should be memoized to prevent unnecessary re-renders.

Expected Behavior:

  • The hook should return an object representing the query parameters.
  • The updateQueryParams function should accept either a single key-value pair or an object of key-value pairs to update.
  • The removeQueryParams function should accept a single key to remove.
  • The URL should be updated whenever the query parameters change.
  • The component using the hook should re-render whenever the query parameters change.

Edge Cases to Consider:

  • URL with no query parameters.
  • Updating a query parameter to an empty string.
  • Updating multiple query parameters at once.
  • Removing a query parameter that doesn't exist.
  • Handling special characters in query parameter values (e.g., spaces, ampersands). While full URL encoding isn't strictly required, ensure basic functionality isn't broken by these characters.

Examples

Example 1:

Input: Initial URL: "https://example.com/?page=2&sort=name"
Output: { page: "2", sort: "name" }
Explanation: The hook parses the query parameters from the URL and returns them as an object.

Example 2:

Input:  Initial URL: "https://example.com/"
Output: {}
Explanation: The URL has no query parameters, so the hook returns an empty object.

Example 3:

Input: Initial URL: "https://example.com/?search=test&limit=10"
Function call: updateQueryParams({ search: "newTest" })
Output: { search: "newTest", limit: "10" }
URL becomes: "https://example.com/?search=newTest&limit=10"
Explanation: The 'search' parameter is updated, and the URL is updated accordingly.

Example 4:

Input: Initial URL: "https://example.com/?param1=value1&param2="
Function call: updateQueryParams({ param2: "" })
Output: { param1: "value1" }
URL becomes: "https://example.com/?param1=value1"
Explanation: Updating a parameter to an empty string removes it from the URL.

Constraints

  • The hook must be compatible with React Router v6 (or a similar routing library).
  • The hook should be performant and avoid unnecessary re-renders. Memoization is expected.
  • The URL updates should be synchronous.
  • The hook should handle a maximum of 100 query parameters. (This is a practical limit for most use cases).
  • The values of query parameters should be treated as strings.

Notes

  • Consider using URLSearchParams to parse and manipulate the query string.
  • Think about how to efficiently update the URL without causing unnecessary re-renders in the component using the hook.
  • Pay close attention to edge cases, especially when dealing with empty values and removing parameters.
  • The useNavigate hook is crucial for updating the URL. Ensure you're using it correctly to maintain browser history.
  • Focus on creating a clean, reusable, and well-documented hook.
Loading editor...
typescript