DEV Community: Ochuko Ekrresa

Mastering LocalStorage Management with React Hooks

Ochuko Ekrresa — Sat, 28 Oct 2023 09:48:23 +0000

While building frontend applications in React, LocalStorage is often used to store data or manage application state. LocalStorage is not reactive in nature, so we usually use the useState and useEffect hooks to manage data and keep it in sync with what is stored in LocalStorage.

This article will show you how to build a custom React hook with TypeScript to manage data with LocalStorage. This custom hook allows you to get, set, and remove data. This hook will be server-side rendering (SSR) safe and can be used in server-rendered react components. This article assumes you have some knowledge of TypeScript.

TLDR: The complete source code for the hook is here.

Setup

Let’s begin with the input and output of the hook. The code snippet below is our hook definition and return type. It takes two parameters: a key and an initial value. The key is a string because LocalStorage stores keys as strings. The initial value can be of any type, but preferably a type that can be serialised and retain its original structure on deserialisation. This excludes data structures like Map, Set, etc. The initial value is also helpful because the useState value type will be inferred from it.

function useLocalStorage<T>(key:string, initialValue:T) {
  const [value, setValue] = React.useState<T | undefined>(() => initialValue);

  //...
  return [value, update, remove] as const
}

We use a useState hook to manage our LocalStorage state. This makes any LocalStorage value managed by the hook reactive as we update them with the set and remove methods. The useState hook is for state management, and LocalStorage provides state persistence.

We follow the useState model of returning an array from the hook. This allows for easily renaming the array contents when you call multiple useLocalStorage hooks in a component.

as const is a typescript technique to narrow down types to their lowest possible type. You can learn more about it here.

We initialised the useState hook by returning the initial value from the useLocalStorage hook parameters. But we may already have a value associated with the key in LocalStorage, and we want that value to be the initial value returned from the hook. So, let’s modify the useState call.

const [value, setValue] = React.useState<T | undefined>(() => {
  const localStorageValue = localStorage.getItem(key);

  return localStorageValue !== null
    ? parseJSON(localStorageValue)
    : initialValue;
});

In the useState initialisation function, we retrieve the value from LocalStorage with the key. If the value is not null, we parse the value with the parseJSON function. Otherwise, we return the initial value specified in the useLocalStorage hook arguments.

function parseJSON(value: string) {
  return value === "undefined" ? undefined : JSON.parse(value);
}

JSON.parse throws when you call it with “undefined” as an argument because it tries to parse it to undefined which is not valid JSON. That’s why we need the parseJSON function.

Updating the value

We need a function to edit and store the state value in LocalStorage.

const update = React.useCallback(
  (newValue: T) => {
    setValue(newValue);

    if (typeof newValue === "undefined") {
      localStorage.removeItem(key);
    } else {
      localStorage.setItem(key, JSON.stringify(newValue));
    }
  },
  [key]
);

If the new value is undefined, we don’t need to store it in LocalStorage because during deserialisation,JSON.parse(“undefined”) will throw an error. Instead, we remove the value stored in LocalStorage and set the state to undefined.

Removing the value

We use the LocalStorage removeItem method to remove the value, passing the key as an argument. We also update the useState value with undefined, which is the default type of the useState value.

  const update = React.useCallback(() => {
    setValue(undefined);
    localStorage.removeItem(key);
  }, [key]);

Error handling

It isn’t obvious, but errors can occur if we use this hook in its current state. In some browsers, LocalStorage is unavailable or may throw errors when you try to use it. For example, in mobile Safari, when the user is in private mode, LocalStorage.setItem throws an error.

We must wrap our LocalStorage-specific code in a try/catch block to prevent such an error. The caveat is that when a LocalStorage error occurs, the LocalStorage value goes out of sync with the useState value.

const set = React.useCallback(
  (newValue: T) => {
    try {
      setValue(newValue);
      localStorage.setItem(key, JSON.stringify(newValue));
    } catch (error) {
    }
  },
  [key]
);

const remove = React.useCallback(() => {
  try {
    setValue(undefined);
    localStorage.removeItem(key);
  } catch (error) {
  }
}, [key]);

We do not need to handle the error in the catch block. This is because setValue fires before the error occurs, so the hook value is always correct. We lose state persistence, but the hook always returns the correct value.

SSR compatibility

In its current form, our hook would only run in the browser. It will throw an error if we try to use it in a server-rendered component. This happens because React runs the useState hook on the server where LocalStorage is unavailable. Let’s bring back the useState hook.

  const [value, setValue] = React.useState<T | undefined>(() => {
    const localStorageValue = localStorage.getItem(key);

    return localStorageValue !== null
      ? JSON.parse(localStorageValue)
      : initialValue;
  });

We must remove the LocalStorage-specific code from the useState initialiser function. But that breaks our hook implementation because the initial hook value is no longer derived from LocalStorage.

Let’s derive the initial value in a useLayoutEffect hook to rectify this. React does not run useLayoutEffect on the server, so it’s perfect for our needs. We chose the useLayoutEffect hook instead of the useEffect hook to get the initial value because it runs synchronously before browser paint, unlike the useEffect hook, which runs after. Below is the updated code.

const [value, setValue] = React.useState<T | undefined>(() => initialValue);

React.useLayoutEffect(() => {
  let initialValue;

  try {
    const localStorageValue = localStorage.getItem(key);

    initialValue =
      localStorageValue !== null
        ? parseJSON(localStorageValue)
        : initialValue;

    setValue(initialValue);
  } catch (error) {
    setValue(initialValue);
  }
}, [key]);

The useState initialiser function has been changed to return the initial value passed as an argument to the hook. This keeps the state value stable during server rendering and hydration, so we don’t get hydration errors. After hydration, React runs the useLayoutEffect hook, and the state value is updated with what is in LocalStorage if there’s a value for the key.

Syncing the value across tabs

One final thing: if your web app is open on two or more tabs and you update the hook value on a tab, the other tabs do not receive the update. This is a behaviour associated with LocalStorage. To fix this, we need to subscribe to the Storage event. This event will only fire on the tabs, excluding the one where the changes were made. It’s perfect for fixing this problem.

React.useEffect(() => {
  const onStorage = (e: StorageEvent) => {
    if (e.key === key) {
      const newValue =
        e.newValue !== null ? parseJSON(e.newValue) : undefined;
      setValue(newValue);
    }
  };

  window.addEventListener("storage", onStorage);

  return () => {
    window.removeEventListener("storage", onStorage);
  };
}, [key]);

We handle the Storage event in a useEffect hook. We check if the key in the event matches the key our hook is subscribed to, and then we update the state value.

That’s all there is to creating a custom React hook with TypeScript to manage LocalStorage. You could improve on the hook by adding a custom serialiser for your data to handle data types like Maps, Sets, etc.

The complete source code for the hook is here.

Authenticating with your backend using NextAuth.js

Ochuko Ekrresa — Sun, 17 Apr 2022 18:08:39 +0000

You may be in a situation where you need to authenticate against your custom backend solution. That is, you have a backend with endpoints for authentication, and you want to use NextAuth.js to handle authentication on your Next.js frontend. In this case, the official documentation is not clear on what you need to do. This article will guide you on how to authenticate against your backend with NextAuth.js.

Check out the source code to the repo used to demonstrate the solution.

How NextAuth.js works

In NextAuth.js, the data that describes the current logged in user is stored in sessions that you can access on the frontend. You can modify the data contained in the session. More on that soon.

The NextAuth.js configuration is done by creating a file called [...nextauth].js in the pages/api/auth directory. This file is a route handler for all requests to NextAuth.js. You can make requests to NextAuth.js with the Client API or REST API. We are only going to make use of the Client API in this article.

Below is an example of a sample NextAuth.js configuration.



import NextAuth from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";

export default NextAuth({
  providers: [
    CredentialsProvider({
      id: "login",
      async authorize(credentials) {
          //...
        },
    }),
  ],
  callbacks: {
    async signIn({ user }) {
      //...
    },
    async session({ session, token }) {
        //...
      },
    async jwt({ token, user }) {
        //... 
      },
  },
  // use env variable in production
  secret: "looselipssinkships",
});

In a minute I’m going to explain the purpose of each option in the configuration object. While the configuration object can take in more options, we will only be looking at the options that are relevant to the goals of this article.

Providers

In the providers array, you specify what authentication medium to use for NextAuth.js. NextAuth.js has support for authentication using OAuth providers like Google, Facebook, and Github, and also signing in by email. You can define multiple providers in your configuration. In this article, we will use the Credentials provider.

Callbacks

Callbacks are asynchronous functions useful for hooking into specific parts of the authentication flow. We will focus on three of them in this article: signIn, session and jwt.

SignIn callback: In this callback, you can control if a user is allowed to sign in. For example, you can check the role of the user and make the appropriate response.
JWT callback: In the sign-in process, the JWT callback is invoked after the signIn callback. Here a JSON Web Token is created. You can persist more data on the token.
Session callback: In this callback, you can modify the data you want to make available to the client. During sign-in, the JWT callback is invoked before the session callback, so any information added to the token is immediately available in the session callback via the token parameter.

The picture above describes the flow of how the callbacks are invoked during the sign-in process.

Secret

This is a random string used to hash tokens, sign/encrypt cookies and generate cryptographic keys. It is required in production.

Signup and Login Implementation

I will not go into the details of my login and signup form because everyone has their unique setup. What we would discuss is:

NextAuth.js setup.
Configuration
Authentication.

NextAuth.js Setup

Here’s how you get up and running with NextAuth.js:

Install NextAuth.js, npm install next-auth or yarn add next-auth.
Add a NEXTAUTH_URL environment variable. Set it to the canonical url of your project. For example:



NEXTAUTH_URL="http://localhost:3000"

In your _app.js file, wrap your app with the SessionProvider.



import { SessionProvider } from "next-auth/react";

export default function App({ Component, pageProps }) {
  return (
    <SessionProvider session={pageProps.session}>
      <Component {...pageProps} />
    </SessionProvider>
  );
}

Configuration

Below is the configuration used for this article.



import NextAuth from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";
import * as Auth from "../../../lib/auth";

export default NextAuth({
  providers: [
    CredentialsProvider({
      id: "login",
      async authorize(credentials) {
        try {
          return await Auth.login(credentials);
        } catch (error) {
          throw new Error(error.message);
        }
      },
    }),
    CredentialsProvider({
      id: "signup",
      async authorize(credentials) {
        try {
          return await Auth.signup(credentials);
        } catch (error) {
          throw new Error(error.message);
        }
      },
    }),
  ],
  callbacks: {
    async signIn({ user }) {
      if (user) return true;

      return false;
    },
    async session({ session }) {
      session.user.isLoggedIn = true;
      return session;
    },
    async jwt({ token, user }) {
      return token;
    },
  },
  // use env variable in production
  secret: "looselipssinkships",
});

There are two providers defined using CredentialsProvider from NextAuth.js. One for login, and one for signup. The Credentials provider is what you need when you want to authenticate against your backend. Each of the providers has an id field. The id field is an identifier for each provider definition.

The authorize function in the provider definition contains the logic for authentication. As you can see, the function has a parameter called credentials. When you make an authentication request to NextAuth.js, this parameter represents the authentication credentials. After that, you send the credentials to your backend for authentication. The function should return an object on success or null on error. You could also throw an error.

The result of the authorize function can be accessed in the signIn callback via the user parameter. The callback returns true if the object is defined. Otherwise, it returns false.

Take note of the session callback. The session object can be modified here in order to add data that can be used in the frontend. In the configuration above, we added an isLoggedIn property to the user property of the session object.

Finally, don't forget to set the secret option value in production. If you don't, your app will throw an error. You can set an environment variable, NEXTAUTH_SECRET, in place of the secret option.

Authentication

For signup and login, the process is essentially the same. In your signup/login form, import the signIn function from next-auth/react module. Invoke the function in your form submit handler passing in the provider id and authentication credentials.

The signIn callback is a function in the NextAuth.js configuration where you handle the result of the authorize function, while the signIn function is a function you invoke to make an authentication request to the NextAuth.js handler.

The example below showcases making a request to NextAuth.js with the signIn function.



 import { signIn } from "next-auth/react";

 const response = await signIn("login", {
    email: formData.get("email"),
    password: formData.get("password"),
    redirect: false,
  });

The first argument, login, specifies that the provider definition with id login should handle the request.

Setting the redirect option to false prevents a page reload so you can handle the sign-in response in your form submit handler. It is optional.

The signIn function returns a promise which resolves to this object:



{
  error: string | undefined;
  status: number;
  ok: boolean;
  url: string | null;
}

With this object, you can make a decision on whether the user’s authentication was successful or not.

So this is everything about authenticating with your backend using NextAuth.js. I hope this article would prove useful to you. Enjoy!

Intl: One-Liner Solutions to Everyday Problems

Ochuko Ekrresa — Sat, 20 Jun 2020 19:43:40 +0000

Setup a Typescript Project with ESlint, Prettier, EditorConfig and Husky

Ochuko Ekrresa — Thu, 13 Feb 2020 15:20:23 +0000

This post shows the bare essentials of how I set up a typescript project. There are lots of articles on adding ESlint to a javascript project, but not as much for typescript projects. So I hope to bridge this gap.

We are going to cover the following tools

Typescript
ESlint
Prettier
Editorconfig
Husky

Typescript

In your project folder, make sure you have initialized npm. I use yarn but you can use npm.

yarn init -y

Then install typescript as a dev dependency.

yarn add typescript --dev

Let's configure typescript.

npx typescript --init

This creates a tsconfig.json file in your project. You may choose what settings to enable. I'll post a link to my repo at the end of this article so you'll see what settings I like to work with.

ESlint

Eslint is primarily used for linting our code. That is, ensuring our code follows best practices regarding quality. Let's install it.

yarn add eslint --dev

Eslint should be installed as a dev dependency as it is not needed in production. Let's configure it.

npx eslint --init

On running this command, Eslint will ask us a few questions to determine what config packages to install.

How would you like to use ESlint? I usually go with the third option; To check syntax, find problems, and enforce code style
What type of modules does your project use? JavaScript modules (import/export)
Which framework does your project use? None of these
Does your project use TypeScript? Yes
Where does your code run? Node
How would you like to define a style for your project? Use a popular style guide
Which style guide do you want to follow? Airbnb: https://github.com/airbnb/javascript. You can choose any of the three. I'm more comfortable with Airbnb.
What format do you want your config file to be in? JSON

You'll be prompted to install some packages
@typescript-eslint/eslint-plugin@latest eslint-config-airbnb-base@latest eslint@^5.16.0 || ^6.1.0 eslint-plugin-import@^2.18.2 @typescript-eslint/parser@latest

Choose yes.

If you use yarn, choose yes. Then when the packages are installed, delete the package-lock.json and run yarn to reinstall the packages.

You will notice a new file, .eslintrc.json has been created. It should look like this:

{
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": [
        "airbnb-base"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint"
    ],
    "rules": {
    }
}

At this point, I turn off the no-console rule 🤓. You absolutely don't have to do this.

Add the code below right under airbnb-base in the extends array in the .eslintrc.json.

plugin:import/errors,
plugin:import/warnings,
plugin:import/typescript

Also add the rule below to the rules object.

    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "jsx": "never",
        "ts": "never",
        "tsx": "never"
      }
    ]

This config is necessary for the eslint-plugin-import package which is responsible for ensuring your import statements are resolved correctly. You can add more configuration using the rules object in the .eslintrc.json file.

Prettier

Prettier takes care of our code formatting. Run this command.

yarn add prettier eslint-config-prettier eslint-plugin-prettier --dev

The command above installs the following packages

prettier: provides the core prettier functionality.
eslint-config-prettier: turns off all rules that are unnecessary or might clash with Prettier.
eslint-plugin-prettier: runs Prettier as an ESLint rule.

Add this "prettier/prettier": "error" to the rules object.
Then add the code below to the extends array.

   "prettier/@typescript-eslint",
   "plugin:prettier/recommended"

At this point, your .eslintrc.json should look like this:

{
  "env": {
    "es6": true,
    "node": true
  },
  "extends": [
    "airbnb-base",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:import/typescript",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended"
  ],
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "plugins": ["@typescript-eslint"],
  "rules": {
    "prettier/prettier": "error",
    "no-console": "off",
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "jsx": "never",
        "ts": "never",
        "tsx": "never"
      }
    ]
  }
}

Editorconfig

EditorConfig helps maintain consistent coding styles for multiple developers working on the same project across various editors and IDEs. For Visual Studio Code you need to install the extension. Hers's my configuration below.

# stop .editorconfig files search on current file.
root = true

# Unix-style newlines with a newline ending every file
[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
indent_style = tab
indent_size = 2
trim_trailing_whitespace = true

Husky

Husky enables us to tap into git hooks to run commands. A popular git hook is the pre-commit hook. Using this hook, we will prevent bad code from being committed to our codebase. Let's install some packages.

npx mrm lint-staged

The command above installs husky and lint-staged and configures them in the package.json. Lint-stage runs ESlint on our files that are staged in git.

Change the lint-staged config in the package.json to

 "*.{ts,js}": "eslint --cache --fix"

Let's also install pretty-quick. We will use this package with husky to format our files before committing. Pretty-quick uses prettier to format staged files before committing.

yarn add pretty-quick --dev

Add the code below to your scripts in package.json.

"lint":"pretty-quick --staged && lint-staged"

Then add the code below to husky

"hooks": {
   "pre-commit": "yarn lint"
}

Thus our code is prettified and linted before being committed.

So that's all there is to set up a typescript project with ESlint, Prettier, Editorconfig and Husky (at least according to me). Also, don't forget to add a .prettierrc file (Prettier vs-code extension >= 3.2.0 requires it to format your code), .gitignore, and a .eslintignore file. Cheers!😀😀

Here is the link to the GitHub template which you can use to scaffold a typescript project.

Reference: https://blog.theodo.com/2019/08/why-you-should-use-eslint-prettier-and-editorconfig-together/