Breaking News: Grepper is joining You.com. Read the official announcement!

react localstorage hook

Add Answer

Himanshu Jangid answered on December 15, 2021 Popularity 3/10 Helpfulness 2/10

answer react localstorage hook

related use localStorage hook

related use localstorage react hook

react localstorage hook

Comment

import { useState } from "react";

export const useLocalStorage = () => {
  const [value, setValue] = useState<string | null>(null);

  const setItem = (key: string, value: string) => {
    localStorage.setItem(key, value);
    setValue(value);
  };

  const getItem = (key: string) => {
    const value = localStorage.getItem(key);
    setValue(value);
    return value;
  };

  const removeItem = (key: string) => {
    localStorage.removeItem(key);
    setValue(null);
  };

  return { value, setItem, getItem, removeItem };
};

Popularity 3/10 Helpfulness 2/10 Language javascript

Source: dayvster.com

Tags: hook javascript local-storage

Link to this answer
Share Copy Link

Contributed on Dec 27 2023

Himanshu Jangid

0 Answers Avg Quality 2/10

Closely Related Answers

use localStorage hook

Comment

import { useCallback, useEffect, useState } from "react";

export const useLocalStorage = (key, initialValue) => {
  const initialize = (key) => {
    try {
      const item = localStorage.getItem(key);
      if (item && item !== "undefined") {
        return JSON.parse(item);
      }

      localStorage.setItem(key, JSON.stringify(initialValue));
      return initialValue;
    } catch {
      return initialValue;
    }
  };

  const [state, setState] = useState(null); // problem is here

  // solution is here....
  useEffect(()=>{
    setState(initialize(key));
  },[]);

  const setValue = useCallback(
    (value) => {
      try {
        const valueToStore = value instanceof Function ? value(storedValue) : value;
        setState(valueToStore);
        localStorage.setItem(key, JSON.stringify(valueToStore));
      } catch (error) {
        console.log(error);
      }
    },
    [key, setState]
  );

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

  return [state, setValue, remove];
};

Popularity 9/10 Helpfulness 3/10 Language javascript

Source: stackoverflow.com

Tags: hook

Link to this answer
Share Copy Link

Contributed on Dec 15 2021

Encouraging Echidna

0 Answers Avg Quality 2/10

use localstorage react hook

Comment

  const [name, setName] = useLocalStorage("name", "Bob");

Popularity 9/10 Helpfulness 2/10 Language javascript

Source: usehooks.com

Tags: hook

Link to this answer
Share Copy Link

Contributed on Apr 28 2022

Busy Bee

0 Answers Avg Quality 2/10

react localstorage hook

Contents

More Related Answers

react localstorage hook

Closely Related Answers

use localStorage hook

use localstorage react hook

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.