Local storage gets cleared every time I refresh

Question

I'm building a todo List in React, and using Local Storage to save my todos so every time I refresh, they stay displayed.

The issue I'm facing is that whenever I refresh my page, the local storage gets cleared, which is weird because when I've used local storage using Vanilla js and usually got it to do what I wanted. Anyway, here is a snippet of my code:

const [todos, setTodos] = useState([]);

  useEffect(()=>{
    getLocalTodos();
  }, [])

  useEffect(() =>{
    filterHandler();
    saveLocalTodos();
  }, [todos, status]);

  const filterHandler = () =>{
    switch(status){
      case 'completed':
        setFilteredTodos(todos.filter(todo => todo.completed))
        break;
      case 'todo':
        console.log("herex")

        setFilteredTodos(todos.filter(todo => !todo.completed))
        break;
      default:
        setFilteredTodos(todos);
        break;
    }
  }

  const saveLocalTodos = () => {
      localStorage.setItem("todos", JSON.stringify(todos))

  }

  const getLocalTodos = () =>{
    if(localStorage.getItem('todos') === null){
      localStorage.setItem("todos", JSON.stringify([]));
    }else{
      let todoLocal = JSON.parse(localStorage.getItem("todos"))
      setTodos(todoLocal)
    }
  }

You are using `saveLocalTodos` on load, when `todos` is `[]` — Konrad, Oct 09 '22 at 08:51
1. It's not me who downvoted. 2. You can always remove the question to get your reputation back. 3. Asking a rookie question that will not help anyone in the future isn't the purpose of this site. — Konrad, Oct 09 '22 at 09:10
@Muath_01 FYI i haven't downvoted. But you can always try putting logs in your code to see what is happening. That will definitely take less time and effort than posting a question here, and will for sure make you a better developer — Tushar Shahi, Oct 09 '22 at 09:12

score 1 · Answer 1 · answered Oct 09 '22 at 08:54

1

Put a log to see when this useEffect runs :

  useEffect(() =>{
    filterHandler();
    saveLocalTodos();
  }, [todos, status]);

The callback here will run on the very first render (calling saveLocalTodos) and after that on every render when either todos or status changes.

Since todos state variable is empty initially, it will empty data after first mount.

answered Oct 09 '22 at 08:54

Tushar Shahi

16,452
1
18
39

I understand that it runs every time todos and status changes, but that's what I want. What does the second part mean? – Oct 09 '22 at 09:15
When it runs on first time, then `todos` is an empty array right? So `saveLocalTodos` is called which will save an empty array in your storage. – Tushar Shahi Oct 09 '22 at 09:27
Is there a way to make saveLocalTodos not run on reload? I need it to assign the todos into the local storage everytime I add a new Todo. – Oct 09 '22 at 09:50
A hack is to use a ref variable and set some value after first render. Check that value and only then run your second useEffect. https://stackoverflow.com/questions/53253940/make-react-useeffect-hook-not-run-on-initial-render – Tushar Shahi Oct 09 '22 at 10:05
Ok, is this caused by a new update to React?, this tutorial has the exact same thing I have but it's working for him. Skip to minute 1:31:00 https://www.youtube.com/watch?v=pCA4qpQDZD8 – Oct 09 '22 at 10:11

Local storage gets cleared every time I refresh

1 Answers1