React 19 compatibility: Add support for `use(promise)` to `preact/compat`

[effulgentsia]

Describe the feature you'd love to see
React 19 added a use() function that can be called from components to do async data fetching and suspend the component until the promise resolves. It would be great to have this in preact/compat.

This was asked about in #4613 (comment), but I think it warrants its own issue, so here it is.

[dmail]

Could this provide use for preact?

const promiseStateWeakMap = new WeakMap();
export const use = (promise) => {
  let promiseState = promiseStateWeakMap.get(promise);
  if (!promiseState) {
    promiseState = {
      data: null,
      error: null,
      settled: false,
    };
    promiseStateWeakMap.set(promise, promiseState);
    promise.then(
      (data) => {
        promiseState.data = data;
        promiseState.settled = true;
      },
      (error) => {
        promiseState.error = error;
        promiseState.settled = true;
      },
    );
    throw promise;
  }
  if (!promiseState.settled) {
    throw promise;
  }
  if (promiseState.error) {
    throw promiseState.error;
  }
  return promiseState.data;
};

I've done a quick test with a Suspense and it works.
I'm interested into having use in preact so I'm going to try more to see if that's possible right now or what would be the missing parts. In the meantime if you have any feedback or guidance 🙏

[rschristian]

Could this provide use for preact?

Not really, no. That's a suspense-based method of handling promises which is fine¹ and something we've shown off in a few different forms (preact-www, preact-project-demos) but use goes beyond this and also supports consuming contexts and conditional calling. Your implementation "supports" the latter but won't actually rerender when it needs to so there will be race conditions.

Footnotes

1. You need to provide a method of rerendering when the promise settles and you likely want to add handling for promises that have been set in your map but not yet resolved, such as when two independent components request the same data. ↩

[dmail]

Very good insights thank you.

I'll check the should re-render section I think it should be easy to get working.

For the consuming context however I don't know and don't need it i'll likely ignore that for now (though it would be great to have it)

I've looked into the preact hooks source code, I think I can do something by using _render, _diff and _unmount options to know which components call use and needs to be re-rendered when promise settles.

[dmail]

It's harder than I thought 🤔

react use provides many useful things but in my case I want mostly this:

• Works with Suspense
• Works with Error boundary
• Re-render when promise settles

I've modified the code to handle re-render but now use cannot be conditional anymore (as it relies on a useState).

import { useState } from "preact/hooks";

const promiseStateWeakMap = new WeakMap();
export const use = (promise) => {
   const [, setState] = useState(null);

  let promiseState = promiseStateWeakMap.get(promise);
  if (!promiseState) {
    promiseState = {
      data: null,
      error: null,
      settled: false,
    };
    promiseStateWeakMap.set(promise, promiseState);
    promise.then(
      (data) => {
        promiseState.data = data;
        promiseState.settled = true;
        setState(NaN); // force re-render
      },
      (error) => {
        promiseState.error = error;
        promiseState.settled = true;
      },
    );
    throw promise;
  }
  if (!promiseState.settled) {
    throw promise;
  }
  if (promiseState.error) {
    throw promiseState.error;
  }
  return promiseState.data;
};

There is many missing parts to achieve a proper use that seems hard to achieve.
With this piece of code I can move forward because I have what I need the most from use.

If you use this piece of code be sure to wrap component with <Suspense> or it won't work.

[rschristian]

You're still only rerendering on success, errors will be swallowed, and as I mentioned above, you'll likely want to handle promises that have been set, but not yet resolved, so that multiple components can use the same promise. You'll also want to pass in a callback, rather than the promise directly, to avoid triggering functions that you throw away the result of (as you instead pull from the cache).

For a complete example of how I do it (copy/paste/alter to your heart's content of course):

import { useState } from "preact/hooks";

const CACHE = new WeakMap();

/**
 * @template T
 * @param {string} cacheKey
 * @param {(cacheKey: string) => Promise<T>} cb
 * @returns {T}
 */
export function use(cacheKey, cb) {
    const update = useState({})[1];

    let data = CACHE.get(cacheKey);
    if (!data) {
        data = cb();
        CACHE.set(cacheKey, data);
        data.then(
            (res) => (data.res = res),
            (err) => (data.err = err),
        ).finally(() => update(data));
    } else if (data.then && !data.res && !data.err) {
        data.finally(() => update({}));
    }

    if (data.res) return data.res;
    if (data.err) throw data.err;
    throw data;
}

Oh, and setState(NaN) won't work in v11 so I wouldn't rely on that.

[dmail]

Thank you a ton.
I'll use your version minus the callback because I'd like my code to look close to react. So I'm ok to use promise as cache keys.