I am working on an app, that is similar to a Todo App. I have a Two Screen's which are SecondScreen.jsand FirtScreen.js. In SecondScreen.js is a screen which saves the data. Then the user clicks a button, it goes to FirstScreen.js which is this code down below. When it goes to the FirstScreen.js it does not update (add the new data), but it stays the same. When I add one more time, it adds the previous that was just added. Which is one data behind.

Also, the keys = await AsyncStorage.getAllKeys() is missing one data, the data that is added.

Also, the keys.pop() is for to remove a key that I don't use but it is for updating the id.

  const [realData, setData] = useState([]);
  useEffect(() => {
  const unsubscribe = navigation.addListener('focus',() => {
    getData();
  });
  return unsubscribe;
 },[navigation]);

  const getData= async () => {
    let keys = []
    try {
      keys = await AsyncStorage.getAllKeys()
    } catch(e) {
      console.log("Fail")
    }
    let values  
    let data = []
    keys.pop()
    try {    
    values = await AsyncStorage.multiGet(keys)
  } catch(e) {    // read error  
  }  

  values.map(values => {
   let jsonData = JSON.parse(value)
    data.push({"title": jsonData.title,"date": jsonData.date, "task": jsonData.task, "id": jsonData.id}) 
  })
  setData(data)
  }
``