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:
xxxxxxxxxx
1
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:
useEffect
inside theuseLocalStorage
hook is responsible for setting the key/value pair inside the local storage,getSavedValue
method is a getter for data saved in the local storage bykey
.
xxxxxxxxxx
1
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:
