usePromise is always called twice because of React strict mode, causing double fetches and other issues to local extensions

[remorses]

Currently you use useEffect in usePromise to call the async function, unfortunately Raycast uses React strict mode in development and all useEffect are called twice.

Here is a simple extension to reproduce the issue:

import { useCachedPromise, usePromise } from "@raycast/utils";
import { Action, ActionPanel, List } from "@raycast/api";

export default function Command() {
  const { isLoading, data } = usePromise(async () => {
    console.log("Inside usePromise");
    return {};
  });
  const { isLoading: isLoadingCached } = useCachedPromise(async () => {
    console.log("Inside useCachedPromise");
    return { cachedData: "This is cached data" };
  });

  return (
    <List isLoading={isLoading || isLoadingCached}>
      <List.Item
        title="Result"
        subtitle={JSON.stringify(data)}
        actions={
          <ActionPanel>
            <Action.CopyToClipboard content={JSON.stringify(data)} />
          </ActionPanel>
        }
      />
    </List>
  );
}

Here is the generated logs:

15:28:49.526 Inside usePromise
15:28:49.527 Inside useCachedPromise
15:28:49.527 Inside usePromise
15:28:49.527 Inside useCachedPromise

I propose using a simple ref to track the time the promise was called. Then if the promise was already called in the last 10 milliseconds, skip running it again.