default value comes first useState

Question

I'm using react-native-phone-number-input to have user's phone number. Also using expo location to get user's isoCountryCode, and then i set it to a variable by useState, however at the begin it comes as null so in the phone number section appears the default value, how can i catch it properly?

import PhoneInput, { PhoneInputProps } from 'react-native-phone-number-input';
import * as Location from 'expo-location';

const [countryCode, setCountryCode] = useState<
    PhoneInputProps['defaultCode'] | string | null
  >();
  useEffect(() => {
    (async () => {
      const { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== 'granted') {
        setCountryCode('GB');
        return;
      }
      const location = await Location.getCurrentPositionAsync({});
      // await Location.isBackgroundLocationAvailableAsync()
      await (
        await Location.reverseGeocodeAsync(location.coords)
      ).map((a) => setCountryCode(a.isoCountryCode)); <<< I catch the isoCountryCode here
    })();
  }, []);

  console.log('Country Code : ', countryCode);
...

<PhoneInput
      ref={childRef}
      value={value}
      defaultCode={countryCode ? countryCode : 'GB'} <<< It should be set here, but always default comes first
      textInputProps={{
        keyboardType: 'phone-pad',
        ...(props.textInputProps || {}),
      }}
      containerStyle={{ marginTop: 20, backgroundColor: 'transparent' }}
      countryPickerButtonStyle={styles.countryPickerButtonStyle}
      textContainerStyle={styles.textContainer}
      flagButtonStyle={{}}
      textInputStyle={{}}
      codeTextStyle={{}}
      countryPickerProps={{
        ...(props.countryPickerProps || {}),
      }}
...

and console.log output

Country Code :  undefined
Country Code :  TR

Answer 1

The default value in your state is undefined and the code in the useEffect is async. Hence, it is expected that in the first render the value of the state is undefined. After a new state is set in the useEffect, a new render cycle will be run with the updated state value.

If you want to prevent this from happening you could either provide a default value (which might not make much sense if we are talking about locations here)

const [countryCode, setCountryCode] = useState<
    PhoneInputProps['defaultCode'] | string | null
  >(‘SomeCode’);

Or you could use conditional rendering to wait until the location has been fetched as follows.

const [countryCode, setCountryCode] = useState<
    PhoneInputProps['defaultCode'] | string | null
  >();
  useEffect(() => {
    (async () => {
      const { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== 'granted') {
        setCountryCode('GB');
        return;
      }
      const location = await Location.getCurrentPositionAsync({});
      // await Location.isBackgroundLocationAvailableAsync()
      await (
        await Location.reverseGeocodeAsync(location.coords)
      ).map((a) => setCountryCode(a.isoCountryCode)); <<< I catch the isoCountryCode here
    })();
  }, []);

if (!countryCode) {
   return null
}

// else return phone input 

return (…)