todos not loading while using AsyncStorage

Question

I am trying to use AsyncStorage to fetch my todos from inside the useEffect hook. If there are no todos(Meaning todos === []) Then a Text Component shows saying "Add a todo".

App image in expo

Initially the todos are set to "[]" inside the useState hook. When the addItem() method is called onPress the todos are not loading.

I do not know why this is happening...

export default function App() {
  const [todo, setTodo] = useState('');
  const [todos, setTodos] = useState([]);

  useEffect(() => {
    _retrieveData();
  }, [todos]);

  const addItem = (newTodo) => {
    if (newTodo.length === 0) {
      Alert.alert(
        'Enter a String',
        'You have entered a string with 0 characters',
        [{ text: 'Okay', style: 'default' }]
      );
    } else {
      console.log(newTodo);
      let newTodos = [newTodo, ...todos];
      setTodo('');
      _storeData(JSON.stringify(newTodos));
    }
  };

  const deleteTodo = (idx) => {
    setTodos(todos.filter((todo, id) => id !== idx));
  };

  const _storeData = async (value) => {
    try {
      await AsyncStorage.setItem('TASKS', value);
    } catch (error) {
      // Error saving data
      console.log(e);
    }
  };

  const _retrieveData = async () => {
    try {
      const value = await AsyncStorage.getItem('TASKS');
      if (value !== null) {
        // We have data!!
        setTodos(JSON.parse(value));

        console.log(value);
      }
    } catch (error) {
      // Error retrieving data
      console.log(error);
    }
  };

  return (
    <TouchableWithoutFeedback
      onPress={() => {
        Keyboard.dismiss();
      }}
    >
      <View style={styles.outerContainer}>
        <Text style={styles.header}>TODO</Text>
        <View style={styles.container}>
          <TextInput
            placeholder='new todo'
            style={styles.input}
            value={todo}
            onChangeText={(text) => {
              setTodo(text);
            }}
          ></TextInput>
          <Button title='Add' onPress={() => addItem(todo)}></Button>
        </View>
        <ScrollView style={styles.scrollView}>
          {todos === [] ? (
            <View>
              <Text>Add a todo!</Text>
            </View>
          ) : (
            todos.map((todo, idx) => (
              <View style={styles.todo} key={idx}>
                <Text style={styles.todoText}>{todo}</Text>
                <View style={styles.delete}>
                  <Button
                    color='red'
                    title='Delete'
                    onPress={() => deleteTodo(idx)}
                  ></Button>
                </View>
              </View>
            ))
          )}
        </ScrollView>
      </View>
    </TouchableWithoutFeedback>
  );
}

Answer 1

Dont use passed todo value newTodo , as setState is async dont get executed immediately, so you can use current setted todo value instead passed old value,

  const addItem = (newTodo) => {
    if (todo.length === 0) {
      Alert.alert(
        'Enter a String',
        'You have entered a string with 0 characters',
        [{ text: 'Okay', style: 'default' }]
      );
    } else {
      console.log(todo);
      let newTodos = [todo, ...todos];
      setTodo('');
      _storeData(JSON.stringify(newTodos));
      setTodos(newTodos);
    }
  };