use localStorage hook

How to use localStorage hook in your React code?

localStorage is a built-in object in JavaScript that allows you to store small amounts of data locally in the user's browser. It can be useful in various situations, such as storing user preferences or caching data for faster page load times.

Using the localStorage hook in React

In order to use localStorage in your React code, you can create a custom hook that wraps around the localStorage API. Here's an example:

import { useState } from 'react';

function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    const storedValue = localStorage.getItem(key);
    return storedValue !== null ? JSON.parse(storedValue) : initialValue;
  });

  const setStoredValue = (newValue) => {
    setValue(newValue);
    localStorage.setItem(key, JSON.stringify(newValue));
  };

  return [value, setStoredValue];
}

Here, we define a custom hook called useLocalStorage that takes in a key and an initial value. It uses React's useState hook to create a state variable called value, which is initially set to the value returned by localStorage.getItem with the specified key. If there is no stored value for that key, it defaults to the initial value passed in.

The hook also defines a function called setStoredValue, which updates the state value and stores it in localStorage using the specified key.

To use this hook in your React component, you can simply call it like this:

import React from 'react';
import useLocalStorage from './useLocalStorage';

function App() {
  const [count, setCount] = useLocalStorage('count', 0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

export default App;

Here, we import the useLocalStorage hook and use it to create a count state variable that is initially set to 0. We also define a handleClick function that updates the count state variable whenever the button is clicked. The value of count is displayed in the component using JSX.

Alternative ways to use localStorage in React

In addition to using a custom hook like the one above, there are other ways to use localStorage in your React code:

• You can use the useEffect hook to update localStorage whenever a certain state variable changes. For example:

import React, { useState, useEffect } from 'react';

function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    localStorage.setItem('count', count);
  }, [count]);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

export default App;

Here, we use the useEffect hook to update localStorage whenever the count state variable changes. The useEffect hook takes in a function as its first argument, which is called whenever one of the dependencies in the second argument (in this case, [count]) changes. Inside the function, we call localStorage.setItem to store the count value.

• You can also use a third-party library like react-use-localstorage to simplify the process of using localStorage in your React code. This library provides a useLocalStorage hook similar to the one we defined earlier, along with other useful hooks for working with localStorage.

Overall, using localStorage in your React code can be a powerful tool for managing small amounts of data locally in the user's browser. By defining a custom hook or using an existing library, you can simplify the process of working with localStorage and make your code more readable and maintainable.