The function saveToLS was getting executed properly due to the asynchronous nature of useState() function. This was fixed by initializing the Todo List (todos) using a function called GetTodos(). Initializing with a seperate function ensures 2 things:
1) The useEffect function used later on; which tracks todos, does not get interfered by todos getting initialized with the help of settodos(). This ensures that the local storage during initialization remains intact while also always listening to any changes made in todos after initialization. Hence, the fetching from local storage remains the same, but made in a different way.
2) This enables the use of useEffect() on todos, and removes the need to add "saveToLS()" everywhere the list changes. This also keeps track of todo_list LIVE, instead of some change/function triggering saveToLS() directly/indirectly.
The function saveToLS was getting executed properly due to the asynchronous nature of useState() function. This was fixed by initializing the Todo List (todos) using a function called GetTodos(). Initializing with a seperate function ensures 2 things:
1) The useEffect function used later on; which tracks todos, does not get interfered by todos getting initialized with the help of settodos(). This ensures that the local storage during initialization remains intact while also always listening to any changes made in todos after initialization. Hence, the fetching from local storage remains the same, but made in a different way. 2) This enables the use of useEffect() on todos, and removes the need to add "saveToLS()" everywhere the list changes. This also keeps track of todo_list LIVE, instead of some change/function triggering saveToLS() directly/indirectly.