Async Storage backed `useState` for React Native

usePersistantState.js

import { useState, useEffect, useCallback } from "react";
import { useAsyncStorage } from "@react-native-community/async-storage";

/**
 * @example
 *   const [isReady, setReady, refresh] = usePersistantState(199, "ready")
 */
export default (id, property, defaultValue = null) => {
  const [value, setValue] = useState(defaultValue);
  const { getItem, setItem } = useAsyncStorage(`${id}#${property}`);

  const fetchFromStorage = useCallback(async () => {
    const data = await getItem();
    const item = JSON.parse(data) || { value: defaultValue };
    console.debug(`Read ${item.value} for ${id}#${property}`);
    setValue(item.value);
  }, [id, property, defaultValue]);

  const setter = useCallback(
    async (newValue) => {
      setValue(newValue);
      await setItem(JSON.stringify({ value: newValue }));
      console.debug(`Saved ${newValue} for ${id}#${property}`);
    },
    [id, property]
  );

  useEffect(() => {
    fetchFromStorage();
  }, []);

  return [value, setter, fetchFromStorage];
};