Countdown component renders before value is fetched from asyncStorage: NaN

[fokke-m]

Hello, I want to to get the countdown until value from an asyncStorage object. But it seems the countdown component renders before the asyncStorage.getItem is being fetched.

This is how I get the asyncStorage item:

 const [appAssessment, setAppAssessment] = useState({});

AsyncStorage.getItem('appAssessment').then(data => {
    const assessment = JSON.parse(data);
    setAppAssessment(assessment);
  });

and then I insert an appAssessment.duration value in the until property of the countdown component like so:

until={Number(appAssessment.duration)}

The countdown timer always renders NaN. However, I also use this duration property in one of my other components as well and there it shows perfectly. It seems like I get this NaN value because it's still empty when the countdown component is being rendered. How can I solve this?

Also: the running option doesn't seem to work either, when i set state to false it keeps running... Thanks!