Local storage is not keeping the data after page reload - reactjs

Question

I'm making in react a list of episodes that user would like to watch later (similar to todo app) , but after reloading the page data is not keeping in local storage.
I'm new to react, so, please help me to understand the issue.
This is my code
import React, { useState, useEffect } from "react";
import { RiCloseCircleLine } from "react-icons/ri";
import { TiEdit } from "react-icons/ti";
import { MyWatchListForm } from "./MyWatchListForm";
export const MyWatchListItem = ({
watchLists,
completeWatchList,
removeWatchList,
updateWatchList,
}) => {
const [edit, setEdit] = useState({
id: null,
value: "",
});
const submitUpdate = (value) => {
updateWatchList(edit.id, value);
setEdit({
id: null,
value: "",
});
};
useEffect(() => {
const data = localStorage.getItem("my-watchList");
const savedData = JSON.parse(data);
setEdit(savedData);
}, []);
useEffect(() => {
localStorage.setItem("my-watchList", JSON.stringify(watchLists));
});
if (edit.id) {
return <MyWatchListForm edit={edit} onSubmit={submitUpdate} />;
}
return watchLists.map((watchList, index) => (
<div className={watchList.isComplete ? "checked" : ""} key={index}>
<div key={watchList.id} onClick={() => completeWatchList(watchList.id)}>
{watchList.text}
</div>
<div>
<RiCloseCircleLine onClick={() => removeWatchList(watchList.id)} />
<TiEdit
onClick={() => setEdit({ id: watchList.id, value: watchList.text })}
/>
</div>
</div>
));
};
Form that is used to get the data from:
export const MyWatchListForm = (props) => {
const [input, setInput] = useState(props.edit ? props.edit.value : "");
const inputRef = useRef();
useEffect(() => {
inputRef.current.focus();
});
const handleSubmit = (e) => {
e.preventDefault();
props.onSubmit({
id: Math.floor(Math.random() * 10000),
text: input,
});
setInput("");
};
const handleChange = (e) => {
setInput(e.target.value);
};
return (
<form
className="w-full max-w-sm flex items-center border-b border-teal-500 py-2"
onSubmit={handleSubmit}
>
{props.edit ? (
<>
<input
className="appearance-none bg-transparent border-none w-full text-gray-700 mr-3 py-1 px-2 leading-tight focus:outline-none"
type="text"
value={input}
placeholder="Update the episode"
onChange={handleChange}
ref={inputRef}
></input>
<button>Update</button>
</>
) : (
<>
<input
className="appearance-none bg-transparent border-none w-full text-gray-700 mr-3 py-1 px-2 leading-tight focus:outline-none"
type="text"
value={input}
placeholder="Add the episode"
onChange={handleChange}
ref={inputRef}
></input>
<button>Add</button>
</>
)}
</form>
);
};
And the WatchList.js file
import React, { useState } from "react";
import { MyWatchListForm } from "./MyWatchListForm";
import { MyWatchListItem } from "./MyWatchListItem";
export const MyWatchList = () => {
const [watchLists, setWatchLists] = useState([]);
const addWatchList = (watchList) => {
if (!watchList.text || /^\s*$/.test(watchList.text)) {
return;
}
const newWatchList = [watchList, ...watchLists];
setWatchLists(newWatchList);
console.log(...watchLists);
};
const updateWatchList = (watchListId, newValue) => {
if (!newValue.text || /^\s*$/.test(newValue.text)) {
return;
}
setWatchLists((prev) =>
prev.map((item) => (item.id === watchListId ? newValue : item))
);
};
const removeWatchList = (id) => {
const removeArr = [...watchLists].filter(
(watchList) => watchList.id !== id
);
setWatchLists(removeArr);
};
const completeWatchList = (id) => {
const updatedWatchList = watchLists.map((watchList) => {
if (watchList.id === id) {
watchList.isComplete = !watchList.isComplete;
}
return watchList;
});
setWatchLists(updatedWatchList);
};
return (
<div>
<h1>Watch later</h1>
<MyWatchListForm onSubmit={addWatchList} />
<MyWatchListItem
watchLists={watchLists}
completeWatchList={completeWatchList}
removeWatchList={removeWatchList}
updateWatchList={updateWatchList}
/>
</div>
);
};

Answer 1

I fixed the issue by changing the initial state in MyWatchList as below:
export const MyWatchList = () => {
const [watchLists, setWatchLists] = useState(() => {
const data = localStorage.getItem("my-watchList");
return data ? JSON.parse(data) : [];
});
useEffect(() => {
localStorage.setItem("my-watchList", JSON.stringify(watchLists));
}, [watchLists]);

Answer 2

I think the issue with your code is this snippet:
useEffect(() => {
localStorage.setItem("my-watchList", JSON.stringify(watchLists));
});
Every time the state get's updated, this useEffect runs and it replaces the content of localStorage to the values which you are getting in watchlists since you are not providing a dependancy array to the useEffect.

Answer 3

Using the useEffect hook without a dependency array is never a good idea. It basically runs on every render. Actually, goal of the useEffect is to solve this problem. Remove your useEffect and try like this;
const submitUpdate = (value) => {
updateWatchList(edit.id, value);
setEdit({
id: null,
value: "",
});
localStorage.setItem("my-watchList", JSON.stringify(watchLists));
};