Hook

import AsyncStorage from "@react-native-async-storage/async-storage";
 
export function useAsyncStorage<T>(
  key: string,
  initialValue: T
): [T, (value: T | ((prev: T) => T)) => Promise<void>] {
  const valueRef = useRef<T>(initialValue);
 
  const [storedValue, setStoredValue] = useState<T>(initialValue);
 
  useEffect(() => {
    valueRef.current = storedValue;
  }, [storedValue]);
 
  useEffect(() => {
    const fetchStoredValue = async () => {
      try {
        const item = await AsyncStorage.getItem(key);
 
        if (item !== null) {
          const parsedValue = JSON.parse(item) as T;
 
          setStoredValue(parsedValue);
 
          valueRef.current = parsedValue;
        }
      } catch (error) {
        console.error(`Error reading key "${key}" from AsyncStorage:`, error);
      }
    };
 
    fetchStoredValue();
  }, [key]);
 
  const setValue = useCallback(
    async (value: T | ((prev: T) => T)) => {
      try {
        const newValue =
          typeof value === "function"
            ? (value as (prev: T) => T)(valueRef.current)
            : value;
 
        setStoredValue(newValue);
 
        valueRef.current = newValue;
 
        await AsyncStorage.setItem(key, JSON.stringify(newValue));
      } catch (error) {
        console.error(`Error setting key "${key}" in AsyncStorage:`, error);
      }
    },
    [key]
  );
 
  return [storedValue, setValue];
}

const [user, setUser] = useAsyncStorage<User>("user", {
  name: "John Doe",
  age: 30,
});