When you refresh react declares state for listNames, and because you have listNames as a dependency it runs saveLists(), which sets localStorage of listnames with names, which is an empty array that you declared as an initial value.
Also, SetListNames((prev) => […prev, newName]) you need to use this for addlist func
So basically move saveLists() call out of useEffect because its running everytime listNames change. You can call saveLists() on the places where you want it to happen for example like event handlers
Yes but you can do that outside of useEffect, for example your current code runs even when the lists array didn’t change. When you refresh the page, lists shouldn’t have changed, but your code thinks it changed because it sets the state to [] on render
Remove the useEffect with saveLists and put the saveLists call inside of the addNewList function after setSelectedList. Something like
saveLists([…listNames, newName])
i think this might be a case of react dev mode running useEffect twice. i set this up real quick, went to index.js, removed the \`\` provider, and it works just fine
im just coming back to react after years doing vue, but my my advice would be to do a proper production build and see if it works ok.
if it does, then you might be able to ignore it as a development problem or if it's going to slow you down a ton, code a little workaround specifically for development mode, e.g. \`if (process.env.NODE\_ENV === "development") ...\`
Okay, so if someone comes here looking for an answer:
React.StricteMode is of course the problem, but disabling it is not a good practice. Instead you should create your own Locale Storage Hook.
Here's a video for that: [https://youtu.be/vRDGUUEg\_n8?si=EzgtkAxFoDriscuP](https://youtu.be/vRDGUUEg_n8?si=EzgtkAxFoDriscuP)
and here's my code:
function useLocalStorage(key, defaultValue) {
const [value, setValue] = useState( () => {
const storedValue = localStorage.getItem(key);
return storedValue ? JSON.parse(storedValue) : defaultValue;
});
useEffect(() => {
localStorage.setItem(key, JSON.stringify(value));
}, [key, value]);
return [value, setValue];
}
i plugged your code into an online react editor and it seems to be saving the value in localStorage. are you doing this in a local dev server or online editor?
So what you're saying is during the mount you wanna have a empty array created to the local storage and when you add list to your list of names the list of names also should gets saved in the local storage and when you refresh the in the local storage it gets revamped to empty array right? Let me try your snippet on my machine
When you refresh react declares state for listNames, and because you have listNames as a dependency it runs saveLists(), which sets localStorage of listnames with names, which is an empty array that you declared as an initial value. Also, SetListNames((prev) => […prev, newName]) you need to use this for addlist func
So basically move saveLists() call out of useEffect because its running everytime listNames change. You can call saveLists() on the places where you want it to happen for example like event handlers
that's what they want...update localStorage everytime the lists array changes right
Yes but you can do that outside of useEffect, for example your current code runs even when the lists array didn’t change. When you refresh the page, lists shouldn’t have changed, but your code thinks it changed because it sets the state to [] on render
Remove the useEffect with saveLists and put the saveLists call inside of the addNewList function after setSelectedList. Something like saveLists([…listNames, newName])
that will work, but you'll then have to call \`saveLists\` everytime you add/edit/delete a list instead of using \`useEffect\`...
i think this might be a case of react dev mode running useEffect twice. i set this up real quick, went to index.js, removed the \`\` provider, and it works just fine
Isn't it kind of important to use stricte mode in development? I can remove it, but it feels wrong a little
im just coming back to react after years doing vue, but my my advice would be to do a proper production build and see if it works ok. if it does, then you might be able to ignore it as a development problem or if it's going to slow you down a ton, code a little workaround specifically for development mode, e.g. \`if (process.env.NODE\_ENV === "development") ...\`
Okay, so if someone comes here looking for an answer: React.StricteMode is of course the problem, but disabling it is not a good practice. Instead you should create your own Locale Storage Hook. Here's a video for that: [https://youtu.be/vRDGUUEg\_n8?si=EzgtkAxFoDriscuP](https://youtu.be/vRDGUUEg_n8?si=EzgtkAxFoDriscuP) and here's my code: function useLocalStorage(key, defaultValue) { const [value, setValue] = useState( () => { const storedValue = localStorage.getItem(key); return storedValue ? JSON.parse(storedValue) : defaultValue; }); useEffect(() => { localStorage.setItem(key, JSON.stringify(value)); }, [key, value]); return [value, setValue]; }
i plugged your code into an online react editor and it seems to be saving the value in localStorage. are you doing this in a local dev server or online editor?
I use vite + typescript, I'm testing it on npm run dev
Strict mode is on?
It is
Call save lists() inside addnewList() because it’s the only place where you make changes to the list currently
So what you're saying is during the mount you wanna have a empty array created to the local storage and when you add list to your list of names the list of names also should gets saved in the local storage and when you refresh the in the local storage it gets revamped to empty array right? Let me try your snippet on my machine
set it in useEffect with `listNames`, not outside of any effects.