Move typing hacks to experimental file

Author: peterszerzo

src/App.tsx

@@ -1,17 +1,15 @@
 import randomWords from "random-words";
 import { v4 as uuid } from "uuid";
-import * as React from "react";
+import React, { useMemo, useState, useEffect, useCallback } from "react";
 import { connectToDB, getConnection } from "./sharedb";
+import { useTransition } from "./react-experimental";
 import {
   Link,
   BrowserRouter as Router,
   useHistory,
   useLocation,
 } from "react-router-dom";
 
-const useTransition: () => [(fn: Function) => void, boolean] = (React as any)
-  .unstable_useTransition;
-
 interface Node {
   text: string;
 }
@@ -35,11 +33,11 @@ function useFlow(config: {
 
   const [startTransition, isPending] = useTransition();
 
-  const [state, setState] = React.useState<Flow | null>(null);
+  const [state, setState] = useState<Flow | null>(null);
 
-  const doc = React.useMemo(() => getConnection(config.id), [config.id]);
+  const doc = useMemo(() => getConnection(config.id), [config.id]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     const cloneStateFromShareDB = () =>
       startTransition(() => {
         setState(JSON.parse(JSON.stringify(doc.data)));
@@ -58,18 +56,18 @@ function useFlow(config: {
 
   // Methods
 
-  const addNode = React.useCallback(() => {
+  const addNode = useCallback(() => {
     doc.submitOp([{ p: ["nodes", uuid()], oi: { text: randomWords() } }]);
   }, [doc]);
 
-  const removeNode = React.useCallback(
+  const removeNode = useCallback(
     (id) => {
       doc.submitOp([{ p: ["nodes", id], od: {} }]);
     },
     [doc]
   );
 
-  const reset = React.useCallback(
+  const reset = useCallback(
     (flow) => {
       doc.submitOp([{ p: [], od: doc.data, oi: flow }]);
     },
@@ -180,15 +178,15 @@ const App = () => {
   const history = useHistory();
   const location = useLocation();
 
-  const id = React.useMemo(() => {
+  const id = useMemo(() => {
     if (location.hash.length < 2) {
       return null;
     }
     return location.hash.slice(1);
   }, [location]);
 
   // If there is no ID readable from the hash, redirect to a freshly created one
-  React.useEffect(() => {
+  useEffect(() => {
     if (id === null) {
       history.push(`#${randomWords()}`);
     }

src/index.tsx

@@ -1,10 +1,10 @@
 import React from "react";
-import * as ReactDOM from "react-dom";
+import { createRoot } from "./react-experimental";
 import App from "./App";
 import * as serviceWorker from "./serviceWorker";
 import "./style.css";
 
-(ReactDOM as any).unstable_createRoot(document.getElementById("root")).render(
+createRoot(document.getElementById("root")).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>

src/react-experimental.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+
+/**
+ * Typing hacks for experimental concurrent mode features in React
+ */
+
+export const createRoot = (ReactDOM as any).unstable_createRoot;
+
+export const useTransition: () => [
+  (fn: Function) => void,
+  boolean
+] = (React as any).unstable_useTransition;