Why is localStorage getting cleared whenever I refresh the page? - reactjs

Question

Like the title says, the localStorage I set registers the changes made to the todoList array and JSON.stringifys it; however, whenever I refresh the page the array returns to the default [] state.
const LOCAL_STORAGE_KEY = "task-list"
function TodoList() {
const [todoList, setTodoList] = useState([]);
useEffect(() => {
const storedList = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY));
if (storedList) {
setTodoList(storedList);
}
}, []);
useEffect(() => {
localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(todoList));
}, [todoList]);

Answer 1

When you reload the app/component both effects will run, and React state updates are processed asynchronously, so it's picking up the empty array state persisted to localStorage before the state update is processed. Just read from localStorage directly when setting the initial todoList state value.
Example:
const LOCAL_STORAGE_KEY = "task-list"
function TodoList() {
const [todoList, setTodoList] = useState(() => {
return JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY)) || []
});
useEffect(() => {
localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(todoList));
}, [todoList]);
...

Answer 2

The above solution does not work in all cases. Instead add a conditional in front of the localStorage.setItem line in order to prevent the [] case.
//does not work in all cases (such as localhost)
function TodoList() {
const [todoList, setTodoList] = useState(() => {
return JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY)) || []
});
//use conditional instead
useEffect(() => {
if (todoList.length > 0) {localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(todoList))}
}, [todoList])

Answer 3

Your React version is above v18 which implemented the <React.StrictMode>. If this is enabled in the index.js this code
useEffect(() => {
const storedList = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY));
if (storedList) {
setTodoList(storedList);
}
}, []);
Won't work because it detects potential problems. If you removed <React.StrictMode> it will work but I won't recommend it. The best solution is the first two answers