Why the initialization from useEffect doesn't work for loading localStorage?

Reference:
https://youtu.be/hQAHSlTtcmY?t=1342

I had an issue where I cannot initialize the todos from useEffect through localStorage. After adding two ToDo into the list and then click browser refresh button, all ToDo will not be able to load back. The trace looks as below:

storedTodos size:  2
App.js:41 todos size:  0
App.js:34 storedTodos size:  0
App.js:41 todos size:  0
App.js:41 todos size:  0

It seems to me the setTodos(storedTodos) doesn't work as expected. The solution is to load the initialization through useState shown below.

Question> Can someone please advice me that why this initialization doesn't work within useEffect?

Thank you

function App() {
const [todos, setTodos] = useState([])
// const [todos, setTodos] = useState(() => {
//   if (localStorage.getItem(LOCAL_STORAGE_KEY)) {
//     const storedTodos = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY))
//     return storedTodos;
//   }
//   else
//     return [];
// })
const todoNameRef = useRef()
// This doesn't work as expected
//
useEffect(() => {
const storedTodos = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY))
if (storedTodos) {
console.log("storedTodos size: ", storedTodos.length)
setTodos(storedTodos)
}
}, [])
useEffect(() => {
console.log("todos size: ", todos.length)
localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(todos))
}, [todos])
function handleAddTodo(e) {
const name = todoNameRef.current.value
if (name === '') return
setTodos(prevTodos => {
return [...prevTodos, { id: uuidv4(), name: name, complete: false }]
})
todoNameRef.current.value = null
}
return (
<>
<TodoList todos={todos} />
<input ref={todoNameRef} type="text" />
<button onClick={handleAddTodo}>Add Todo</button>
<button>Clear Completed Todos</button>
<div>0 left to do</div>
</>
)
}
export default App;

I think the problem is that your useEffect hook with todos as dependency runs every time the todos state changes, which includes the initial render when todos is null. This causes the localStorage to be overwritten with an empty array, which then prevents the other useEffect hook from loading the stored todos.

To fix this, you can move the localStorage logic inside the setTodos function and remove useEffect with todos as dependency.

For example:

setTodos((prevTodos) => {
const todos = [...prevTodos, { id: uuidv4(), name: name, complete: false }];
localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(todos));
return todos;
});

Try to add a check to ensure the state is only set if the value from localStorage has resolved. Replace if(storedTodos) with if(storedTodos.length > 0).

  useEffect(() => {
const storedTodos = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY))
// added check
if (storedTodos && storedTodos.length > 0) {
console.log("storedTodos size: ", storedTodos.length)
setTodos(storedTodos)
}
}, [])

I would not use useEffect at all in this scenario. Use your commented code to initialize the state variable. Then make a wrapper for setTodos to cache the value. Delete both useEffects.

  const [todos, _setTodos] = useState(() => {
    const storedTodosString = localStorage.getItem(LOCAL_STORAGE_KEY);
    if (!storedTodosString) return [];
    return JSON.parse(storedTodosString);
  });

  function setTodos(todos) {
    if (typeof todos === 'function') {
      _setTodos((prevTodos) => {
        const newTodos = todos(prevTodos);
        if (!newTodos) return prevTodos;
        localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(newTodos));
        return newTodos;
      });
    } else {
      if (!todos) return;
      localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(todos));
      _setTodos(todos);
    }
  }

Working example: https://stackblitz.com/edit/stackblitz-starters-awp3f5?file=src%2FApp.tsx

Your solution doesn't work because state variables are immutable during a render. On your first render, the value of todos is [] no matter how many times you call setTodos. This means you are writing [] to localStorage on init. Strict Mode causes useEffects to be called twice in a single render (during development) so order of operations goes:

1. Read localStorage, call setTodos with stored value
2. Write [] to localStorage
3. Read [] from localStorage, call setTodos with []
4. Write [] to localStorage.