DEV Community

Cover image for React Custom Hooks (useLocal)
sundarbadagala
sundarbadagala

Posted on

1

React Custom Hooks (useLocal)

INTRO πŸ””

Hello World! πŸ‘‹
Today we are discussing another custom hook named useLocalπŸ”₯.

NoteπŸ“Œ : Technically this one can't be considered as a hook πŸ™ƒ because as per the custom hook definition If we create one function using react hooks then it is called a Custom Hook πŸ™‚. But in this code, we are not using any react hooks πŸ˜•. So we can't call it a custom hook 😟 but for our convenience, we are now considering it as a custom hook πŸ˜‰.

USAGE πŸ””

If you are a Frontend DeveloperπŸ§‘πŸ»β€πŸ’», you must know the Local StorageπŸ“¦ & Session StorageπŸ“¦. These are browser properties that help to store and access the data in sessions.

Every time using local storage for getting data as localStorage.getItem('item') and for setting data as localStorage.setItem('item', data) is very lengthy and it is not readable. To overcome this problem, we created one helper(custom hook) called useLocal (particularly for localStorage)

CODE πŸ””

export const useLocal = (itemName) => {
  const setLocal = (data) => {
    localStorage.setItem(itemName, JSON.stringify(data));
  };
  const getLocal = () => {
    return JSON.parse(localStorage.getItem(itemName));
  };
  const removeLocal = () => {
    localStorage.removeItem(itemName);
  };

  return [setLocal, getLocal, removeLocal];
}
Enter fullscreen mode Exit fullscreen mode

USE CASE πŸ””

import React, { useEffect } from "react";
import { useLocal } from "./useLocal";

function Index() {
  const [setLocal, geLocal, removeLocal] = useLocal("app_token");

  useEffect(() => {

    setLocal("k8axga83alf991z90a9a0aaf1");

    return () => removeLocal();
  }, []);

  const handleGet = () => {
    const token = geLocal();
    console.log(token);
  };

  return (
    <div>
      <button onClick={handleGet}>Get Token</button>
    </div>
  );
}

export default Index;
Enter fullscreen mode Exit fullscreen mode

CONCLUSION πŸ””

By using the same method we can create a custom hook for Session Storage also.

I hope this post gives you some information. We will meet in next post with another new custom hook.

Peace πŸ™‚

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

nextjs tutorial video

Youtube Tutorial Series πŸ“Ί

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series πŸ‘€

Watch the Youtube series

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay