title: useAsyncStorage custom hook with useState hook in React Native
body: <p>As we know, we cannot use LocalStorage in React Native. I try to create a useAsyncStorage custom hook instead, which do same function as LocalStorage custome hook in react to store the data in mobile device's local storage.</p>
  <p>useAsyncStorage.js</p>
  <pre><code>import React, { useEffect, useState } from 'react';
  import AsyncStorage from '@react-native-community/async-storage';
  
  
  export default function useAsyncStorage(key, defaultValue) {
    const [storageValue, updateStorageValue] = useState(defaultValue);
  
    useEffect(() =&gt; {
      getStorageValue();
    }, []);
  
    async function getStorageValue() {
      let value = defaultValue;
      try {
        value = (JSON.parse(await AsyncStorage.getItem(key))) || defaultValue;
      } catch (e) {
        // handle here
      } finally {
        updateStorage(value);
      }
    }
  
    async function updateStorage(newValue) {
      try {
        await AsyncStorage.setItem(key, JSON.stringify(newValue));
      } catch (e) {
        // handle here
      } finally {
        getStorageValue();
      }
    }
  
    return [storageValue, updateStorageValue];
  }
  </code></pre>
  <p>In App.js I import useAsyncStorage.js and try use it to store the data in mobile device's local storage.</p>
  <pre><code>import useAsyncStorage from './useAsyncStorage';
  </code></pre>
  <p>To initial it:</p>
  <pre><code>const [userLevel, setUserLevel] = useAsyncStorage(&quot;userLevel&quot;,1)
  </code></pre>
  <p>To setValue:</p>
  <pre><code> setUserLevel(prevLevel =&gt; {
     return prevLevel + 1
   })
  </code></pre>
  <p>It works as expected and set the data, but it cannot retrieve data from AsyncStorage after app reload.</p>
  <p>Could anyone please help? Did I do something wrong in useAsyncStorage custom hook? Why data don't store in AsyncStorage?</p>