useTransition

src/constants.ts

@@ -13,6 +13,7 @@ import {
   useImperativeHandle,
   useDebugValue,
   useDeferredValue,
+  useTransition,
 } from "react";
 
 export const hooks = Object.freeze({
@@ -50,6 +51,7 @@ export const defaultScope = {
   useImperativeHandle,
   useDebugValue,
   useDeferredValue,
+  useTransition,
 };
 
 export const isDevelop = window.location.hostname === "localhost";

src/pages/useTransition.tsx

@@ -1,11 +1,47 @@
-import React, { FunctionComponent } from "react";
+import React, { FunctionComponent, useState, useTransition } from "react";
 import { hooks } from "../constants";
 import { Layout } from "../layout/layout";
 
 export const UseTransition: FunctionComponent = () => {
+  const [isPending, startTransition] = useTransition();
+  const [count, setCount] = useState(0);
+
+  function handleClick() {
+    startTransition(() => {
+      setCount((c: number) => c + 1);
+    });
+  }
+
   return (
-    <Layout title={hooks.useTransition}>
-      <></>
+    <Layout title={hooks.useTransition} code={code}>
+      <>
+        {isPending && <p>loading</p>}
+        <button onClick={handleClick}>{count}</button>
+      </>
     </Layout>
   );
 };
+
+const code = `
+const UseTransition = () => {
+  const [isPending, startTransition] = useTransition();
+  const [count, setCount] = useState(0);
+
+  function handleClick() {
+    startTransition(() => {
+      setCount((c: number) => c + 1);
+    });
+  }
+
+  return (
+    <>
+      {isPending && <p>loading</p>}
+      <button onClick={handleClick}>{count}</button>
+    </>
+  );
+};
+
+render(
+  <UseTransition />
+)
+`.trim();