Storing and Testing State in localStorage with React

Harpreet Kaur — Sun, 04 Feb 2024 10:37:29 +0000

Managing state in a React application is a common challenge, and when it comes to persisting that state across sessions, localStorage is a handy solution. In this post, we'll explore a custom React hook, useSemiPersistentState, that simplifies the process of storing and testing state in localStorage.

The `useSemiPersistentState` Hook

import { useEffect, useState, Dispatch, SetStateAction } from "react";

const useSemiPersistentState = <T>(
  key: string,
  initialValue: T
): [T, Dispatch<SetStateAction<T>>] => {
  const [state, setState] = useState<T>(() => {
    try {
      const storedState = localStorage.getItem(key);
      return storedState ? JSON.parse(storedState) : initialValue;
    } catch (error) {
      // Handle parsing error, fallback to initial value
      console.error("Error parsing localStorage data:", error);
      return initialValue;
    }
  });

  useEffect(() => {
    // Save the value to localStorage whenever it changes
    localStorage.setItem(key, JSON.stringify(state));
  }, [key, state]);

  return [state, setState];
};

export { useSemiPersistentState };

The useSemiPersistentState hook makes it easy to manage state in your React components while ensuring its persistence between page reloads.

Usage and Example

Let's consider a scenario where we want to persist the user's theme preference. Here's how you can use the hook:

import { useSemiPersistentState } from '<relative-path-to-your-hook-file>';

const ThemeSelector = () => {
  const [theme, setTheme] = useSemiPersistentState('theme', 'light');

  const toggleTheme = () => {
    const newTheme = theme === 'light' ? 'dark' : 'light';
    setTheme(newTheme);
  };

  return (
    <div>
      <p>Current Theme: {theme}</p>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
};

export default ThemeSelector;

In this example, the ThemeSelector component effortlessly maintains the theme preference in localStorage, allowing the theme to persist across page reloads.

Testing Made Simple

Testing stateful components becomes easier with this hook. You can mock the localStorage object in your tests to simulate different scenarios and ensure that your components behave as expected.

Conclusion

The useSemiPersistentState hook provides an elegant solution for handling semi-persistent state in React applications. Whether you're building a theme switcher or saving user preferences, this hook simplifies the process and enhances the user experience.

Sync React State with URL Search Parameters

Harpreet Kaur — Tue, 30 Jan 2024 16:30:19 +0000

Effortlessly synchronizing a React component's state with URL search parameters can be a common requirement when working with React applications that utilize React Router. In such scenarios, the useQueryParamsState hook provides an elegant solution, streamlining the management of URL query parameters.

Installation

To get started, ensure you have React and React Router installed in your project:



npm install react react-router-dom

'useQueryParamsState' hook



import { useState, useEffect, Dispatch, SetStateAction } from "react";
import { useLocation } from "react-router-dom";

type UseQueryParamsStateReturnType<T> = [T, Dispatch<SetStateAction<T>>];

export const useQueryParamsState = <T>(
  param: string,
  initialState: T
): UseQueryParamsStateReturnType<T> => {
  const location = useLocation();

  // State for managing the value derived from the query parameter
  const [value, setValue] = useState<T>(() => {
    if (typeof window === "undefined") return initialState;

    // Parse query parameter value from the URL
    const { search } = window.location;
    const searchParams = new URLSearchParams(search);
    const paramValue = searchParams.get(param);

    return paramValue !== null ? JSON.parse(paramValue) as T : initialState;
  });

  useEffect(() => {
    const currentSearchParams = new URLSearchParams(window.location.search);

    // Update the query parameter with the current state value
    if (value !== null && value !== "") {
      currentSearchParams.set(param, JSON.stringify(value));
    } else {
      // Remove the query parameter if the value is null or empty
      currentSearchParams.delete(param);
    }

    // Update the URL with the modified search parameters
    const newUrl = [window.location.pathname, currentSearchParams.toString()]
      .filter(Boolean)
      .join("?");

    // Update the browser's history without triggering a page reload
    window.history.replaceState(window.history.state, "", newUrl);
  }, [param, value, location.pathname]);

  return [value, setValue];
};

Usage

Import the useQueryParamsState hook into your component:



import { useQueryParamsState } from './path-to/useQueryParamsState';

Use the hook within your component:



const MyComponent: React.FC = () => {
  const [paramValue, setParamValue] = useQueryParamsState<string>('myQueryParam', 'default');

  // Use paramValue and setParamValue as needed in your component
  return (
       // Your component JSX
  );

Parameters

param (string): The name of the query parameter you want to sync with the component state.
initialState (T): The initial state for the component. This will be used when the query parameter is not present in the URL.

Return Value

The hook returns a tuple containing the current value of the query parameter and a function to update that value.



type UseQueryParamsStateReturnType<T> = [T, Dispatch<SetStateAction<T>>];

Example

Consider a component that manages a search term based on a query parameter:



import { useQueryParamsState } from './path-to/useQueryParamsState';

const SearchComponent: React.FC = () => {
  const [searchTerm, setSearchTerm] = useQueryParamsState<string>('search', '');

  return (
    <div>
      <label>Search Term:</label>
      <input
        type="text"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
      />
      <p>Search Term: {searchTerm}</p>
    </div>
  );
};

In this example, the SearchComponent automatically syncs its state with the 'search' query parameter in the URL, allowing users to bookmark or share specific search states.

Demo

Explore the interactive demo on CodeSandbox to see the useQueryParamsState hook in action:

Explanation

The useQueryParamsState hook leverages React's state and effect hooks along with React Router's useLocation to manage the state of a specific query parameter. It handles parsing and updating the URL, providing a clean and reusable solution for components that need to interact with query parameters in a React Router environment. Developers can use this hook to create components that maintain their state based on URL query parameters without manually handling the complexities of URL manipulation.

Thanks For Reading 😉

DEV Community: Harpreet Kaur