EN
React - custom useLocalStorage hook
3 points
In this article, we would like to show you how to create a custom hook to save data in local storage under React application.
Quick solution:
xxxxxxxxxx1
import { useState, useEffect } from 'react';2
3
const getSavedValue = (key, initialValue) => {4
const savedValue = JSON.parse(localStorage.getItem(key));5
if (savedValue) return savedValue;6
return initialValue;7
};8
9
const useLocalStorage = (key, initialValue) => {10
const [value, setValue] = useState(() => {11
return getSavedValue(key, initialValue);12
});13
useEffect(() => {14
localStorage.setItem(key, JSON.stringify(value));15
}, [value]);16
return [value, setValue];17
};18
19
export default useLocalStorage;
In this example, we present a practical example of how to use useLocalStorage() custom hook to store data in local storage.
There are two basic concepts in this solution:
useEffectinside theuseLocalStoragehook is responsible for setting the key/value pair inside the local storage,getSavedValuemethod is a getter for data saved in the local storage bykey.
xxxxxxxxxx1
import React, { useState, useEffect } from 'react';2
3
const getSavedValue = (key, initialValue) => {4
const savedValue = JSON.parse(localStorage.getItem(key));5
if (savedValue) return savedValue;6
return initialValue;7
};8
9
const useLocalStorage = (key, initialValue) => {10
const [value, setValue] = useState(() => {11
return getSavedValue(key, initialValue);12
});13
useEffect(() => {14
localStorage.setItem(key, JSON.stringify(value));15
}, [value]);16
return [value, setValue];17
};18
19
// --------------------------------------20
21
// Usage example:22
23
const App = () => {24
const [text, setText] = useLocalStorage('initialKey', 'initialValue');25
return (26
<div>27
<input type="text" value={text} onChange={(e) => setText(e.target.value)} />28
</div>29
);30
};31
32
export default App;Note: local storage stores values as trings. This is the reason why
JSON.parse()to get the value andJSON.stringify()to set value are used.
Result:
