useTransition - Object is not a function or its return value is not iterable

3
votes

I'm running the experimental version of React to play with Concurrent mode and useTransition. The versions I'm running are:

"react": "0.0.0-experimental-27659559e",
"react-dom": "0.0.0-experimental-27659559e",

I've also made sure that I've opted for Concurrent mode from index.js:

ReactDOM.unstable_createRoot(document.getElementById("root")).render(<App />);

The component I'm trying to use useTransition on looks like this -

import React, { Suspense, useState, useTransition } from "react";
import { createResource } from "./utils";

const initialResource = createResource();

const UserInfo = () => {
  const [resource, setResource] = useState(initialResource);
  const [startTransition, isPending] = useTransition({
    timeoutMs: 3000,
  });
  const user = resource.invoice.read();
  return (
    <div>
      <span>{user.name}</span>
      <button onClick={() => setResource(createResource())}>Load data</button>
    </div>
  );
};

Everything works fine until I implement the line with useTransition. The app breaks and throws an error saying TypeError: Object is not a function or its return value is not iterable highlighting the following line:

const [startTransition, isPending] = useTransition({
    timeoutMs: 3000,
  });

I'm not sure if there's an issue with setting up Concurrent mode. This is similar to what the official doc is saying for setting up useTransition. Can anyone give me some idea as to what might be going wrong here?

1
javascriptreactjsreact-hooks

1 Answers

2
votes

You probably figured this out by now but they switched the values on us, it should be:

const [isPending, startTransition] = useTransition({
    timeoutMs: 3000,
});