Support useTransition() for showing previous Recoil state with Recoil state changes.

i realize that useTransition is bleeding edge, but i’d like to get an early handle on it. this far i’ve not been able to figure out any combination of parts to get useTransition to work, and i can’t find any examples online. all my imports work and i’m following the code like this.

    recoil: 0.1.1
    react: 0.0.0-experimental-4ead6b530
    react-dom: 0.0.0-experimental-4ead6b530

and using the concurrent pattern:

ReactDOM.unstable_createRoot(document.getElementById("root")).render(
  <BrowserRouter>
    <Route path="/" component={App} />
  </BrowserRouter>
);

and an otherwise typical and working <Suspense /> pattern:

import React, { Suspense, useState, unstable_useTransition as useTransition } from "react";
import { atom, selector, useRecoilState } from "recoil";

export const baseState = atom({
  key: "base",
  default: 100,
});

export const resourceState = selector({
  key: "resource",
  get: ({ get }) => {
    const base = get(baseState);
    return new Promise(resolve => {
      setTimeout(() => {
        resolve(base);
      }, 2000);
    });
  },
  set: ({ set }, value) => {
    set(baseState, value);
  },
});

const UseTransitionEample = () => {
  const [resource, setResource] = useRecoilState(resourceState);
  const [startTransition, isPending] = useTransition({ timeoutMs: 3000 });

  return (
    <>
      <div>resource: {resource}</div>
      <div>isPending: {isPending ? "true" :  "false"}</div>
      <button onClick={() =>
          startTransition(() => {
            setResource(resource + 1);
          })
      }>Update</button>
    </>
  );
}

const SuspenseWrapper = () => (
  <Suspense fallback={<div>"Loading..."</div>}>
    <UseTransitionEample />
  </Suspense>
);

export default SuspenseWrapper;

In the above code clicking the button results in the “Loading…” fallback being presented for the full duration of the “load”.

[drarmstr]

We’re discussing a possible fix for this now, likely related to a planned optimization as well.

[trebor]

my mistaken understanding as per this description was that the original page content should be displayed only for timeoutMs time. hunting around i found this pr which removes that param. so yes i think recoil is doing the right thing now. thanks so much for the hand holding. 😃