My First Dev.to Post — React TODO App with LocalStorage

I was brushing up on my React knowledge and thought of making a small project. I decided to make a TODO app (everyone makes it when they start, I think 😄), and started by building the base app without localStorage.

It worked, but with every refresh, the list state resets and you’re left with no data. For persistent storage, the browser provides a storage option called localStorage. I used it to store the todos — and found two different ways to do this:

First Way - The Manual Way

I had four methods to take care of, and in each function, I had to manually update the list.

handleSubmit: submission of form data

const handleSubmit = e => { e.preventDefault() const newList = [...list, { id: Math.random().toString(16).slice(2), task, completed: false }] setList(newList) // storing in localStorage after new task localStorage.setItem('todos', JSON.stringify(newList)) } 

handleDelete: deleting an individual item from the list

const handleDelete = (id) => { const newList = list.filter(item => item.id !== id) setList(newList) localStorage.setItem('todos', JSON.stringify(newList)) } 

handleComplete: toggle completion of individual items

const handleComplete = id => { const newList = list.map(item => item.id === id ? { ...item, completed: !item.completed } : item) setList(newList) localStorage.setItem('todos', JSON.stringify(newList)) } 

handleClear: clear the completed todos

const handleClear = () => { const newList = list.filter(item => item.completed !== true) setList(newList) localStorage.setItem('todos', JSON.stringify(newList)) } 

I had to update localStorage manually in every function. It’s okay at this level of the project, but in larger projects, this can become quite messy.

Second Way - Using useEffect Hook

I used two useEffects to get the desired output.

The first one loads the stored list when the page first loads,

and the second one updates localStorage whenever the list changes.

useEffect(() => { const newList = localStorage.getItem('todos') if (newList) setList(JSON.parse(newList)) }, []) useEffect(() => { localStorage.setItem('todos', JSON.stringify(list)) }, [list]) 

But here’s the catch: on the very first render, when the page loads, the list state resets to empty — and that empty list gets saved back to localStorage, wiping everything.

So I had to prevent this.

The way I did that was by using useRef, since useRef doesn’t affect re-renders.

const firstRender = useRef(true) useEffect(() => { const newList = localStorage.getItem('todos') if (newList) setList(JSON.parse(newList)) }, []) useEffect(() => { if (firstRender.current) { firstRender.current = false // change firstRender value to false return // if still first render, return } localStorage.setItem('todos', JSON.stringify(list)) }, [list]) 

So this method also has its issues, but it was far better than manually coding localStorage updates in every function.

For me, the useEffect method was clearly the better choice over the first one.

Thanks for reading my first post! What would you have done differently — the manual way or useEffect? Let me know your thoughts 😊