[flow] enable LTI inference mode (#26104)

This is the next generation inference mode for Flow.

package.json

@@ -61,7 +61,7 @@
     "eslint-plugin-react-internal": "link:./scripts/eslint-rules",
     "fbjs-scripts": "^3.0.1",
     "filesize": "^6.0.1",
-    "flow-bin": "^0.199.0",
+    "flow-bin": "^0.199.1",
     "flow-remove-types": "^2.198.2",
     "glob": "^7.1.6",
     "glob-stream": "^6.1.0",

packages/jest-react/src/internalAct.js

@@ -77,7 +77,7 @@ export function act<T>(scope: () => Thenable<T> | T): Thenable<T> {
     ) {
       const thenableResult: Thenable<T> = (result: any);
       return {
-        then(resolve, reject) {
+        then(resolve: T => mixed, reject: mixed => mixed) {
           thenableResult.then(
             returnValue => {
               flushActWork(
@@ -108,7 +108,7 @@ export function act<T>(scope: () => Thenable<T> | T): Thenable<T> {
           didFlushWork = Scheduler.unstable_flushAllWithoutAsserting();
         } while (didFlushWork);
         return {
-          then(resolve, reject) {
+          then(resolve: T => mixed, reject: mixed => mixed) {
             resolve(returnValue);
           },
         };

packages/react-cache/src/ReactCacheOld.js

@@ -85,11 +85,11 @@ function identityHashFn(input) {
 }
 
 const CACHE_LIMIT = 500;
-const lru = createLRU(CACHE_LIMIT);
+const lru = createLRU<$FlowFixMe>(CACHE_LIMIT);
 
 const entries: Map<Resource<any, any>, Map<any, any>> = new Map();
 
-const CacheContext = React.createContext(null);
+const CacheContext = React.createContext<mixed>(null);
 
 function accessResult<I, K, V>(
   resource: any,

packages/react-client/src/ReactFlightClient.js

@@ -129,13 +129,13 @@ Chunk.prototype.then = function <T>(
     case BLOCKED:
       if (resolve) {
         if (chunk.value === null) {
-          chunk.value = [];
+          chunk.value = ([]: Array<(T) => mixed>);
         }
         chunk.value.push(resolve);
       }
       if (reject) {
         if (chunk.reason === null) {
-          chunk.reason = [];
+          chunk.reason = ([]: Array<(mixed) => mixed>);
         }
         chunk.reason.push(reject);
       }
@@ -435,7 +435,7 @@ function createModelResolver<T>(
   chunk: SomeChunk<T>,
   parentObject: Object,
   key: string,
-) {
+): (value: any) => void {
   let blocked;
   if (initializingChunkBlockedModel) {
     blocked = initializingChunkBlockedModel;
@@ -446,7 +446,6 @@ function createModelResolver<T>(
       value: null,
     };
   }
-  // $FlowFixMe[missing-local-annot]
   return value => {
     parentObject[key] = value;
     blocked.deps--;
@@ -465,7 +464,7 @@ function createModelResolver<T>(
   };
 }
 
-function createModelReject<T>(chunk: SomeChunk<T>) {
+function createModelReject<T>(chunk: SomeChunk<T>): (error: mixed) => void {
   return (error: mixed) => triggerErrorOnChunk(chunk, error);
 }
 
@@ -583,7 +582,7 @@ export function resolveModule(
   const chunks = response._chunks;
   const chunk = chunks.get(id);
   const moduleMetaData: ModuleMetaData = parseModel(response, model);
-  const moduleReference = resolveClientReference(
+  const moduleReference = resolveClientReference<$FlowFixMe>(
     response._bundlerConfig,
     moduleMetaData,
   );

packages/react-debug-tools/src/ReactDebugHooks.js

@@ -60,13 +60,13 @@ function getPrimitiveStackCache(): Map<string, Array<any>> {
   // This initializes a cache of all primitive hooks so that the top
   // most stack frames added by calling the primitive hook can be removed.
   if (primitiveStackCache === null) {
-    const cache = new Map();
+    const cache = new Map<string, Array<any>>();
     let readHookLog;
     try {
       // Use all hooks here to add them to the hook log.
       Dispatcher.useContext(({_currentValue: null}: any));
       Dispatcher.useState(null);
-      Dispatcher.useReducer((s, a) => s, null);
+      Dispatcher.useReducer((s: mixed, a: mixed) => s, null);
       Dispatcher.useRef(null);
       if (typeof Dispatcher.useCacheRefresh === 'function') {
         // This type check is for Flow only.
@@ -809,7 +809,7 @@ export function inspectHooksOfFiber(
   // Set up the current hook so that we can step through and read the
   // current state from them.
   currentHook = (fiber.memoizedState: Hook);
-  const contextMap = new Map();
+  const contextMap = new Map<ReactContext<$FlowFixMe>, $FlowFixMe>();
   try {
     setupContexts(contextMap, fiber);
     if (fiber.tag === ForwardRef) {

packages/react-devtools-core/src/backend.js

@@ -67,7 +67,7 @@ export function connectToDevTools(options: ?ConnectOptions) {
     useHttps = false,
     port = 8097,
     websocket,
-    resolveRNStyle = null,
+    resolveRNStyle = (null: $FlowFixMe),
     retryConnectionDelay = 2000,
     isAppActive = () => true,
     devToolsSettingsManager,
@@ -230,7 +230,7 @@ export function connectToDevTools(options: ?ConnectOptions) {
             get() {
               return lazyResolveRNStyle;
             },
-            set(value) {
+            set(value: $FlowFixMe) {
               lazyResolveRNStyle = value;
               initAfterTick();
             },
@@ -246,7 +246,7 @@ export function connectToDevTools(options: ?ConnectOptions) {
             get() {
               return lazyNativeStyleEditorValidAttributes;
             },
-            set(value) {
+            set(value: $FlowFixMe) {
               lazyNativeStyleEditorValidAttributes = value;
               initAfterTick();
             },

packages/react-devtools-core/src/editor.js

@@ -188,7 +188,7 @@ export function launchEditor(
   }
   childProcess.on('error', function () {});
   // $FlowFixMe[incompatible-use] found when upgrading Flow
-  childProcess.on('exit', function (errorCode) {
+  childProcess.on('exit', function () {
     childProcess = null;
   });
 }

packages/react-devtools-core/src/standalone.js

@@ -168,7 +168,7 @@ function onDisconnected() {
 }
 
 // $FlowFixMe[missing-local-annot]
-function onError({code, message}) {
+function onError({code, message}: $FlowFixMe) {
   safeUnmount();
 
   if (code === 'EADDRINUSE') {
@@ -335,13 +335,13 @@ function startServer(
     initialize(socket);
   });
 
-  server.on('error', event => {
+  server.on('error', (event: $FlowFixMe) => {
     onError(event);
     log.error('Failed to start the DevTools server', event);
     startServerTimeoutID = setTimeout(() => startServer(port), 1000);
   });
 
-  httpServer.on('request', (request, response) => {
+  httpServer.on('request', (request: $FlowFixMe, response: $FlowFixMe) => {
     // Serve a file that immediately sets up the connection.
     const backendFile = readFileSync(join(__dirname, 'backend.js'));
 
@@ -377,7 +377,7 @@ function startServer(
     );
   });
 
-  httpServer.on('error', event => {
+  httpServer.on('error', (event: $FlowFixMe) => {
     onError(event);
     statusListener('Failed to start the server.', 'error');
     startServerTimeoutID = setTimeout(() => startServer(port), 1000);

packages/react-devtools-extensions/src/backend.js

@@ -9,7 +9,7 @@
 let welcomeHasInitialized = false;
 
 // $FlowFixMe[missing-local-annot]
-function welcome(event) {
+function welcome(event: $FlowFixMe) {
   if (
     event.source !== window ||
     event.data.source !== 'react-devtools-content-script'
@@ -56,8 +56,7 @@ function setup(hook: any) {
 
   const bridge = new Bridge({
     listen(fn) {
-      // $FlowFixMe[missing-local-annot]
+      const listener = (event: $FlowFixMe) => {
-      const listener = event => {
         if (
           event.source !== window ||
           !event.data ||

packages/react-devtools-inline/src/backend.js

@@ -10,8 +10,7 @@ import type {BackendBridge} from 'react-devtools-shared/src/bridge';
 import type {Wall} from 'react-devtools-shared/src/types';
 
 function startActivation(contentWindow: any, bridge: BackendBridge) {
-  // $FlowFixMe[missing-local-annot]
+  const onSavedPreferences = (data: $FlowFixMe) => {
-  const onSavedPreferences = data => {
     // This is the only message we're listening for,
     // so it's safe to cleanup after we've received it.
     bridge.removeListener('savedPreferences', onSavedPreferences);
@@ -102,8 +101,7 @@ export function createBridge(contentWindow: any, wall?: Wall): BackendBridge {
   if (wall == null) {
     wall = {
       listen(fn) {
-        // $FlowFixMe[missing-local-annot]
+        const onMessage = ({data}: $FlowFixMe) => {
-        const onMessage = ({data}) => {
           fn(data);
         };
         contentWindow.addEventListener('message', onMessage);

packages/react-devtools-shared/src/backend/DevToolsComponentStackFrame.js

@@ -54,7 +54,7 @@ let reentry = false;
 let componentFrameCache;
 if (__DEV__) {
   const PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map;
-  componentFrameCache = new PossiblyWeakMap();
+  componentFrameCache = new PossiblyWeakMap<$FlowFixMe, string>();
 }
 
 export function describeNativeComponentFrame(

packages/react-devtools-shared/src/backend/StyleX/utils.js

@@ -13,7 +13,7 @@ import isArray from 'react-devtools-shared/src/isArray';
 const cachedStyleNameToValueMap: Map<string, string> = new Map();
 
 export function getStyleXData(data: any): StyleXPlugin {
-  const sources = new Set();
+  const sources = new Set<string>();
   const resolvedStyles = {};
 
   crawlData(data, sources, resolvedStyles);

packages/react-devtools-shared/src/backend/legacy/renderer.js

@@ -503,7 +503,7 @@ export function attach(
     const numUnmountIDs =
       pendingUnmountedIDs.length + (pendingUnmountedRootID === null ? 0 : 1);
 
-    const operations = new Array(
+    const operations = new Array<number>(
       // Identify which renderer this update is coming from.
       2 + // [rendererID, rootFiberID]
         // How big is the string table?

packages/react-devtools-shared/src/backend/profilingHooks.js

@@ -18,14 +18,16 @@ import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
 import type {Wakeable} from 'shared/ReactTypes';
 import type {
   BatchUID,
+  InternalModuleSourceToRanges,
   LaneToLabelMap,
   ReactComponentMeasure,
+  ReactLane,
   ReactMeasure,
   ReactMeasureType,
-  TimelineData,
-  SuspenseEvent,
-  SchedulingEvent,
   ReactScheduleStateUpdateEvent,
+  SchedulingEvent,
+  SuspenseEvent,
+  TimelineData,
 } from 'react-devtools-timeline/src/types';
 
 import isArray from 'shared/isArray';
@@ -837,7 +839,8 @@ export function createProfilingHooks({
       isProfiling = value;
 
       if (isProfiling) {
-        const internalModuleSourceToRanges = new Map();
+        const internalModuleSourceToRanges: InternalModuleSourceToRanges =
+          new Map();
 
         if (supportsUserTimingV3) {
           const ranges = getInternalModuleRanges();
@@ -856,7 +859,7 @@ export function createProfilingHooks({
           }
         }
 
-        const laneToReactMeasureMap = new Map();
+        const laneToReactMeasureMap = new Map<ReactLane, ReactMeasure[]>();
         let lane = 1;
         for (let index = 0; index < REACT_TOTAL_NUM_LANES; index++) {
           laneToReactMeasureMap.set(lane, []);

packages/react-devtools-shared/src/backend/renderer.js

@@ -415,7 +415,7 @@ export function getInternalReactConstants(version: string): {
     TracingMarkerComponent,
   } = ReactTypeOfWork;
 
-  function resolveFiberType(type: any) {
+  function resolveFiberType(type: any): $FlowFixMe {
     const typeSymbol = getTypeSymbol(type);
     switch (typeSymbol) {
       case MEMO_NUMBER:
@@ -1627,7 +1627,7 @@ export function attach(
     }
   }
 
-  let flushPendingErrorsAndWarningsAfterDelayTimeoutID = null;
+  let flushPendingErrorsAndWarningsAfterDelayTimeoutID: null | TimeoutID = null;
 
   function clearPendingErrorsAndWarningsAfterDelay() {
     if (flushPendingErrorsAndWarningsAfterDelayTimeoutID !== null) {
@@ -1790,7 +1790,7 @@ export function attach(
       pendingSimulatedUnmountedIDs.length +
       (pendingUnmountedRootID === null ? 0 : 1);
 
-    const operations = new Array(
+    const operations = new Array<number>(
       // Identify which renderer this update is coming from.
       2 + // [rendererID, rootFiberID]
         // How big is the string table?
@@ -4144,7 +4144,7 @@ export function attach(
 
   // Map of id and its force error status: true (error), false (toggled off),
   // null (do nothing)
-  const forceErrorForFiberIDs = new Map();
+  const forceErrorForFiberIDs = new Map<number | null, $FlowFixMe>();
 
   function shouldErrorFiberAccordingToMap(fiber: any) {
     if (typeof setErrorHandler !== 'function') {
@@ -4209,7 +4209,7 @@ export function attach(
     return false;
   }
 
-  const forceFallbackForSuspenseIDs = new Set();
+  const forceFallbackForSuspenseIDs = new Set<number>();
 
   function shouldSuspendFiberAccordingToSet(fiber: any) {
     const maybeID = getFiberIDUnsafe(((fiber: any): Fiber));

packages/react-devtools-shared/src/backend/utils.js

@@ -144,7 +144,7 @@ export function getEffectDurations(root: Object): {
 }
 
 export function serializeToString(data: any): string {
-  const cache = new Set();
+  const cache = new Set<mixed>();
   // Use a custom replacer function to protect against circular references.
   return JSON.stringify(data, (key, value) => {
     if (typeof value === 'object' && value !== null) {

packages/react-devtools-shared/src/backend/views/utils.js

@@ -83,7 +83,7 @@ export function getNestedBoundingClientRect(
 ): Rect {
   const ownerIframe = getOwnerIframe(node);
   if (ownerIframe && ownerIframe !== boundaryWindow) {
-    const rects = [node.getBoundingClientRect()];
+    const rects: Array<Rect | ClientRect> = [node.getBoundingClientRect()];
     let currentIframe: null | HTMLElement = ownerIframe;
     let onlyOneMore = false;
     while (currentIframe) {

packages/react-devtools-shared/src/devtools/ProfilerStore.js

@@ -308,7 +308,7 @@ export default class ProfilerStore extends EventEmitter<{
       // Record snapshot of tree at the time profiling is started.
       // This info is required to handle cases of e.g. nodes being removed during profiling.
       this._store.roots.forEach(rootID => {
-        const profilingSnapshots = new Map();
+        const profilingSnapshots = new Map<number, SnapshotNode>();
         this._initialSnapshotsByRootID.set(rootID, profilingSnapshots);
         this._takeProfilingSnapshotRecursive(rootID, profilingSnapshots);
       });

packages/react-devtools-shared/src/devtools/store.js

@@ -642,7 +642,7 @@ export default class Store extends EventEmitter<{
   }
 
   getOwnersListForElement(ownerID: number): Array<Element> {
-    const list = [];
+    const list: Array<Element> = [];
     const element = this._idToElement.get(ownerID);
     if (element != null) {
       list.push({
@@ -900,7 +900,7 @@ export default class Store extends EventEmitter<{
     let i = 2;
 
     // Reassemble the string table.
-    const stringTable = [
+    const stringTable: Array<string | null> = [
       null, // ID = 0 corresponds to the null string.
     ];
     const stringTableSize = operations[i++];

packages/react-devtools-shared/src/devtools/views/Components/EditableName.js

@@ -43,7 +43,7 @@ export default function EditableName({
   const [isValid, setIsValid] = useState(false);
 
   const handleChange = useCallback(
-    ({target}) => {
+    ({target}: $FlowFixMe) => {
       let value = target.value;
       if (!allowWhiteSpace) {
         value = value.trim();
@@ -61,7 +61,7 @@ export default function EditableName({
   );
 
   const handleKeyDown = useCallback(
-    event => {
+    (event: $FlowFixMe) => {
       // Prevent keydown events from e.g. change selected element in the tree
       event.stopPropagation();
 

packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js

@@ -177,7 +177,7 @@ export function InspectedElementContextController({
     [setState, state],
   );
 
-  const inspectedElementRef = useRef(null);
+  const inspectedElementRef = useRef<null | InspectedElement>(null);
   useEffect(() => {
     if (
       inspectedElement !== null &&

packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/StyleEditor.js

@@ -288,7 +288,7 @@ function Field({
     <AutoSizeInput
       className={`${className} ${styles.Input}`}
       onBlur={onSubmit}
-      onChange={event => onChange(event.target.value)}
+      onChange={(event: $FlowFixMe) => onChange(event.target.value)}
       onKeyDown={onKeyDown}
       placeholder={placeholder}
       value={value}

packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/context.js

@@ -72,9 +72,9 @@ const resource: Resource<Element, Element, StyleAndLayoutFrontend> =
         resolveFn = resolve;
       });
 
-      inProgressRequests.set(element, {promise, resolveFn});
+      inProgressRequests.set(element, ({promise, resolveFn}: $FlowFixMe));
 
-      return promise;
+      return (promise: $FlowFixMe);
     },
     (element: Element) => element,
     {useWeakMap: true},

packages/react-devtools-shared/src/devtools/views/Components/OwnersListContext.js

@@ -61,7 +61,7 @@ const resource: Resource<
     // $FlowFixMe[incompatible-call] found when upgrading Flow
     inProgressRequests.set(element, {promise, resolveFn});
 
-    return promise;
+    return (promise: $FlowFixMe);
   },
   (element: Element) => element,
   {useWeakMap: true},

packages/react-devtools-shared/src/devtools/views/Components/Tree.js

@@ -87,7 +87,7 @@ export default function Tree(props: Props): React.Node {
   // meaning the scroll action would be skipped (since ref updates don't re-run effects).
   // Using a callback ref accounts for this case...
   const listCallbackRef = useCallback(
-    list => {
+    (list: $FlowFixMe) => {
       if (list != null && selectedElementIndex !== null) {
         list.scrollToItem(selectedElementIndex, 'smart');
       }
@@ -226,7 +226,7 @@ export default function Tree(props: Props): React.Node {
   }, [dispatch, numElements, selectedElementIndex]);
 
   const handleKeyPress = useCallback(
-    event => {
+    (event: $FlowFixMe) => {
       switch (event.key) {
         case 'Enter':
         case ' ':
@@ -272,7 +272,7 @@ export default function Tree(props: Props): React.Node {
 
   // Highlight last hovered element.
   const handleElementMouseEnter = useCallback(
-    id => {
+    (id: $FlowFixMe) => {
       // Ignore hover while we're navigating with keyboard.
       // This avoids flicker from the hovered nodes under the mouse.
       if (!isNavigatingWithKeyboard) {

packages/react-devtools-shared/src/devtools/views/ErrorBoundary/cache.js

@@ -65,9 +65,9 @@ export function findGitHubIssue(errorMessage: string): GitHubIssue | null {
   let record = map.get(errorMessage);
 
   if (!record) {
-    const callbacks = new Set();
+    const callbacks = new Set<() => mixed>();
     const wakeable: Wakeable = {
-      then(callback) {
+      then(callback: () => mixed) {
         callbacks.add(callback);
       },
 

packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js

@@ -45,7 +45,7 @@ export default function CommitFlamegraphAutoSizer(_: {}): React.Node {
   const {profilingCache} = profilerStore;
 
   const deselectCurrentFiber = useCallback(
-    event => {
+    (event: $FlowFixMe) => {
       event.stopPropagation();
       selectFiber(null, null);
     },
@@ -126,7 +126,7 @@ function CommitFlamegraph({chartData, commitTree, height, width}: Props) {
   }, [chartData, selectedFiberID, selectedChartNodeIndex]);
 
   const handleElementMouseEnter = useCallback(
-    ({id, name}) => {
+    ({id, name}: $FlowFixMe) => {
       highlightNativeElement(id); // Highlight last hovered element.
       setHoveredFiberData({id, name}); // Set hovered fiber data for tooltip
     },

packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.js

@@ -45,7 +45,7 @@ export default function CommitRankedAutoSizer(_: {}): React.Node {
   const {profilingCache} = profilerStore;
 
   const deselectCurrentFiber = useCallback(
-    event => {
+    (event: $FlowFixMe) => {
       event.stopPropagation();
       selectFiber(null, null);
     },
@@ -108,7 +108,7 @@ function CommitRanked({chartData, commitTree, height, width}: Props) {
   );
 
   const handleElementMouseEnter = useCallback(
-    ({id, name}) => {
+    ({id, name}: $FlowFixMe) => {
       highlightNativeElement(id); // Highlight last hovered element.
       setHoveredFiberData({id, name}); // Set hovered fiber data for tooltip
     },

packages/react-devtools-shared/src/devtools/views/Profiler/CommitRankedListItem.js

@@ -40,7 +40,7 @@ function CommitRankedListItem({data, index, style}: Props) {
   const {lineHeight} = useContext(SettingsContext);
 
   const handleClick = useCallback(
-    event => {
+    (event: $FlowFixMe) => {
       event.stopPropagation();
       const {id, name} = node;
       selectFiber(id, name);

packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js

@@ -84,7 +84,7 @@ export function getCommitTree({
     // If this is the very first commit, start with the cached snapshot and apply the first mutation.
     // Otherwise load (or generate) the previous commit and append a mutation to it.
     if (index === 0) {
-      const nodes = new Map();
+      const nodes = new Map<number, CommitTreeNode>();
 
       // Construct the initial tree.
       recursivelyInitializeTree(rootID, 0, nodes, dataForRoot);
@@ -163,7 +163,7 @@ function updateTree(
   let id: number = ((null: any): number);
 
   // Reassemble the string table.
-  const stringTable = [
+  const stringTable: Array<null | string> = [
     null, // ID = 0 corresponds to the null string.
   ];
   const stringTableSize = operations[i++];

packages/react-devtools-shared/src/devtools/views/Profiler/FlamegraphChartBuilder.js

@@ -63,7 +63,11 @@ export function getChartData({
   let maxSelfDuration = 0;
 
   // Generate flame graph structure using tree base durations.
-  const walkTree = (id: number, rightOffset: number, currentDepth: number) => {
+  const walkTree = (
+    id: number,
+    rightOffset: number,
+    currentDepth: number,
+  ): ChartNode => {
     idToDepthMap.set(id, currentDepth);
 
     const node = nodes.get(id);
@@ -115,7 +119,11 @@ export function getChartData({
 
     for (let i = children.length - 1; i >= 0; i--) {
       const childID = children[i];
-      const childChartNode = walkTree(childID, rightOffset, currentDepth + 1);
+      const childChartNode: $FlowFixMe = walkTree(
+        childID,
+        rightOffset,
+        currentDepth + 1,
+      );
       rightOffset -= childChartNode.treeBaseDuration;
     }
 

packages/react-devtools-shared/src/devtools/views/Profiler/RootSelector.js

@@ -28,7 +28,7 @@ export default function RootSelector(_: {}): React.Node {
   }
 
   const handleChange = useCallback(
-    ({currentTarget}) => {
+    ({currentTarget}: $FlowFixMe) => {
       setRootID(parseInt(currentTarget.value, 10));
     },
     [setRootID],

packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.js

@@ -45,7 +45,7 @@ export default function SnapshotSelector(_: Props): React.Node {
 
   const filteredCommitIndices = useMemo(
     () =>
-      commitData.reduce((reduced, commitDatum, index) => {
+      commitData.reduce((reduced: $FlowFixMe, commitDatum, index) => {
         if (
           !isCommitFilterEnabled ||
           commitDatum.duration >= minCommitDuration

packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js

@@ -70,14 +70,14 @@ export default function ComponentsSettings(_: {}): React.Node {
   );
 
   const updateCollapseNodesByDefault = useCallback(
-    ({currentTarget}) => {
+    ({currentTarget}: $FlowFixMe) => {
       store.collapseNodesByDefault = !currentTarget.checked;
     },
     [store],
   );
 
   const updateParseHookNames = useCallback(
-    ({currentTarget}) => {
+    ({currentTarget}: $FlowFixMe) => {
       setParseHookNames(currentTarget.checked);
     },
     [setParseHookNames],

packages/react-devtools-shared/src/devtools/views/Settings/ProfilerSettings.js

@@ -39,7 +39,7 @@ export default function ProfilerSettings(_: {}): React.Node {
   );
 
   const updateRecordChangeDescriptions = useCallback(
-    ({currentTarget}) => {
+    ({currentTarget}: $FlowFixMe) => {
       store.recordChangeDescriptions = currentTarget.checked;
     },
     [store],

packages/react-devtools-shared/src/devtools/views/TabBar.js

@@ -46,11 +46,11 @@ export default function TabBar({
   }
 
   const onChange = useCallback(
-    ({currentTarget}) => selectTab(currentTarget.value),
+    ({currentTarget}: $FlowFixMe) => selectTab(currentTarget.value),
     [selectTab],
   );
 
-  const handleKeyDown = useCallback(event => {
+  const handleKeyDown = useCallback((event: $FlowFixMe) => {
     switch (event.key) {
       case 'ArrowDown':
       case 'ArrowLeft':

packages/react-devtools-shared/src/devtools/views/WarnIfLegacyBackendDetected.js

@@ -23,7 +23,7 @@ export default function WarnIfLegacyBackendDetected(_: {}): null {
   // In this case the frontend should show upgrade instructions.
   useEffect(() => {
     // Wall.listen returns a cleanup function
-    let unlisten = bridge.wall.listen(message => {
+    let unlisten: $FlowFixMe = bridge.wall.listen(message => {
       switch (message.type) {
         case 'call':
         case 'event':

packages/react-devtools-shared/src/devtools/views/hooks.js

@@ -168,7 +168,7 @@ export function useLocalStorage<T>(
   const [storedValue, setStoredValue] = useState<any>(getValueFromLocalStorage);
 
   const setValue = useCallback(
-    value => {
+    (value: $FlowFixMe) => {
       try {
         const valueToStore =
           value instanceof Function ? (value: any)(storedValue) : value;

packages/react-devtools-shared/src/dynamicImportCache.js

@@ -66,9 +66,9 @@ export function loadModule(moduleLoaderFunction: ModuleLoaderFunction): Module {
   }
 
   if (!record) {
-    const callbacks = new Set();
+    const callbacks = new Set<() => mixed>();
     const wakeable: Wakeable = {
-      then(callback) {
+      then(callback: () => mixed) {
         callbacks.add(callback);
       },
 
@@ -155,6 +155,7 @@ export function loadModule(moduleLoaderFunction: ModuleLoaderFunction): Module {
     moduleLoaderFunctionToModuleMap.set(moduleLoaderFunction, record);
   }
 
+  // $FlowFixMe[underconstrained-implicit-instantiation]
   const response = readRecord(record).value;
   return response;
 }

packages/react-devtools-shared/src/hook.js

@@ -8,13 +8,14 @@
  * @flow
  */
 
-import type {BrowserTheme} from 'react-devtools-shared/src/devtools/views/DevTools';
+import type {BrowserTheme} from './devtools/views/DevTools';
 import type {
-  RendererID,
-  ReactRenderer,
-  Handler,
   DevToolsHook,
-} from 'react-devtools-shared/src/backend/types';
+  Handler,
+  ReactRenderer,
+  RendererID,
+  RendererInterface,
+} from './backend/types';
 
 import {
   patchConsoleUsingWindowValues,
@@ -519,9 +520,9 @@ export function installHook(target: any): DevToolsHook | null {
 
   // TODO: More meaningful names for "rendererInterfaces" and "renderers".
   const fiberRoots: {[RendererID]: Set<mixed>} = {};
-  const rendererInterfaces = new Map();
+  const rendererInterfaces = new Map<RendererID, RendererInterface>();
   const listeners: {[string]: Array<Handler>} = {};
-  const renderers = new Map();
+  const renderers = new Map<RendererID, ReactRenderer>();
 
   const hook: DevToolsHook = {
     rendererInterfaces,

packages/react-devtools-shared/src/hookNamesCache.js

@@ -87,9 +87,9 @@ export function loadHookNames(
   }
 
   if (!record) {
-    const callbacks = new Set();
+    const callbacks = new Set<() => mixed>();
     const wakeable: Wakeable = {
-      then(callback) {
+      then(callback: () => mixed) {
         callbacks.add(callback);
       },
 
@@ -97,7 +97,7 @@ export function loadHookNames(
       displayName: `Loading hook names for ${element.displayName || 'Unknown'}`,
     };
 
-    let timeoutID;
+    let timeoutID: $FlowFixMe | null;
     let didTimeout = false;
     let status = 'unknown';
     let resolvedHookNames: HookNames | null = null;

packages/react-devtools-shared/src/hooks/SourceMapMetadataConsumer.js

@@ -131,7 +131,7 @@ export class SourceMapMetadataConsumer {
   _getMetadataObjectsBySourceNames(sourcemap: MixedSourceMap): MetadataMap {
     if (sourcemap.mappings === undefined) {
       const indexSourceMap: IndexSourceMap = sourcemap;
-      const metadataMap = new Map();
+      const metadataMap = new Map<string, ?ReactSourceMetadata>();
       indexSourceMap.sections.forEach(section => {
         const metadataMapForIndexMap = this._getMetadataObjectsBySourceNames(
           section.map,
@@ -143,7 +143,7 @@ export class SourceMapMetadataConsumer {
       return metadataMap;
     }
 
-    const metadataMap = new Map();
+    const metadataMap: MetadataMap = new Map();
     const basicMap: BasicSourceMap = sourcemap;
     const updateMap = (metadata: ReactSourceMetadata, sourceIndex: number) => {
       let source = basicMap.sources[sourceIndex];

packages/react-devtools-shared/src/hooks/generateHookMap.js

@@ -65,7 +65,7 @@ export function generateHookMap(sourceAST: File): HookMap {
   const names = [];
   const mappings: Array<HookMapLine> = [];
 
-  let currentLine = null;
+  let currentLine: $FlowFixMe | null = null;
   hookNamesMapping.forEach(({name, start}) => {
     let nameIndex = namesMap.get(name);
     if (nameIndex == null) {

packages/react-devtools-shared/src/hooks/parseHookNames/index.js

@@ -32,7 +32,7 @@ export function parseSourceAndMetadata(
 
 export const purgeCachedMetadata = workerizedParseHookNames.purgeCachedMetadata;
 
-const EMPTY_MAP = new Map();
+const EMPTY_MAP: HookNames = new Map();
 
 export async function parseHookNames(
   hooksTree: HooksTree,

packages/react-devtools-shared/src/hooks/parseHookNames/loadSourceAndMetadata.js

@@ -136,7 +136,7 @@ function extractAndLoadSourceMapJSON(
   locationKeyToHookSourceAndMetadata: LocationKeyToHookSourceAndMetadata,
 ): Promise<Array<$Call<<T>(p: Promise<T> | T) => T, Promise<void>>>> {
   // Deduplicate fetches, since there can be multiple location keys per source map.
-  const dedupedFetchPromises = new Map();
+  const dedupedFetchPromises = new Map<string, Promise<$FlowFixMe>>();
 
   if (__DEBUG__) {
     console.log(
@@ -463,7 +463,7 @@ function loadSourceFiles(
   fetchFileWithCaching: FetchFileWithCaching | null,
 ): Promise<Array<$Call<<T>(p: Promise<T> | T) => T, Promise<void>>>> {
   // Deduplicate fetches, since there can be multiple location keys per file.
-  const dedupedFetchPromises = new Map();
+  const dedupedFetchPromises = new Map<string, Promise<$FlowFixMe>>();
 
   const setterPromises = [];
   locationKeyToHookSourceAndMetadata.forEach(hookSourceAndMetadata => {

packages/react-devtools-shared/src/hydration.js

@@ -429,41 +429,49 @@ export function hydrate(
 
 function upgradeUnserializable(destination: Object, source: Object) {
   Object.defineProperties(destination, {
+    // $FlowFixMe[invalid-computed-prop]
     [meta.inspected]: {
       configurable: true,
       enumerable: false,
       value: !!source.inspected,
     },
+    // $FlowFixMe[invalid-computed-prop]
     [meta.name]: {
       configurable: true,
       enumerable: false,
       value: source.name,
     },
+    // $FlowFixMe[invalid-computed-prop]
     [meta.preview_long]: {
       configurable: true,
       enumerable: false,
       value: source.preview_long,
     },
+    // $FlowFixMe[invalid-computed-prop]
     [meta.preview_short]: {
       configurable: true,
       enumerable: false,
       value: source.preview_short,
     },
+    // $FlowFixMe[invalid-computed-prop]
     [meta.size]: {
       configurable: true,
       enumerable: false,
       value: source.size,
     },
+    // $FlowFixMe[invalid-computed-prop]
     [meta.readonly]: {
       configurable: true,
       enumerable: false,
       value: !!source.readonly,
     },
+    // $FlowFixMe[invalid-computed-prop]
     [meta.type]: {
       configurable: true,
       enumerable: false,
       value: source.type,
     },
+    // $FlowFixMe[invalid-computed-prop]
     [meta.unserializable]: {
       configurable: true,
       enumerable: false,

packages/react-devtools-shared/src/inspectedElementCache.js

@@ -89,9 +89,9 @@ export function inspectElement(
   const map = getRecordMap();
   let record = map.get(element);
   if (!record) {
-    const callbacks = new Set();
+    const callbacks = new Set<() => mixed>();
     const wakeable: Wakeable = {
-      then(callback) {
+      then(callback: () => mixed) {
         callbacks.add(callback);
       },
 

packages/react-devtools-shared/src/utils.js

@@ -84,7 +84,7 @@ export function alphaSortKeys(
 export function getAllEnumerableKeys(
   obj: Object,
 ): Set<string | number | symbol> {
-  const keys = new Set();
+  const keys = new Set<string | number | symbol>();
   let current = obj;
   while (current != null) {
     const currentKeys = [
@@ -203,7 +203,7 @@ export function printOperationsArray(operations: Array<number>) {
   let i = 2;
 
   // Reassemble the string table.
-  const stringTable = [
+  const stringTable: Array<null | string> = [
     null, // ID = 0 corresponds to the null string.
   ];
   const stringTableSize = operations[i++];

packages/react-devtools-shell/src/app/ElementTypes/index.js

@@ -58,7 +58,7 @@ export default function ElementTypes(): React.Node {
     <Profiler id="test" onRender={() => {}}>
       <Fragment>
         <Context.Provider value={'def'}>
-          <Context.Consumer>{value => null}</Context.Consumer>
+          <Context.Consumer>{(value: $FlowFixMe) => null}</Context.Consumer>
         </Context.Provider>
         <StrictMode>
           <Cache>

packages/react-devtools-shell/src/app/InspectableElements/CircularReferences.js

@@ -9,8 +9,8 @@
 
 import * as React from 'react';
 
-const arrayOne = [];
+const arrayOne: $FlowFixMe = [];
-const arrayTwo = [];
+const arrayTwo: $FlowFixMe = [];
 arrayTwo.push(arrayOne);
 arrayOne.push(arrayTwo);
 

packages/react-devtools-shell/src/app/InspectableElements/Contexts.js

@@ -259,7 +259,7 @@ class ModernClassContextConsumerWithUpdates extends Component<any> {
   render(): any {
     return (
       <StringContextWithUpdates.Consumer>
-        {({string, setString}) => (
+        {({string, setString}: {string: string, setString: string => void}) => (
           <>
             {formatContextForDisplay(
               'ModernClassContextConsumerWithUpdates',
@@ -284,7 +284,9 @@ export default function Contexts(): React.Node {
         <LegacyContextProviderWithUpdates />
         <ModernContext.Provider value={contextData}>
           <ModernContext.Consumer>
-            {value => formatContextForDisplay('ModernContext.Consumer', value)}
+            {(value: $FlowFixMe) =>
+              formatContextForDisplay('ModernContext.Consumer', value)
+            }
           </ModernContext.Consumer>
           <ModernContextType />
         </ModernContext.Provider>
@@ -292,28 +294,44 @@ export default function Contexts(): React.Node {
         <FunctionalContextProviderWithContextUpdates />
         <ModernClassContextProviderWithUpdates />
         <ArrayContext.Consumer>
-          {value => formatContextForDisplay('ArrayContext.Consumer', value)}
+          {(value: $FlowFixMe) =>
+            formatContextForDisplay('ArrayContext.Consumer', value)
+          }
         </ArrayContext.Consumer>
         <BoolContext.Consumer>
-          {value => formatContextForDisplay('BoolContext.Consumer', value)}
+          {(value: $FlowFixMe) =>
+            formatContextForDisplay('BoolContext.Consumer', value)
+          }
         </BoolContext.Consumer>
         <FuncContext.Consumer>
-          {value => formatContextForDisplay('FuncContext.Consumer', value)}
+          {(value: $FlowFixMe) =>
+            formatContextForDisplay('FuncContext.Consumer', value)
+          }
         </FuncContext.Consumer>
         <NumberContext.Consumer>
-          {value => formatContextForDisplay('NumberContext.Consumer', value)}
+          {(value: $FlowFixMe) =>
+            formatContextForDisplay('NumberContext.Consumer', value)
+          }
         </NumberContext.Consumer>
         <StringContext.Consumer>
-          {value => formatContextForDisplay('StringContext.Consumer', value)}
+          {(value: $FlowFixMe) =>
+            formatContextForDisplay('StringContext.Consumer', value)
+          }
         </StringContext.Consumer>
         <SymbolContext.Consumer>
-          {value => formatContextForDisplay('SymbolContext.Consumer', value)}
+          {(value: $FlowFixMe) =>
+            formatContextForDisplay('SymbolContext.Consumer', value)
+          }
         </SymbolContext.Consumer>
         <NullContext.Consumer>
-          {value => formatContextForDisplay('NullContext.Consumer', value)}
+          {(value: $FlowFixMe) =>
+            formatContextForDisplay('NullContext.Consumer', value)
+          }
         </NullContext.Consumer>
         <UndefinedContext.Consumer>
-          {value => formatContextForDisplay('UndefinedContext.Consumer', value)}
+          {(value: $FlowFixMe) =>
+            formatContextForDisplay('UndefinedContext.Consumer', value)
+          }
         </UndefinedContext.Consumer>
       </ul>
     </div>

packages/react-devtools-shell/src/app/InspectableElements/SymbolKeys.js

@@ -16,6 +16,7 @@ const base = Object.create(Object.prototype, {
     enumerable: true,
     configurable: true,
   },
+  // $FlowFixMe[invalid-computed-prop]
   [Symbol('enumerableSymbolBase')]: {
     value: 1,
     writable: true,
@@ -28,6 +29,7 @@ const base = Object.create(Object.prototype, {
     enumerable: false,
     configurable: true,
   },
+  // $FlowFixMe[invalid-computed-prop]
   [Symbol('nonEnumerableSymbolBase')]: {
     value: 1,
     writable: true,
@@ -55,12 +57,14 @@ const data = Object.create(base, {
     enumerable: true,
     configurable: true,
   },
+  // $FlowFixMe[invalid-computed-prop]
   [Symbol('nonEnumerableSymbol')]: {
     value: 2,
     writable: true,
     enumerable: false,
     configurable: true,
   },
+  // $FlowFixMe[invalid-computed-prop]
   [Symbol('enumerableSymbol')]: {
     value: 3,
     writable: true,

packages/react-devtools-shell/src/app/SuspenseTree/index.js

@@ -54,12 +54,12 @@ function PrimaryFallbackTest({initialSuspend}) {
 
 function useTestSequence(label: string, T1: any => any, T2: any => any) {
   const [step, setStep] = useState(0);
-  const next = (
+  const next: $FlowFixMe = (
     <button onClick={() => setStep(s => (s + 1) % allSteps.length)}>
       next {label} content
     </button>
   );
-  const allSteps = [
+  const allSteps: $FlowFixMe = [
     <Fragment>{next}</Fragment>,
     <Fragment>
       {next} <T1 prop={step}>mount</T1>

packages/react-devtools-shell/src/app/ToDoList/List.js

@@ -45,7 +45,7 @@ export default function List(props: Props): React.Node {
   }, [newItemText, items, uid]);
 
   const handleKeyPress = useCallback(
-    event => {
+    (event: $FlowFixMe) => {
       if (event.key === 'Enter') {
         handleClick();
       }
@@ -54,19 +54,20 @@ export default function List(props: Props): React.Node {
   );
 
   const handleChange = useCallback(
-    event => {
+    (event: $FlowFixMe) => {
       setNewItemText(event.currentTarget.value);
     },
     [setNewItemText],
   );
 
   const removeItem = useCallback(
-    itemToRemove => setItems(items.filter(item => item !== itemToRemove)),
+    (itemToRemove: $FlowFixMe) =>
+      setItems(items.filter(item => item !== itemToRemove)),
     [items],
   );
 
   const toggleItem = useCallback(
-    itemToToggle => {
+    (itemToToggle: $FlowFixMe) => {
       // Dont use indexOf()
       // because editing props in DevTools creates a new Object.
       const index = items.findIndex(item => item.id === itemToToggle.id);

packages/react-devtools-timeline/src/CanvasPage.js

@@ -7,7 +7,7 @@
  * @flow
  */
 
-import type {Point} from './view-base';
+import type {Interaction, Point} from './view-base';
 import type {
   ReactEventInfo,
   TimelineData,
@@ -199,16 +199,16 @@ function AutoSizedCanvas({
   }, [searchIndex, searchRegExp, searchResults, viewState]);
 
   const surfaceRef = useRef(new Surface(resetHoveredEvent));
-  const userTimingMarksViewRef = useRef(null);
+  const userTimingMarksViewRef = useRef<null | UserTimingMarksView>(null);
-  const nativeEventsViewRef = useRef(null);
+  const nativeEventsViewRef = useRef<null | NativeEventsView>(null);
-  const schedulingEventsViewRef = useRef(null);
+  const schedulingEventsViewRef = useRef<null | SchedulingEventsView>(null);
-  const suspenseEventsViewRef = useRef(null);
+  const suspenseEventsViewRef = useRef<null | SuspenseEventsView>(null);
-  const componentMeasuresViewRef = useRef(null);
+  const componentMeasuresViewRef = useRef<null | ComponentMeasuresView>(null);
-  const reactMeasuresViewRef = useRef(null);
+  const reactMeasuresViewRef = useRef<null | ReactMeasuresView>(null);
-  const flamechartViewRef = useRef(null);
+  const flamechartViewRef = useRef<null | FlamechartView>(null);
-  const networkMeasuresViewRef = useRef(null);
+  const networkMeasuresViewRef = useRef<null | NetworkMeasuresView>(null);
-  const snapshotsViewRef = useRef(null);
+  const snapshotsViewRef = useRef<null | SnapshotsView>(null);
-  const thrownErrorsViewRef = useRef(null);
+  const thrownErrorsViewRef = useRef<null | ThrownErrorsView>(null);
 
   const {hideMenu: hideContextMenu} = useContext(RegistryContext);
 
@@ -484,7 +484,7 @@ function AutoSizedCanvas({
     }
   }, [width, height]);
 
-  const interactor = useCallback(interaction => {
+  const interactor = useCallback((interaction: Interaction) => {
     const canvas = canvasRef.current;
     if (canvas === null) {
       return;

packages/react-devtools-timeline/src/content-views/utils/text.js

@@ -12,7 +12,7 @@ import type {Rect} from '../../view-base';
 import {rectEqualToRect} from '../../view-base';
 import {COLORS, FONT_SIZE, TEXT_PADDING} from '../constants';
 
-const cachedTextWidths = new Map();
+const cachedTextWidths = new Map<string, number>();
 
 export function getTextWidth(
   context: CanvasRenderingContext2D,

packages/react-devtools-timeline/src/import-worker/preprocessData.js

@@ -391,7 +391,7 @@ function processResourceSendRequest(
   const data = event.args.data;
   const requestId = data.requestId;
 
-  const availableDepths = new Array(
+  const availableDepths = new Array<boolean>(
     state.requestIdToNetworkMeasureMap.size + 1,
   ).fill(true);
   state.requestIdToNetworkMeasureMap.forEach(({depth}) => {
@@ -557,7 +557,7 @@ function processTimelineEvent(
           .split('-');
         const lanes = getLanesFromTransportDecimalBitmask(laneBitmaskString);
 
-        const availableDepths = new Array(
+        const availableDepths = new Array<boolean>(
           state.unresolvedSuspenseEvents.size + 1,
         ).fill(true);
         state.unresolvedSuspenseEvents.forEach(({depth}) => {
@@ -1009,7 +1009,7 @@ export default async function preprocessData(
 ): Promise<TimelineData> {
   const flamechart = preprocessFlamechart(timeline);
 
-  const laneToReactMeasureMap = new Map();
+  const laneToReactMeasureMap: Map<ReactLane, Array<ReactMeasure>> = new Map();
   for (let lane: ReactLane = 0; lane < REACT_TOTAL_NUM_LANES; lane++) {
     laneToReactMeasureMap.set(lane, []);
   }

packages/react-devtools-timeline/src/timelineCache.js

@@ -55,9 +55,9 @@ export function importFile(file: File): TimelineData | Error {
   let record = fileNameToProfilerDataMap.get(fileName);
 
   if (!record) {
-    const callbacks = new Set();
+    const callbacks = new Set<() => mixed>();
     const wakeable: Wakeable = {
-      then(callback) {
+      then(callback: () => mixed) {
         callbacks.add(callback);
       },
 

packages/react-devtools/app.js

@@ -41,10 +41,13 @@ app.on('ready', function () {
 
   // https://stackoverflow.com/questions/32402327/
   // $FlowFixMe[incompatible-use] found when upgrading Flow
-  mainWindow.webContents.on('new-window', function (event, url) {
+  mainWindow.webContents.on(
-    event.preventDefault();
+    'new-window',
-    require('electron').shell.openExternal(url);
+    function (event: $FlowFixMe, url: $FlowFixMe) {
-  });
+      event.preventDefault();
+      require('electron').shell.openExternal(url);
+    },
+  );
 
   // and load the index.html of the app.
   // $FlowFixMe[incompatible-use] found when upgrading Flow

packages/react-dom-bindings/src/client/ReactDOMEventHandle.js

@@ -109,7 +109,7 @@ export function createEventHandle(
       }
     }
 
-    const eventHandle = (
+    const eventHandle: ReactDOMEventHandle = (
       target: EventTarget | ReactScopeInstance,
       callback: (SyntheticEvent<EventTarget>) => void,
     ) => {

packages/react-dom-bindings/src/client/setInnerHTML.js

@@ -12,7 +12,7 @@ import createMicrosoftUnsafeLocalFunction from './createMicrosoftUnsafeLocalFunc
 import {enableTrustedTypesIntegration} from 'shared/ReactFeatureFlags';
 
 // SVG temp container for IE lacking innerHTML
-let reusableSVGContainer;
+let reusableSVGContainer: HTMLElement;
 
 /**
  * Set the innerHTML property of a node
@@ -57,6 +57,8 @@ const setInnerHTML: (
       while (node.firstChild) {
         node.removeChild(node.firstChild);
       }
+      // $FlowFixMe[incompatible-use]
+      // $FlowFixMe[incompatible-type]
       while (svgNode.firstChild) {
         node.appendChild(svgNode.firstChild);
       }

packages/react-dom-bindings/src/events/DOMPluginEventSystem.js

@@ -459,6 +459,7 @@ function addTrappedEventListener(
   if (enableLegacyFBSupport && isDeferredListenerForLegacyFBSupport) {
     const originalListener = listener;
     // $FlowFixMe[missing-this-annot]
+    // $FlowFixMe[definition-cycle]
     listener = function (...p) {
       removeEventListener(
         targetContainer,

packages/react-dom-bindings/src/events/plugins/ChangeEventPlugin.js

@@ -51,8 +51,7 @@ function registerEvents() {
 }
 
 function createAndAccumulateChangeEvent(
-  // $FlowFixMe[missing-local-annot]
+  dispatchQueue: DispatchQueue,
-  dispatchQueue,
   inst: null | Fiber,
   nativeEvent: AnyNativeEvent,
   target: null | EventTarget,
@@ -89,7 +88,7 @@ function shouldUseChangeEvent(elem: Instance | TextInstance) {
 }
 
 function manualDispatchChangeEvent(nativeEvent: AnyNativeEvent) {
-  const dispatchQueue = [];
+  const dispatchQueue: DispatchQueue = [];
   createAndAccumulateChangeEvent(
     dispatchQueue,
     activeElementInst,

packages/react-dom-bindings/src/server/ReactDOMServerExternalRuntime.js

@@ -27,6 +27,7 @@ if (document.readyState === 'loading') {
   } else {
     // body may not exist yet if the fizz runtime is sent in <head>
     // (e.g. as a preinit resource)
+    // $FlowFixMe[recursive-definition]
     const domBodyObserver = new MutationObserver(() => {
       // We expect the body node to be stable once parsed / created
       if (document.body) {

packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js

@@ -1878,7 +1878,7 @@ function pushStartPreformattedElement(
 // HTML, we want to make sure that it's a safe tag.
 // http://www.w3.org/TR/REC-xml/#NT-Name
 const VALID_TAG_REGEX = /^[a-zA-Z][a-zA-Z:_\.\-\d]*$/; // Simplified subset
-const validatedTagCache = new Map();
+const validatedTagCache = new Map<string, PrecomputedChunk>();
 function startChunkForTag(tag: string): PrecomputedChunk {
   let tagStartChunk = validatedTagCache.get(tag);
   if (tagStartChunk === undefined) {

packages/react-dom-bindings/src/shared/ReactDOMResourceValidation.js

@@ -104,9 +104,11 @@ export function validatePreloadResourceDifference(
         originalWarningName,
       );
     } else {
-      let missingProps = null;
+      let missingProps: {[string]: $FlowFixMe} | null = null;
-      let extraProps = null;
+      let extraProps: {[string]: $FlowFixMe} | null = null;
-      let differentProps = null;
+      let differentProps: {
+        [string]: {latest: $FlowFixMe, original: $FlowFixMe},
+      } | null = null;
       if (originalProps.media != null && latestProps.media == null) {
         missingProps = missingProps || ({}: {[string]: $FlowFixMe});
         missingProps.media = originalProps.media;
@@ -164,9 +166,11 @@ export function validateStyleResourceDifference(
       latestProps,
       false,
     );
-    let missingProps = null;
+    let missingProps: {[string]: $FlowFixMe} | null = null;
-    let extraProps = null;
+    let extraProps: {[string]: $FlowFixMe} | null = null;
-    let differentProps = null;
+    let differentProps: {
+      [string]: {latest: $FlowFixMe, original: $FlowFixMe},
+    } | null = null;
     if (originalProps.media != null && latestProps.media == null) {
       missingProps = missingProps || ({}: {[string]: $FlowFixMe});
       missingProps.media = originalProps.media;
@@ -224,8 +228,10 @@ export function validateScriptResourceDifference(
       latestProps,
       false,
     );
-    let extraProps = null;
+    let extraProps: {[string]: $FlowFixMe} | null = null;
-    let differentProps = null;
+    let differentProps: {
+      [string]: {latest: $FlowFixMe, original: $FlowFixMe},
+    } | null = null;
 
     for (const propName in latestProps) {
       const propValue = latestProps[propName];
@@ -291,9 +297,11 @@ export function validateStyleAndHintProps(
       );
     }
 
-    let missingProps = null;
+    let missingProps: {[string]: $FlowFixMe} | null = null;
-    let extraProps = null;
+    let extraProps: {[string]: $FlowFixMe} | null = null;
-    let differentProps = null;
+    let differentProps: {
+      [string]: {latest: $FlowFixMe, original: $FlowFixMe},
+    } | null = null;
 
     for (const propName in styleProps) {
       const styleValue = styleProps[propName];
@@ -373,9 +381,11 @@ export function validateScriptAndHintProps(
       );
     }
 
-    let missingProps = null;
+    let missingProps: {[string]: $FlowFixMe} | null = null;
-    let extraProps = null;
+    let extraProps: {[string]: $FlowFixMe} | null = null;
-    let differentProps = null;
+    let differentProps: {
+      [string]: {latest: $FlowFixMe, original: $FlowFixMe},
+    } | null = null;
 
     for (const propName in scriptProps) {
       const scriptValue = scriptProps[propName];
@@ -505,9 +515,9 @@ export function validateURLKeyedUpdatedProps(
     // Whether they are null or undefined
     if (pendingProps[urlPropKey] === currentProps[urlPropKey]) {
       // If we have the same href/src we need all other props to be the same
-      let missingProps;
+      let missingProps: ?{[string]: mixed};
-      let extraProps;
+      let extraProps: ?{[string]: mixed};
-      let differentProps;
+      let differentProps: ?{[string]: {latest: mixed, original: mixed}};
       const allProps = Array.from(
         new Set(Object.keys(currentProps).concat(Object.keys(pendingProps))),
       );

packages/react-dom/src/client/ReactDOMLegacy.js

@@ -130,7 +130,7 @@ function legacyCreateRootFromDOMContainer(
       };
     }
 
-    const root = createHydrationContainer(
+    const root: FiberRoot = createHydrationContainer(
       initialChildren,
       callback,
       container,

packages/react-dom/src/server/ReactDOMFizzServerBrowser.js

@@ -49,7 +49,7 @@ function renderToReadableStream(
   return new Promise((resolve, reject) => {
     let onFatalError;
     let onAllReady;
-    const allReady = new Promise((res, rej) => {
+    const allReady = new Promise<void>((res, rej) => {
       onAllReady = res;
       onFatalError = rej;
     });

packages/react-dom/src/server/ReactDOMFizzServerBun.js

@@ -49,7 +49,7 @@ function renderToReadableStream(
   return new Promise((resolve, reject) => {
     let onFatalError;
     let onAllReady;
-    const allReady = new Promise((res, rej) => {
+    const allReady = new Promise<void>((res, rej) => {
       onAllReady = res;
       onFatalError = rej;
     });

packages/react-dom/src/server/ReactDOMFizzServerEdge.js

@@ -49,7 +49,7 @@ function renderToReadableStream(
   return new Promise((resolve, reject) => {
     let onFatalError;
     let onAllReady;
-    const allReady = new Promise((res, rej) => {
+    const allReady = new Promise<void>((res, rej) => {
       onAllReady = res;
       onFatalError = rej;
     });

packages/react-dom/src/server/ReactDOMFizzStaticNode.js

@@ -66,7 +66,7 @@ function prerenderToNodeStreams(
     const onFatalError = reject;
 
     function onAllReady() {
-      const readable = new Readable({
+      const readable: Readable = new Readable({
         read() {
           startFlowing(request, writable);
         },

packages/react-interactions/events/src/dom/create-event-handle/useEvent.js

@@ -32,7 +32,7 @@ export default function useEvent(
 
   if (useEventHandle === null) {
     const setEventHandle = unstable_createEventHandle(event, options);
-    const clears = new Map();
+    const clears = new Map<EventTarget, () => void>();
     useEventHandle = {
       setListener(
         target: EventTarget,

packages/react-native-renderer/src/ReactFabric.js

@@ -10,6 +10,7 @@
 import type {HostComponent} from './ReactNativeTypes';
 import type {ReactPortal, ReactNodeList} from 'shared/ReactTypes';
 import type {ElementRef, Element, ElementType} from 'react';
+import type {FiberRoot} from 'react-reconciler/src/ReactInternalTypes';
 
 import './ReactFabricInjection';
 
@@ -257,7 +258,7 @@ function createPortal(
 
 setBatchingImplementation(batchedUpdatesImpl, discreteUpdates);
 
-const roots = new Map();
+const roots = new Map<number, FiberRoot>();
 
 export {
   // This is needed for implementation details of TouchableNativeFeedback

packages/react-native-renderer/src/ReactFabricEventEmitter.js

@@ -45,7 +45,7 @@ function extractPluginEvents(
   nativeEvent: AnyNativeEvent,
   nativeEventTarget: null | EventTarget,
 ): Array<ReactSyntheticEvent> | ReactSyntheticEvent | null {
-  let events = null;
+  let events: Array<ReactSyntheticEvent> | ReactSyntheticEvent | null = null;
   const legacyPlugins = ((plugins: any): Array<LegacyPluginModule<Event>>);
   for (let i = 0; i < legacyPlugins.length; i++) {
     // Not every plugin in the ordering may be loaded at runtime.

packages/react-native-renderer/src/ReactNativeAttributePayload.js

@@ -212,7 +212,7 @@ function addNestedProperty(
   updatePayload: null | Object,
   nextProp: NestedNode,
   validAttributes: AttributeConfiguration,
-) {
+): $FlowFixMe {
   if (!nextProp) {
     return updatePayload;
   }

packages/react-native-renderer/src/ReactNativeEventEmitter.js

@@ -130,7 +130,7 @@ function extractPluginEvents(
   nativeEvent: AnyNativeEvent,
   nativeEventTarget: null | EventTarget,
 ): Array<ReactSyntheticEvent> | ReactSyntheticEvent | null {
-  let events = null;
+  let events: Array<ReactSyntheticEvent> | ReactSyntheticEvent | null = null;
   const legacyPlugins = ((plugins: any): Array<LegacyPluginModule<Event>>);
   for (let i = 0; i < legacyPlugins.length; i++) {
     // Not every plugin in the ordering may be loaded at runtime.

packages/react-native-renderer/src/ReactNativeFiberInspector.js

@@ -34,7 +34,7 @@ let getInspectorDataForInstance: (
   closestInstance: Fiber | null,
 ) => InspectorData;
 let getOwnerHierarchy;
-let traverseOwnerTreeUp;
+let traverseOwnerTreeUp: (hierarchy: Array<$FlowFixMe>, instance: any) => void;
 
 if (__DEV__ || enableGetInspectorDataForInstanceInProduction) {
   // $FlowFixMe[missing-local-annot]
@@ -124,7 +124,7 @@ if (__DEV__ || enableGetInspectorDataForInstanceInProduction) {
   };
 
   getOwnerHierarchy = function (instance: any) {
-    const hierarchy = [];
+    const hierarchy: Array<$FlowFixMe> = [];
     traverseOwnerTreeUp(hierarchy, instance);
     return hierarchy;
   };
@@ -142,7 +142,7 @@ if (__DEV__ || enableGetInspectorDataForInstanceInProduction) {
   };
 
   // $FlowFixMe[missing-local-annot]
-  traverseOwnerTreeUp = function (hierarchy, instance: any) {
+  traverseOwnerTreeUp = function (hierarchy, instance: any): void {
     if (instance) {
       hierarchy.unshift(instance);
       traverseOwnerTreeUp(hierarchy, instance._debugOwner);

packages/react-native-renderer/src/ReactNativeRenderer.js

@@ -10,6 +10,7 @@
 import type {HostComponent} from './ReactNativeTypes';
 import type {ReactPortal, ReactNodeList} from 'shared/ReactTypes';
 import type {ElementRef, Element, ElementType} from 'react';
+import type {FiberRoot} from 'react-reconciler/src/ReactInternalTypes';
 
 import './ReactNativeInjection';
 
@@ -263,7 +264,7 @@ function computeComponentStackForErrorReporting(reactTag: number): string {
   return getStackByFiberInDevAndProd(fiber);
 }
 
-const roots = new Map();
+const roots = new Map<number, FiberRoot>();
 
 const Internals = {
   computeComponentStackForErrorReporting,

packages/react-reconciler/src/ReactChildFiber.js

@@ -768,7 +768,7 @@ function createChildReconciler(
 
     if (__DEV__) {
       // First, validate keys.
-      let knownKeys = null;
+      let knownKeys: Set<string> | null = null;
       for (let i = 0; i < newChildren.length; i++) {
         const child = newChildren[i];
         knownKeys = warnOnInvalidKey(child, knownKeys, returnFiber);
@@ -961,7 +961,7 @@ function createChildReconciler(
       // We'll get a different iterator later for the main pass.
       const newChildren = iteratorFn.call(newChildrenIterable);
       if (newChildren) {
-        let knownKeys = null;
+        let knownKeys: Set<string> | null = null;
         let step = newChildren.next();
         for (; !step.done; step = newChildren.next()) {
           const child = step.value;

packages/react-reconciler/src/ReactFiberBeginWork.js

@@ -1492,7 +1492,7 @@ function updateHostRoot(
     if (workInProgress.flags & ForceClientRender) {
       // Something errored during a previous attempt to hydrate the shell, so we
       // forced a client render.
-      const recoverableError = createCapturedValueAtFiber(
+      const recoverableError = createCapturedValueAtFiber<mixed>(
         new Error(
           'There was an error while hydrating. Because the error happened outside ' +
             'of a Suspense boundary, the entire root will switch to ' +
@@ -1508,7 +1508,7 @@ function updateHostRoot(
         recoverableError,
       );
     } else if (nextChildren !== prevChildren) {
-      const recoverableError = createCapturedValueAtFiber(
+      const recoverableError = createCapturedValueAtFiber<mixed>(
         new Error(
           'This root received an early update, before anything was able ' +
             'hydrate. Switched the entire root to client rendering.',
@@ -2820,7 +2820,7 @@ function updateDehydratedSuspenseComponent(
         );
       }
       (error: any).digest = digest;
-      const capturedValue = createCapturedValue(error, digest, stack);
+      const capturedValue = createCapturedValue<mixed>(error, digest, stack);
       return retrySuspenseComponentWithoutHydrating(
         current,
         workInProgress,
@@ -2955,7 +2955,7 @@ function updateDehydratedSuspenseComponent(
       pushPrimaryTreeSuspenseHandler(workInProgress);
 
       workInProgress.flags &= ~ForceClientRender;
-      const capturedValue = createCapturedValue(
+      const capturedValue = createCapturedValue<mixed>(
         new Error(
           'There was an error while hydrating this Suspense boundary. ' +
             'Switched to client rendering.',

packages/react-reconciler/src/ReactFiberClassComponent.js

@@ -92,16 +92,16 @@ let didWarnAboutContextTypeAndContextTypes;
 let didWarnAboutInvalidateContextType;
 
 if (__DEV__) {
-  didWarnAboutStateAssignmentForComponent = new Set();
+  didWarnAboutStateAssignmentForComponent = new Set<string>();
-  didWarnAboutUninitializedState = new Set();
+  didWarnAboutUninitializedState = new Set<string>();
-  didWarnAboutGetSnapshotBeforeUpdateWithoutDidUpdate = new Set();
+  didWarnAboutGetSnapshotBeforeUpdateWithoutDidUpdate = new Set<string>();
-  didWarnAboutLegacyLifecyclesAndDerivedState = new Set();
+  didWarnAboutLegacyLifecyclesAndDerivedState = new Set<string>();
-  didWarnAboutDirectlyAssigningPropsToState = new Set();
+  didWarnAboutDirectlyAssigningPropsToState = new Set<string>();
-  didWarnAboutUndefinedDerivedState = new Set();
+  didWarnAboutUndefinedDerivedState = new Set<string>();
-  didWarnAboutContextTypeAndContextTypes = new Set();
+  didWarnAboutContextTypeAndContextTypes = new Set<string>();
-  didWarnAboutInvalidateContextType = new Set();
+  didWarnAboutInvalidateContextType = new Set<string>();
 
-  const didWarnOnInvalidCallback = new Set();
+  const didWarnOnInvalidCallback = new Set<string>();
 
   warnOnInvalidCallback = function (callback: mixed, callerName: string) {
     if (callback === null || typeof callback === 'function') {

packages/react-reconciler/src/ReactFiberClassUpdateQueue.js

@@ -536,7 +536,7 @@ export function processUpdateQueue<State>(
 
     let newBaseState = null;
     let newFirstBaseUpdate = null;
-    let newLastBaseUpdate = null;
+    let newLastBaseUpdate: null | Update<State> = null;
 
     let update: Update<State> = firstBaseUpdate;
     do {

packages/react-reconciler/src/ReactFiberCompleteWork.js

@@ -204,7 +204,12 @@ function hadNoMutationsEffects(current: null | Fiber, completedWork: Fiber) {
   return true;
 }
 
-let appendAllChildren;
+let appendAllChildren: (
+  parent: Instance,
+  workInProgress: Fiber,
+  needsVisibilityToggle: boolean,
+  isHidden: boolean,
+) => void;
 let updateHostContainer;
 let updateHostComponent;
 let updateHostText;

packages/react-reconciler/src/ReactFiberHooks.js

@@ -168,8 +168,8 @@ let didWarnAboutMismatchedHooksForComponent;
 let didWarnUncachedGetSnapshot;
 let didWarnAboutUseWrappedInTryCatch;
 if (__DEV__) {
-  didWarnAboutMismatchedHooksForComponent = new Set();
+  didWarnAboutMismatchedHooksForComponent = new Set<string | null>();
-  didWarnAboutUseWrappedInTryCatch = new Set();
+  didWarnAboutUseWrappedInTryCatch = new Set<string | null>();
 }
 
 export type Hook = {
@@ -1112,7 +1112,7 @@ function updateReducer<S, I, A>(
 
     let newBaseState = null;
     let newBaseQueueFirst = null;
-    let newBaseQueueLast = null;
+    let newBaseQueueLast: Update<S, A> | null = null;
     let update = first;
     do {
       // An extra OffscreenLane bit is added to updates that were made to

packages/react-reconciler/src/ReactFiberHotReloading.js

@@ -274,7 +274,7 @@ function scheduleFibersWithFamiliesRecursively(
   fiber: Fiber,
   updatedFamilies: Set<Family>,
   staleFamilies: Set<Family>,
-) {
+): void {
   if (__DEV__) {
     const {alternate, child, sibling, tag, type} = fiber;
 
@@ -353,7 +353,7 @@ export const findHostInstancesForRefresh: FindHostInstancesForRefresh = (
   families: Array<Family>,
 ): Set<Instance> => {
   if (__DEV__) {
-    const hostInstances = new Set();
+    const hostInstances = new Set<Instance>();
     const types = new Set(families.map(family => family.current));
     findHostInstancesForMatchingFibersRecursively(
       root.current,

packages/react-reconciler/src/ReactFiberReconciler.js

@@ -554,7 +554,7 @@ if (__DEV__) {
     obj: Object | Array<any>,
     path: Array<string | number>,
     index: number,
-  ) => {
+  ): $FlowFixMe => {
     const key = path[index];
     const updated = isArray(obj) ? obj.slice() : {...obj};
     if (index + 1 === path.length) {
@@ -582,7 +582,7 @@ if (__DEV__) {
     oldPath: Array<string | number>,
     newPath: Array<string | number>,
     index: number,
-  ) => {
+  ): $FlowFixMe => {
     const oldKey = oldPath[index];
     const updated = isArray(obj) ? obj.slice() : {...obj};
     if (index + 1 === oldPath.length) {
@@ -633,7 +633,7 @@ if (__DEV__) {
     path: Array<string | number>,
     index: number,
     value: any,
-  ) => {
+  ): $FlowFixMe => {
     if (index >= path.length) {
       return value;
     }

packages/react-reconciler/src/ReactFiberTreeReflection.js

@@ -275,7 +275,7 @@ export function findCurrentHostFiber(parent: Fiber): Fiber | null {
     : null;
 }
 
-function findCurrentHostFiberImpl(node: Fiber) {
+function findCurrentHostFiberImpl(node: Fiber): Fiber | null {
   // Next we'll drill down this component to find the first HostComponent/Text.
   const tag = node.tag;
   if (
@@ -306,7 +306,7 @@ export function findCurrentHostFiberWithNoPortals(parent: Fiber): Fiber | null {
     : null;
 }
 
-function findCurrentHostFiberWithNoPortalsImpl(node: Fiber) {
+function findCurrentHostFiberWithNoPortalsImpl(node: Fiber): Fiber | null {
   // Next we'll drill down this component to find the first HostComponent/Text.
   const tag = node.tag;
   if (

packages/react-reconciler/src/ReactFiberWorkLoop.js

@@ -404,7 +404,8 @@ export function addTransitionStartCallbackToPendingTransition(
     }
 
     if (currentPendingTransitionCallbacks.transitionStart === null) {
-      currentPendingTransitionCallbacks.transitionStart = [];
+      currentPendingTransitionCallbacks.transitionStart =
+        ([]: Array<Transition>);
     }
 
     currentPendingTransitionCallbacks.transitionStart.push(transition);
@@ -537,7 +538,8 @@ export function addTransitionCompleteCallbackToPendingTransition(
     }
 
     if (currentPendingTransitionCallbacks.transitionComplete === null) {
-      currentPendingTransitionCallbacks.transitionComplete = [];
+      currentPendingTransitionCallbacks.transitionComplete =
+        ([]: Array<Transition>);
     }
 
     currentPendingTransitionCallbacks.transitionComplete.push(transition);
@@ -1000,7 +1002,10 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
 
 // This is the entry point for every concurrent task, i.e. anything that
 // goes through Scheduler.
-function performConcurrentWorkOnRoot(root: FiberRoot, didTimeout: boolean) {
+function performConcurrentWorkOnRoot(
+  root: FiberRoot,
+  didTimeout: boolean,
+): $FlowFixMe {
   if (enableProfilerTimer && enableProfilerNestedUpdatePhase) {
     resetNestedUpdateFlag();
   }
@@ -3329,7 +3334,7 @@ export function attachPingListener(
   let threadIDs;
   if (pingCache === null) {
     pingCache = root.pingCache = new PossiblyWeakMap();
-    threadIDs = new Set();
+    threadIDs = new Set<mixed>();
     pingCache.set(wakeable, threadIDs);
   } else {
     threadIDs = pingCache.get(wakeable);
@@ -3829,7 +3834,7 @@ if (__DEV__ && replayFailedUnitOfWorkWithInvokeGuardedCallback) {
 let didWarnAboutUpdateInRender = false;
 let didWarnAboutUpdateInRenderForAnotherComponent;
 if (__DEV__) {
-  didWarnAboutUpdateInRenderForAnotherComponent = new Set();
+  didWarnAboutUpdateInRenderForAnotherComponent = new Set<string>();
 }
 
 function warnAboutRenderPhaseUpdatesInDEV(fiber: Fiber) {

packages/react-reconciler/src/ReactProfilerTimer.js

@@ -122,7 +122,6 @@ function stopProfilerTimerIfRunningAndRecordDelta(
 
   if (profilerStartTime >= 0) {
     const elapsedTime = now() - profilerStartTime;
-    // $FlowFixMe[unsafe-addition] addition with possible null/undefined value
     fiber.actualDuration += elapsedTime;
     if (overrideBaseTime) {
       fiber.selfBaseDuration = elapsedTime;

packages/react-reconciler/src/ReactStrictModeWarnings.js

@@ -58,7 +58,7 @@ if (__DEV__) {
   let pendingUNSAFE_ComponentWillUpdateWarnings: Array<Fiber> = [];
 
   // Tracks components we have already warned about.
-  const didWarnAboutUnsafeLifecycles = new Set();
+  const didWarnAboutUnsafeLifecycles = new Set<mixed>();
 
   ReactStrictModeWarnings.recordUnsafeLifecycleWarnings = (
     fiber: Fiber,
@@ -115,7 +115,7 @@ if (__DEV__) {
 
   ReactStrictModeWarnings.flushPendingUnsafeLifecycleWarnings = () => {
     // We do an initial pass to gather component names
-    const componentWillMountUniqueNames = new Set();
+    const componentWillMountUniqueNames = new Set<string>();
     if (pendingComponentWillMountWarnings.length > 0) {
       pendingComponentWillMountWarnings.forEach(fiber => {
         componentWillMountUniqueNames.add(
@@ -126,7 +126,7 @@ if (__DEV__) {
       pendingComponentWillMountWarnings = [];
     }
 
-    const UNSAFE_componentWillMountUniqueNames = new Set();
+    const UNSAFE_componentWillMountUniqueNames = new Set<string>();
     if (pendingUNSAFE_ComponentWillMountWarnings.length > 0) {
       pendingUNSAFE_ComponentWillMountWarnings.forEach(fiber => {
         UNSAFE_componentWillMountUniqueNames.add(
@@ -137,7 +137,7 @@ if (__DEV__) {
       pendingUNSAFE_ComponentWillMountWarnings = [];
     }
 
-    const componentWillReceivePropsUniqueNames = new Set();
+    const componentWillReceivePropsUniqueNames = new Set<string>();
     if (pendingComponentWillReceivePropsWarnings.length > 0) {
       pendingComponentWillReceivePropsWarnings.forEach(fiber => {
         componentWillReceivePropsUniqueNames.add(
@@ -149,7 +149,7 @@ if (__DEV__) {
       pendingComponentWillReceivePropsWarnings = [];
     }
 
-    const UNSAFE_componentWillReceivePropsUniqueNames = new Set();
+    const UNSAFE_componentWillReceivePropsUniqueNames = new Set<string>();
     if (pendingUNSAFE_ComponentWillReceivePropsWarnings.length > 0) {
       pendingUNSAFE_ComponentWillReceivePropsWarnings.forEach(fiber => {
         UNSAFE_componentWillReceivePropsUniqueNames.add(
@@ -161,7 +161,7 @@ if (__DEV__) {
       pendingUNSAFE_ComponentWillReceivePropsWarnings = [];
     }
 
-    const componentWillUpdateUniqueNames = new Set();
+    const componentWillUpdateUniqueNames = new Set<string>();
     if (pendingComponentWillUpdateWarnings.length > 0) {
       pendingComponentWillUpdateWarnings.forEach(fiber => {
         componentWillUpdateUniqueNames.add(
@@ -173,7 +173,7 @@ if (__DEV__) {
       pendingComponentWillUpdateWarnings = [];
     }
 
-    const UNSAFE_componentWillUpdateUniqueNames = new Set();
+    const UNSAFE_componentWillUpdateUniqueNames = new Set<string>();
     if (pendingUNSAFE_ComponentWillUpdateWarnings.length > 0) {
       pendingUNSAFE_ComponentWillUpdateWarnings.forEach(fiber => {
         UNSAFE_componentWillUpdateUniqueNames.add(
@@ -288,7 +288,7 @@ if (__DEV__) {
   let pendingLegacyContextWarning: FiberToFiberComponentsMap = new Map();
 
   // Tracks components we have already warned about.
-  const didWarnAboutLegacyContext = new Set();
+  const didWarnAboutLegacyContext = new Set<mixed>();
 
   ReactStrictModeWarnings.recordLegacyContextWarning = (
     fiber: Fiber,
@@ -331,7 +331,7 @@ if (__DEV__) {
         }
         const firstFiber = fiberArray[0];
 
-        const uniqueNames = new Set();
+        const uniqueNames = new Set<string>();
         fiberArray.forEach(fiber => {
           uniqueNames.add(getComponentNameFromFiber(fiber) || 'Component');
           didWarnAboutLegacyContext.add(fiber.type);

packages/react-refresh/src/ReactFreshRuntime.js

@@ -162,14 +162,14 @@ function resolveFamily(type: any) {
 
 // If we didn't care about IE11, we could use new Map/Set(iterable).
 function cloneMap<K, V>(map: Map<K, V>): Map<K, V> {
-  const clone = new Map();
+  const clone = new Map<K, V>();
   map.forEach((value, key) => {
     clone.set(key, value);
   });
   return clone;
 }
 function cloneSet<T>(set: Set<T>): Set<T> {
-  const clone = new Set();
+  const clone = new Set<T>();
   set.forEach(value => {
     clone.add(value);
   });
@@ -201,8 +201,8 @@ export function performReactRefresh(): RefreshUpdate | null {
 
   isPerformingRefresh = true;
   try {
-    const staleFamilies = new Set();
+    const staleFamilies = new Set<Family>();
-    const updatedFamilies = new Set();
+    const updatedFamilies = new Set<Family>();
 
     const updates = pendingUpdates;
     pendingUpdates = [];
@@ -418,7 +418,7 @@ export function findAffectedHostInstances(
   families: Array<Family>,
 ): Set<Instance> {
   if (__DEV__) {
-    const affectedInstances = new Set();
+    const affectedInstances = new Set<Instance>();
     mountedRoots.forEach(root => {
       const helpers = helpersByRoot.get(root);
       if (helpers === undefined) {

packages/react-server-dom-relay/src/ReactFlightDOMRelayClientHostConfig.js

@@ -44,14 +44,18 @@ export function resolveClientReference<T>(
   return resolveClientReferenceImpl(moduleData);
 }
 
-// $FlowFixMe[missing-local-annot]
+function parseModelRecursively(
-function parseModelRecursively(response: Response, parentObj, key, value) {
+  response: Response,
+  parentObj: {+[key: string]: JSONValue} | $ReadOnlyArray<JSONValue>,
+  key: string,
+  value: JSONValue,
+): $FlowFixMe {
   if (typeof value === 'string') {
     return parseModelString(response, parentObj, key, value);
   }
   if (typeof value === 'object' && value !== null) {
     if (isArray(value)) {
-      const parsedValue = [];
+      const parsedValue: Array<$FlowFixMe> = [];
       for (let i = 0; i < value.length; i++) {
         (parsedValue: any)[i] = parseModelRecursively(
           response,

packages/react-server-dom-webpack/src/ReactFlightDOMClient.js

@@ -31,7 +31,14 @@ function startReadingFromStream(
   stream: ReadableStream,
 ): void {
   const reader = stream.getReader();
-  function progress({done, value}: {done: boolean, value: ?any, ...}) {
+  function progress({
+    done,
+    value,
+  }: {
+    done: boolean,
+    value: ?any,
+    ...
+  }): void | Promise<void> {
     if (done) {
       close(response);
       return;

packages/react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js

@@ -74,7 +74,11 @@ module.exports = function register() {
   };
 
   const proxyHandlers = {
-    get: function (target: Function, name: string, receiver: Proxy<Function>) {
+    get: function (
+      target: Function,
+      name: string,
+      receiver: Proxy<Function>,
+    ): $FlowFixMe {
       switch (name) {
         // These names are read by the Flight runtime if you end up using the exports object.
         case '$$typeof':
@@ -143,14 +147,10 @@ module.exports = function register() {
             target.status = 'fulfilled';
             target.value = proxy;
 
-            // $FlowFixMe[missing-local-annot]
             const then = (target.then = Object.defineProperties(
               (function then(resolve, reject: any) {
                 // Expose to React.
-                return Promise.resolve(
+                return Promise.resolve(resolve(proxy));
-                  // $FlowFixMe[incompatible-call] found when upgrading Flow
-                  resolve(proxy),
-                );
               }: any),
               // If this is not used as a Promise but is treated as a reference to a `.then`
               // export then we should treat it as a reference to that name.
@@ -200,7 +200,7 @@ module.exports = function register() {
       // Pretend to be a Promise in case anyone asks.
       return PROMISE_PROTOTYPE;
     },
-    set: function () {
+    set: function (): empty {
       throw new Error('Cannot assign to a client module from a server module.');
     },
   };

packages/react-server-native-relay/src/ReactFlightNativeRelayClientHostConfig.js

@@ -44,14 +44,18 @@ export function resolveClientReference<T>(
   return resolveClientReferenceImpl(moduleData);
 }
 
-// $FlowFixMe[missing-local-annot]
+function parseModelRecursively(
-function parseModelRecursively(response: Response, parentObj, key, value) {
+  response: Response,
+  parentObj: {+[key: string]: JSONValue} | $ReadOnlyArray<JSONValue>,
+  key: string,
+  value: JSONValue,
+): $FlowFixMe {
   if (typeof value === 'string') {
     return parseModelString(response, parentObj, key, value);
   }
   if (typeof value === 'object' && value !== null) {
     if (isArray(value)) {
-      const parsedValue = [];
+      const parsedValue: Array<$FlowFixMe> = [];
       for (let i = 0; i < value.length; i++) {
         (parsedValue: any)[i] = parseModelRecursively(
           response,

packages/react-server/src/ReactFizzClassComponent.js

@@ -31,15 +31,15 @@ let didWarnAboutContextTypeAndContextTypes;
 let didWarnAboutInvalidateContextType;
 
 if (__DEV__) {
-  didWarnAboutUninitializedState = new Set();
+  didWarnAboutUninitializedState = new Set<string>();
-  didWarnAboutGetSnapshotBeforeUpdateWithoutDidUpdate = new Set();
+  didWarnAboutGetSnapshotBeforeUpdateWithoutDidUpdate = new Set<mixed>();
-  didWarnAboutLegacyLifecyclesAndDerivedState = new Set();
+  didWarnAboutLegacyLifecyclesAndDerivedState = new Set<string>();
-  didWarnAboutDirectlyAssigningPropsToState = new Set();
+  didWarnAboutDirectlyAssigningPropsToState = new Set<string>();
-  didWarnAboutUndefinedDerivedState = new Set();
+  didWarnAboutUndefinedDerivedState = new Set<string>();
-  didWarnAboutContextTypeAndContextTypes = new Set();
+  didWarnAboutContextTypeAndContextTypes = new Set<mixed>();
-  didWarnAboutInvalidateContextType = new Set();
+  didWarnAboutInvalidateContextType = new Set<mixed>();
 
-  const didWarnOnInvalidCallback = new Set();
+  const didWarnOnInvalidCallback = new Set<string>();
 
   warnOnInvalidCallback = function (callback: mixed, callerName: string) {
     if (callback === null || typeof callback === 'function') {

packages/react-server/src/ReactFizzHooks.js

@@ -461,7 +461,7 @@ function dispatchAction<A>(
   componentIdentity: Object,
   queue: UpdateQueue<A>,
   action: A,
-) {
+): void {
   if (numberOfReRenders >= RE_RENDER_LIMIT) {
     throw new Error(
       'Too many re-renders. React limits the number of renders to prevent ' +
@@ -615,7 +615,7 @@ function useCacheRefresh(): <T>(?() => T, ?T) => void {
 }
 
 function useMemoCache(size: number): Array<any> {
-  const data = new Array(size);
+  const data = new Array<any>(size);
   for (let i = 0; i < size; i++) {
     data[i] = REACT_MEMO_CACHE_SENTINEL;
   }

packages/react-server/src/ReactFizzServer.js

@@ -275,10 +275,10 @@ export function createRequest(
   onShellError: void | ((error: mixed) => void),
   onFatalError: void | ((error: mixed) => void),
 ): Request {
-  const pingedTasks = [];
+  const pingedTasks: Array<Task> = [];
   const abortSet: Set<Task> = new Set();
   const resources: Resources = createResources();
-  const request = {
+  const request: Request = {
     destination: null,
     responseState,
     progressiveChunkSize:
@@ -294,11 +294,11 @@ export function createRequest(
     completedRootSegment: null,
     abortableTasks: abortSet,
     pingedTasks: pingedTasks,
-    clientRenderedBoundaries: ([]: Array<SuspenseBoundary>),
+    clientRenderedBoundaries: [],
-    completedBoundaries: ([]: Array<SuspenseBoundary>),
+    completedBoundaries: [],
-    partialBoundaries: ([]: Array<SuspenseBoundary>),
+    partialBoundaries: [],
-    preamble: ([]: Array<Chunk | PrecomputedChunk>),
+    preamble: [],
-    postamble: ([]: Array<Chunk | PrecomputedChunk>),
+    postamble: [],
     onError: onError === undefined ? defaultErrorHandler : onError,
     onAllReady: onAllReady === undefined ? noop : onAllReady,
     onShellReady: onShellReady === undefined ? noop : onShellReady,

packages/react-server/src/ReactFlightHooks.js

@@ -94,7 +94,7 @@ export const HooksDispatcher: Dispatcher = {
     return unsupportedRefresh;
   },
   useMemoCache(size: number): Array<any> {
-    const data = new Array(size);
+    const data = new Array<any>(size);
     for (let i = 0; i < size; i++) {
       data[i] = REACT_MEMO_CACHE_SENTINEL;
     }

packages/react-server/src/ReactFlightServer.js

@@ -171,8 +171,8 @@ export function createRequest(
   ReactCurrentCache.current = DefaultCacheDispatcher;
 
   const abortSet: Set<Task> = new Set();
-  const pingedTasks = [];
+  const pingedTasks: Array<Task> = [];
-  const request = {
+  const request: Request = {
     status: OPEN,
     fatalError: null,
     destination: null,
@@ -182,9 +182,9 @@ export function createRequest(
     pendingChunks: 0,
     abortableTasks: abortSet,
     pingedTasks: pingedTasks,
-    completedModuleChunks: ([]: Array<Chunk>),
+    completedModuleChunks: [],
-    completedJSONChunks: ([]: Array<Chunk>),
+    completedJSONChunks: [],
-    completedErrorChunks: ([]: Array<Chunk>),
+    completedErrorChunks: [],
     writtenSymbols: new Map(),
     writtenModules: new Map(),
     writtenProviders: new Map(),
@@ -485,7 +485,7 @@ function createTask(
   abortSet: Set<Task>,
 ): Task {
   const id = request.nextChunkId++;
-  const task = {
+  const task: Task = {
     id,
     status: PENDING,
     model,