Using Async Storage with useState cusses me an issue, I need to press twice to update the value

Question

I am Using Async Storage with useState and Have a small problem, I want to add alert and when the user press ok I want to save a string in Async Storage but the problem is, the user need to press twice because Async storage store the old value of useState, How to solve that problem,

Here's My Code and I will do my best to describe it better with my low level of English,

1- AsyncStorage

import AsyncStorage from '@react-native-async-storage/async-storage';

export default function App() {
    const [wantNotification, setWantNotification] = useState('NO');

    // Async Storage Saving Yes for Notifications
    const storeNotificationAsync = async wantNotification => {
        try {
            await AsyncStorage.setItem('wantNotification', wantNotification);
            setWantNotification('YES'); // I Need to press twice becuase when I press the first time Async Storage store "No"
            } catch (e) {
                console.log(e);
            }
    };
}

2- AsyncStorage getItem

const getNotificationAsync = async () => {
    try {
        const value = await AsyncStorage.getItem('wantNotification');
        if (value !== null) {
            console.log(value);
            // It Logs "NO" If i press one time In the Alert
        }
    } catch (e) {}
};  

3- Alert

const createAlert = () =>
    Alert.alert(
        'Notifications',
        'Do You Want Notifications',
        [
            {
                text: 'Cancel',
                onPress: () => console.log('Cancel Pressed'),
                style: 'cancel',
            },
            {
                text: 'OK',
                onPress: async () => {
                    await storeNotificationAsync(wantNotification);
                    await console.log(wantNotification);
                    
                },
            },
        ],
        {cancelable: false});

Answer 1

Your state is set to 'NO' for you first save:

  const storeNotificationAsync = async wantNotification => {
    try {
      await AsyncStorage.setItem('wantNotification', wantNotification);
      setWantNotification('YES'); // I Need to press twice becuase when I press the first time Async Storage store "No"
    } catch (e) {
      console.log(e);
    }
  };

And it is called from here:

onPress: async () => {
            await storeNotificationAsync(wantNotification);
            await console.log(wantNotification);
          },

Given your setup you should do this:

  const storeYesNotificationAsync = async () => {
    const yes = 'YES';
    try {
      await AsyncStorage.setItem('wantNotification', yes);
      setWantNotification(yes); // I Need to press twice becuase when I press the first time Async Storage store "No"
    } catch (e) {
      console.log(e);
    }
  };

And the invocation should be something like this:

          onPress: () => storeYesNotificationAsync()