educative.io

Educative

Custom Hook - Overwrite issue in local storage

In the code sample below in the React “Custom hook” lesson, it is stated the issue with this custom hook is that “Using the custom hook more than once in a React application leads to an overwrite of the “value”-allocated item in the local storage. To fix this, pass in a key:” - I don’t understand what the issue is. What is meant by overwrite the value and why is that an issue? Thank you in advance.

const useSemiPersistentState = () => {

const [value, setValue] = React.useState(

localStorage.getItem(‘value’) || ‘’

);

React.useEffect(() => {

localStorage.setItem(‘value’, value);

}, [value]);

return [value, setValue];

}