How to get params from AsyncStorage before the passing them to a component?

Question

I want to get items from AsyncStorage and then pass it to my component, but for some reason it pass param first and then finish the getData()

App.js:

import React from 'react';
import Vocabulary from "./Screens/Vocabulary";
import AsyncStorage from '@react-native-async-storage/async-storage'

export default function App() {
  var vocabulary = []

  const getData = async () => {
    try {
      const value = await AsyncStorage.getItem('@vocabulary')
      vocabulary = value != null ? JSON.parse(value) : [];
      console.log(vocabulary)
    } catch(e) {}
  }  
   
  getData()
    
  return <Vocabulary vocabulary={vocabulary} />;
}

VocabularyScreen.js:

import React from 'react';
import { View, SafeAreaView, TouchableOpacity } from 'react-native';
import styles from "./styles";
import { Feather } from '@expo/vector-icons';
import AsyncStorage from '@react-native-async-storage/async-storage';

export default function VocabularyScreen({ vocabulary }) {
  console.log(vocabulary)

  const Plus = async () => {
    vocabulary.push({ word: "", translation: "", description: ``, isMarked: false });
    await AsyncStorage.setItem('@vocabulary', JSON.stringify(vocabulary))
  }
    
  //SCREEN
  return (
    <View style={styles.container}> 

          <TouchableOpacity onPress={Plus}>
            <Feather name="plus" size={40} color="#3D5201" />
          </TouchableOpacity>

    </View>
  )
}  

Console after 3 times pressing on button and restart:

[] //log from VocabularyScreen.js
(3) [{...}, {...}, {...}] //log from App.js

If you know why this happens and how could I pass the changed param to the component please let me know

Answer 1

The reason is it's still waiting on data...

Snack: https://snack.expo.io/@marcpope/vocabulary

App.js:

import React, {useEffect} from 'react';
import Vocabulary from "./screens/Vocabulary";
import AsyncStorage from '@react-native-async-storage/async-storage'

const App = () => {
 const [ vocabulary, setVocabulary] = React.useState(null);
  useEffect(() => {
    AsyncStorage.getItem('@vocabulary').then((value) => {
      setVocabulary(JSON.parse(value));
      console.log('app:',value)
    })
  }, []);

  if(!vocabulary) {
    return null;
  }
    
  return (
  <Vocabulary vocabulary={vocabulary} />
  );
}

export default App;

and vocab screen:

import React from 'react';
import { View, SafeAreaView, TouchableOpacity } from 'react-native';
import { Feather } from '@expo/vector-icons';
import AsyncStorage from '@react-native-async-storage/async-storage';

export default function Vocabulary(vocabulary) {
  console.log('vocab screen: ', vocabulary)

  const Plus = async () => {
    vocabulary.push({ word: "hello", translation: "ola", description: 'n/a', isMarked: false });
    await AsyncStorage.setItem('@vocabulary', JSON.stringify(vocabulary))
  }
    
  //SCREEN
  return (
    <View > 

          <TouchableOpacity onPress={Plus}>
            <Feather name="plus" size={40} color="#3D5201" />
          </TouchableOpacity>

    </View>
  )
}