This simple article demonstrates of using async/await inside a react functional component. let’s discuss about how to use async/await in the functional component react native. step by step explain using async await inside react's useeffect() hook. you can understand a concept of how to use async and await inside a react functional component.

In this example,We will use async and await inside a React functional component, we can define an async function inside the component and call it.below's this example

In the first step run the following command to create a project.

expo init ExampleApp

In this step, You will open the App.js file and put the code.

import React, { useEffect, useState } from 'react';
import { View, Text,StyleSheet } from 'react-native';

const FunctionalComponent = () => {
  const [isFlag, setIsFlag] = useState(false);
    
    useEffect(() => {
        async function changeFlag() {
        
          await delay(1500);
          setIsFlag(!isFlag)
        }
        
        changeFlag();
    }, []);
    
    
  const delay = async ms => new Promise(res => setTimeout(res, ms));
  
  return (
    <View style={styles.container}>
      {isFlag && <Text>Hello World! </Text>}
    </View>
    
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  }
});

export default FunctionalComponent;

In the last step run your project using the below command.

expo start

You can QR code scan in Expo Go Application on mobile.

Output:

It will help you...