How We Store User Prefs in Local Storage Using Hooks in Next.js

Our users wanted to store app preferences so that every time they use , they can start with the same settings applied. engyne.ai In our case, it was these 3 settings: Author, Publish Status, and Sorting Order. Ideally, once you select these, they should be selected permanently, even if you navigate away or log out. To do this, we decided to build a custom hook that would load and store user preferences from local storage. Since the user can have multiple projects, the preferences should be saved per project. Setting up the Local Storage The name of the key would be: . The subdomain is the project name. For example - engyne-user-prefs-{{subdomain}} engyne-user-prefs-hackernoon. This way, each key would have its own . This type represents the settings that will be stored. UserPrefsType export type UserPrefsType = { sortType: string, publishingStatusFilter: string, authorFilter: string, } Creating the React Hook Now that we know the key/value to store in the local storage, here’s how we create the React hook called to both save and get value from the local storage. useUserPrefs Note that you can only store strings in the local storage, so all JSON has to be stringified when saving and parsed when retrieving. We also specify a default value in case the project to get the user prefs is not specified. //hooks/useUserPrefs.ts import { useEffect, useState } from "react"; import { PostPublishStatus, PostSortType } from "/types"; export type UserPrefsType = { sortType: string, publishingStatusFilter: string, authorFilter: string, } const defaultUserPrefs: UserPrefsType = { sortType: PostSortType.NEWEST, publishingStatusFilter: PostPublishStatus.ALL, authorFilter: "", } const getLocalStorage = (key: string): UserPrefsType => { let currentValue; try { currentValue = JSON.parse( localStorage.getItem(key) || JSON.stringify(defaultUserPrefs) ); } catch (error) { return defaultUserPrefs; } return currentValue; } const useUserPrefs = (subdomain: string) => { const key = `engyne-user-prefs-${subdomain}` const [value, setValue] = useState (() => { if (!subdomain) return defaultUserPrefs; return getLocalStorage(key) }); useEffect(() => { if (!subdomain) return; const currentValue = getLocalStorage(key); setValue(currentValue); }, [subdomain]) useEffect(() => { if (!subdomain || !value) return; localStorage.setItem(key, JSON.stringify(value)) }, [value]) const updateUserPrefs = (userPref: Partial ) => { if (!subdomain) return; const currentValue = getLocalStorage(key); const updatedUserPrefs = { ...currentValue, ...userPref } setValue(updatedUserPrefs); } return { userPrefs: value, updateUserPrefs }; }; export default useUserPrefs; Use the Hook in the Application Now, we can import this hook into the application and get the saved author value from the local storage. First, we set up the hook to get the specified project’s user prefs, then we set the author value using the . userPrefs.authorFilter The is used whenever the user selects a different author name. updateUserPrefs import { Select, } from "@chakra-ui/react"; const subdomain = "hackernoon" const { userPrefs, updateUserPrefs } = useUserPrefs(subdomain) const authorsData = ["Author 1", "Author 2"] // in component { updateUserPrefs({ authorFilter: evt.target.value }) }} value={userPrefs.authorFilter}> {authorsData.map((author: any, i: number) => ( {author.name} ))} This is what the saved user prefs look like in local storage.