Enable prefer-const lint rules (#18451)

* Enable prefer-const rule

Stylistically I don't like this but Closure Compiler takes advantage of
this information.

* Auto-fix lints

* Manually fix the remaining callsites

.eslintrc.js

@@ -126,6 +126,7 @@ module.exports = {
       },
       rules: {
         'no-var': ERROR,
+        'prefer-const': ERROR,
         strict: OFF,
       },
     },

packages/babel-plugin-react-jsx/src/TransformJSXToReactBabelPlugin.js

@@ -115,7 +115,7 @@ You can turn on the 'throwIfNamespace' flag to bypass this warning.`,
           'Fragment tags are only supported in React 16 and up.',
         );
       }
-      let callExpr = buildJSXFragmentCall(path, file);
+      const callExpr = buildJSXFragmentCall(path, file);
 
       if (callExpr) {
         path.replaceWith(t.inherits(callExpr, path.node));

packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js

@@ -62,10 +62,10 @@ export default {
     const scopeManager = context.getSourceCode().scopeManager;
 
     // Should be shared between visitors.
-    let setStateCallSites = new WeakMap();
-    let stateVariables = new WeakSet();
-    let staticKnownValueCache = new WeakMap();
-    let functionWithoutCapturedValueCache = new WeakMap();
+    const setStateCallSites = new WeakMap();
+    const stateVariables = new WeakSet();
+    const staticKnownValueCache = new WeakMap();
+    const functionWithoutCapturedValueCache = new WeakMap();
     function memoizeWithWeakMap(fn, map) {
       return function(arg) {
         if (map.has(arg)) {
@@ -400,12 +400,12 @@ export default {
         // Search the direct component subscopes for
         // top-level function definitions matching this reference.
         const fnNode = def.node;
-        let childScopes = componentScope.childScopes;
+        const childScopes = componentScope.childScopes;
         let fnScope = null;
         let i;
         for (i = 0; i < childScopes.length; i++) {
-          let childScope = childScopes[i];
-          let childScopeBlock = childScope.block;
+          const childScope = childScopes[i];
+          const childScopeBlock = childScope.block;
           if (
             // function handleChange() {}
             (fnNode.type === 'FunctionDeclaration' &&
@@ -597,7 +597,7 @@ export default {
 
       // Warn about assigning to variables in the outer scope.
       // Those are usually bugs.
-      let staleAssignments = new Set();
+      const staleAssignments = new Set();
       function reportStaleAssignment(writeExpr, key) {
         if (staleAssignments.has(key)) {
           return;
@@ -664,7 +664,7 @@ export default {
           });
         });
         if (setStateInsideEffectWithoutDeps) {
-          let {suggestedDependencies} = collectRecommendations({
+          const {suggestedDependencies} = collectRecommendations({
             dependencies,
             declaredDependencies: [],
             optionalDependencies,
@@ -789,7 +789,7 @@ export default {
         });
       }
 
-      let {
+      const {
         suggestedDependencies,
         unnecessaryDependencies,
         missingDependencies,
@@ -802,6 +802,8 @@ export default {
         isEffect,
       });
 
+      let suggestedDeps = suggestedDependencies;
+
       const problemCount =
         duplicateDependencies.size +
         missingDependencies.size +
@@ -871,7 +873,7 @@ export default {
       // for effects though because those have legit
       // use cases for over-specifying deps.
       if (!isEffect && missingDependencies.size > 0) {
-        suggestedDependencies = collectRecommendations({
+        suggestedDeps = collectRecommendations({
           dependencies,
           declaredDependencies: [], // Pretend we don't know
           optionalDependencies,
@@ -890,7 +892,7 @@ export default {
         return declaredDepKeys.join(',') === sortedDeclaredDepKeys.join(',');
       }
       if (areDeclaredDepsAlphabetized()) {
-        suggestedDependencies.sort();
+        suggestedDeps.sort();
       }
 
       function getWarningMessage(deps, singlePrefix, label, fixVerb) {
@@ -945,7 +947,7 @@ export default {
       // a `this` value. This warning can be confusing.
       // So if we're going to show it, append a clarification.
       if (!extraWarning && missingDependencies.has('props')) {
-        let propDep = dependencies.get('props');
+        const propDep = dependencies.get('props');
         if (propDep == null) {
           return;
         }
@@ -1146,14 +1148,14 @@ export default {
           extraWarning,
         suggest: [
           {
-            desc: `Update the dependencies array to be: [${suggestedDependencies.join(
+            desc: `Update the dependencies array to be: [${suggestedDeps.join(
               ', ',
             )}]`,
             fix(fixer) {
               // TODO: consider preserving the comments or formatting?
               return fixer.replaceText(
                 declaredDependenciesNode,
-                `[${suggestedDependencies.join(', ')}]`,
+                `[${suggestedDeps.join(', ')}]`,
               );
             },
           },
@@ -1213,9 +1215,9 @@ function collectRecommendations({
 
   // Tree manipulation helpers.
   function getOrCreateNodeByPath(rootNode, path) {
-    let keys = path.split('.');
+    const keys = path.split('.');
     let node = rootNode;
-    for (let key of keys) {
+    for (const key of keys) {
       let child = node.children.get(key);
       if (!child) {
         child = createDepTree();
@@ -1226,10 +1228,10 @@ function collectRecommendations({
     return node;
   }
   function markAllParentsByPath(rootNode, path, fn) {
-    let keys = path.split('.');
+    const keys = path.split('.');
     let node = rootNode;
-    for (let key of keys) {
-      let child = node.children.get(key);
+    for (const key of keys) {
+      const child = node.children.get(key);
       if (!child) {
         return;
       }
@@ -1239,8 +1241,8 @@ function collectRecommendations({
   }
 
   // Now we can learn which dependencies are missing or necessary.
-  let missingDependencies = new Set();
-  let satisfyingDependencies = new Set();
+  const missingDependencies = new Set();
+  const satisfyingDependencies = new Set();
   scanTreeRecursively(
     depTree,
     missingDependencies,
@@ -1277,9 +1279,9 @@ function collectRecommendations({
   }
 
   // Collect suggestions in the order they were originally specified.
-  let suggestedDependencies = [];
-  let unnecessaryDependencies = new Set();
-  let duplicateDependencies = new Set();
+  const suggestedDependencies = [];
+  const unnecessaryDependencies = new Set();
+  const duplicateDependencies = new Set();
   declaredDependencies.forEach(({key}) => {
     // Does this declared dep satisfy a real need?
     if (satisfyingDependencies.has(key)) {
@@ -1337,7 +1339,7 @@ function scanForDeclaredBareFunctions({
       if (fnRef == null) {
         return null;
       }
-      let fnNode = fnRef.defs[0];
+      const fnNode = fnRef.defs[0];
       if (fnNode == null) {
         return null;
       }
@@ -1461,7 +1463,7 @@ function getNodeWithoutReactNamespace(node, options) {
 // 1 for useImperativeHandle(ref, fn).
 // For additionally configured Hooks, assume that they're like useEffect (0).
 function getReactiveHookCallbackIndex(calleeNode, options) {
-  let node = getNodeWithoutReactNamespace(calleeNode);
+  const node = getNodeWithoutReactNamespace(calleeNode);
   if (node.type !== 'Identifier') {
     return -1;
   }
@@ -1507,7 +1509,7 @@ function getReactiveHookCallbackIndex(calleeNode, options) {
  * - agnostic to AST node types, it looks for `{ type: string, ... }`
  */
 function fastFindReferenceWithParent(start, target) {
-  let queue = [start];
+  const queue = [start];
   let item = null;
 
   while (queue.length) {
@@ -1521,7 +1523,7 @@ function fastFindReferenceWithParent(start, target) {
       continue;
     }
 
-    for (let [key, value] of Object.entries(item)) {
+    for (const [key, value] of Object.entries(item)) {
       if (key === 'parent') {
         continue;
       }

packages/eslint-plugin-react-hooks/src/RulesOfHooks.js

@@ -226,7 +226,7 @@ export default {
         function countPathsToEnd(segment, pathHistory) {
           const {cache} = countPathsToEnd;
           let paths = cache.get(segment.id);
-          let pathList = new Set(pathHistory);
+          const pathList = new Set(pathHistory);
 
           // If `pathList` includes the current segment then we've found a cycle!
           // We need to fill `cyclic` with all segments inside cycle

packages/jest-react/src/JestReact.js

@@ -99,7 +99,7 @@ function jsonChildrenToJSXChildren(jsonChildren) {
     if (jsonChildren.length === 1) {
       return jsonChildToJSXChild(jsonChildren[0]);
     } else if (jsonChildren.length > 1) {
-      let jsxChildren = [];
+      const jsxChildren = [];
       let allJSXChildrenAreStrings = true;
       let jsxChildrenString = '';
       for (let i = 0; i < jsonChildren.length; i++) {

packages/legacy-events/getListener.js

@@ -46,8 +46,6 @@ function shouldPreventMouseEvent(name, type, props) {
  * @return {?function} The stored callback.
  */
 export default function getListener(inst: Fiber, registrationName: string) {
-  let listener;
-
   // TODO: shouldPreventMouseEvent is DOM-specific and definitely should not
   // live here; needs to be moved to a better place soon
   const stateNode = inst.stateNode;
@@ -60,7 +58,7 @@ export default function getListener(inst: Fiber, registrationName: string) {
     // Work in progress.
     return null;
   }
-  listener = props[registrationName];
+  const listener = props[registrationName];
   if (shouldPreventMouseEvent(registrationName, inst.type, props)) {
     return null;
   }

packages/react-art/src/ReactARTHostConfig.js

@@ -68,7 +68,7 @@ function createEventHandler(instance) {
 
 function destroyEventListeners(instance) {
   if (instance._subscriptions) {
-    for (let type in instance._subscriptions) {
+    for (const type in instance._subscriptions) {
       instance._subscriptions[type]();
     }
   }
@@ -170,7 +170,7 @@ function applyNodeProps(instance, props, prevProps = {}) {
     }
   }
 
-  for (let type in EVENT_TYPES) {
+  for (const type in EVENT_TYPES) {
     addEventListeners(instance, EVENT_TYPES[type], props[type]);
   }
 }

packages/react-cache/src/ReactCache.js

@@ -97,7 +97,7 @@ function accessResult<I, K, V>(
     entriesForResource = new Map();
     entries.set(resource, entriesForResource);
   }
-  let entry = entriesForResource.get(key);
+  const entry = entriesForResource.get(key);
   if (entry === undefined) {
     const thenable = fetch(input);
     thenable.then(

packages/react-cache/src/__tests__/ReactCache-test.internal.js

@@ -303,7 +303,7 @@ describe('ReactCache', () => {
     const BadTextResource = createResource(
       ([text, ms = 0]) => {
         let listeners = null;
-        let value = null;
+        const value = null;
         return {
           then(resolve, reject) {
             if (value !== null) {

packages/react-client/src/ReactFlightClient.js

@@ -62,7 +62,7 @@ function Chunk(status: any, value: any) {
   this._value = value;
 }
 Chunk.prototype.then = function<T>(resolve: () => mixed) {
-  let chunk: SomeChunk<T> = this;
+  const chunk: SomeChunk<T> = this;
   if (chunk._status === PENDING) {
     if (chunk._value === null) {
       chunk._value = [];
@@ -81,8 +81,8 @@ export type Response<T> = {
 };
 
 function readRoot<T>(): T {
-  let response: Response<T> = this;
-  let rootChunk = response.rootChunk;
+  const response: Response<T> = this;
+  const rootChunk = response.rootChunk;
   if (rootChunk._status === RESOLVED) {
     return rootChunk._value;
   } else if (rootChunk._status === PENDING) {
@@ -94,10 +94,10 @@ function readRoot<T>(): T {
 }
 
 export function createResponse<T>(): Response<T> {
-  let rootChunk: SomeChunk<any> = createPendingChunk();
-  let chunks: Map<number, SomeChunk<any>> = new Map();
+  const rootChunk: SomeChunk<any> = createPendingChunk();
+  const chunks: Map<number, SomeChunk<any>> = new Map();
   chunks.set(0, rootChunk);
-  let response = {
+  const response = {
     partialRow: '',
     rootChunk,
     chunks: chunks,
@@ -117,7 +117,7 @@ function createErrorChunk(error: Error): ErroredChunk {
 function wakeChunk(listeners: null | Array<() => mixed>) {
   if (listeners !== null) {
     for (let i = 0; i < listeners.length; i++) {
-      let listener = listeners[i];
+      const listener = listeners[i];
       listener();
     }
   }
@@ -128,8 +128,8 @@ function triggerErrorOnChunk<T>(chunk: SomeChunk<T>, error: Error): void {
     // We already resolved. We didn't expect to see this.
     return;
   }
-  let listeners = chunk._value;
-  let erroredChunk: ErroredChunk = (chunk: any);
+  const listeners = chunk._value;
+  const erroredChunk: ErroredChunk = (chunk: any);
   erroredChunk._status = ERRORED;
   erroredChunk._value = error;
   wakeChunk(listeners);
@@ -144,8 +144,8 @@ function resolveChunk<T>(chunk: SomeChunk<T>, value: T): void {
     // We already resolved. We didn't expect to see this.
     return;
   }
-  let listeners = chunk._value;
-  let resolvedChunk: ResolvedChunk<T> = (chunk: any);
+  const listeners = chunk._value;
+  const resolvedChunk: ResolvedChunk<T> = (chunk: any);
   resolvedChunk._status = RESOLVED;
   resolvedChunk._value = value;
   wakeChunk(listeners);
@@ -170,7 +170,7 @@ function readMaybeChunk<T>(maybeChunk: SomeChunk<T> | T): T {
     // $FlowFixMe
     return maybeChunk;
   }
-  let chunk: SomeChunk<T> = (maybeChunk: any);
+  const chunk: SomeChunk<T> = (maybeChunk: any);
   if (chunk._status === RESOLVED) {
     return chunk._value;
   } else if (chunk._status === PENDING) {
@@ -232,18 +232,18 @@ function initializeBlock<Props, Data>(
   tuple: UninitializedBlockPayload<Data>,
 ): BlockComponent<Props, Data> {
   // Require module first and then data. The ordering matters.
-  let moduleMetaData: ModuleMetaData = readMaybeChunk(tuple[1]);
-  let moduleReference: ModuleReference<
+  const moduleMetaData: ModuleMetaData = readMaybeChunk(tuple[1]);
+  const moduleReference: ModuleReference<
     BlockRenderFunction<Props, Data>,
   > = resolveModuleReference(moduleMetaData);
   // TODO: Do this earlier, as the chunk is resolved.
   preloadModule(moduleReference);
 
-  let moduleExport = requireModule(moduleReference);
+  const moduleExport = requireModule(moduleReference);
 
   // The ordering here is important because this call might suspend.
   // We don't want that to prevent the module graph for being initialized.
-  let data: Data = readMaybeChunk(tuple[2]);
+  const data: Data = readMaybeChunk(tuple[2]);
 
   return {
     $$typeof: REACT_BLOCK_TYPE,
@@ -256,7 +256,7 @@ function initializeBlock<Props, Data>(
 function createLazyBlock<Props, Data>(
   tuple: UninitializedBlockPayload<Data>,
 ): LazyComponent<BlockComponent<Props, Data>, UninitializedBlockPayload<Data>> {
-  let lazyType: LazyComponent<
+  const lazyType: LazyComponent<
     BlockComponent<Props, Data>,
     UninitializedBlockPayload<Data>,
   > = {
@@ -281,8 +281,8 @@ export function parseModelFromJSON<T>(
         // This was an escaped string value.
         return value.substring(1);
       } else {
-        let id = parseInt(value.substring(1), 16);
-        let chunks = response.chunks;
+        const id = parseInt(value.substring(1), 16);
+        const chunks = response.chunks;
         let chunk = chunks.get(id);
         if (!chunk) {
           chunk = createPendingChunk();
@@ -296,7 +296,7 @@ export function parseModelFromJSON<T>(
     }
   }
   if (typeof value === 'object' && value !== null) {
-    let tuple: [mixed, mixed, mixed, mixed] = (value: any);
+    const tuple: [mixed, mixed, mixed, mixed] = (value: any);
     switch (tuple[0]) {
       case REACT_ELEMENT_TYPE: {
         // TODO: Consider having React just directly accept these arrays as elements.
@@ -317,8 +317,8 @@ export function resolveModelChunk<T, M>(
   id: number,
   model: M,
 ): void {
-  let chunks = response.chunks;
-  let chunk = chunks.get(id);
+  const chunks = response.chunks;
+  const chunk = chunks.get(id);
   if (!chunk) {
     chunks.set(id, createResolvedChunk(model));
   } else {
@@ -332,10 +332,10 @@ export function resolveErrorChunk<T>(
   message: string,
   stack: string,
 ): void {
-  let error = new Error(message);
+  const error = new Error(message);
   error.stack = stack;
-  let chunks = response.chunks;
-  let chunk = chunks.get(id);
+  const chunks = response.chunks;
+  const chunk = chunks.get(id);
   if (!chunk) {
     chunks.set(id, createErrorChunk(error));
   } else {

packages/react-client/src/ReactFlightClientStream.js

@@ -31,7 +31,7 @@ export type Response<T> = ResponseBase<T> & {
 };
 
 export function createResponse<T>(): Response<T> {
-  let response: Response<T> = (createResponseImpl(): any);
+  const response: Response<T> = (createResponseImpl(): any);
   response.fromJSON = function(key: string, value: JSONValue) {
     return parseModelFromJSON(response, this, key, value);
   };
@@ -45,27 +45,27 @@ function processFullRow<T>(response: Response<T>, row: string): void {
   if (row === '') {
     return;
   }
-  let tag = row[0];
+  const tag = row[0];
   switch (tag) {
     case 'J': {
-      let colon = row.indexOf(':', 1);
-      let id = parseInt(row.substring(1, colon), 16);
-      let json = row.substring(colon + 1);
-      let model = JSON.parse(json, response.fromJSON);
+      const colon = row.indexOf(':', 1);
+      const id = parseInt(row.substring(1, colon), 16);
+      const json = row.substring(colon + 1);
+      const model = JSON.parse(json, response.fromJSON);
       resolveModelChunk(response, id, model);
       return;
     }
     case 'E': {
-      let colon = row.indexOf(':', 1);
-      let id = parseInt(row.substring(1, colon), 16);
-      let json = row.substring(colon + 1);
-      let errorInfo = JSON.parse(json);
+      const colon = row.indexOf(':', 1);
+      const id = parseInt(row.substring(1, colon), 16);
+      const json = row.substring(colon + 1);
+      const errorInfo = JSON.parse(json);
       resolveErrorChunk(response, id, errorInfo.message, errorInfo.stack);
       return;
     }
     default: {
       // Assume this is the root model.
-      let model = JSON.parse(row, response.fromJSON);
+      const model = JSON.parse(row, response.fromJSON);
       resolveModelChunk(response, 0, model);
       return;
     }
@@ -79,7 +79,7 @@ export function processStringChunk<T>(
 ): void {
   let linebreak = chunk.indexOf('\n', offset);
   while (linebreak > -1) {
-    let fullrow = response.partialRow + chunk.substring(offset, linebreak);
+    const fullrow = response.partialRow + chunk.substring(offset, linebreak);
     processFullRow(response, fullrow);
     response.partialRow = '';
     offset = linebreak + 1;
@@ -95,10 +95,10 @@ export function processBinaryChunk<T>(
   if (!supportsBinaryStreams) {
     throw new Error("This environment don't support binary chunks.");
   }
-  let stringDecoder = response.stringDecoder;
+  const stringDecoder = response.stringDecoder;
   let linebreak = chunk.indexOf(10); // newline
   while (linebreak > -1) {
-    let fullrow =
+    const fullrow =
       response.partialRow +
       readFinalStringChunk(stringDecoder, chunk.subarray(0, linebreak));
     processFullRow(response, fullrow);

packages/react-client/src/__tests__/ReactFlight-test.js

@@ -38,7 +38,7 @@ describe('ReactFlight', () => {
       };
     }
     return function(...args) {
-      let curriedLoad = () => {
+      const curriedLoad = () => {
         return load(...args);
       };
       return ReactNoopFlightServerRuntime.serverBlock(render, curriedLoad);
@@ -58,10 +58,10 @@ describe('ReactFlight', () => {
         ),
       };
     }
-    let transport = ReactNoopFlightServer.render({
+    const transport = ReactNoopFlightServer.render({
       foo: <Foo />,
     });
-    let model = ReactNoopFlightClient.read(transport);
+    const model = ReactNoopFlightClient.read(transport);
     expect(model).toEqual({
       foo: {
         bar: (
@@ -84,16 +84,16 @@ describe('ReactFlight', () => {
           </span>
         );
       }
-      let loadUser = block(User);
-      let model = {
+      const loadUser = block(User);
+      const model = {
         User: loadUser('Seb', 'Smith'),
       };
 
-      let transport = ReactNoopFlightServer.render(model);
+      const transport = ReactNoopFlightServer.render(model);
 
       act(() => {
-        let rootModel = ReactNoopFlightClient.read(transport);
-        let UserClient = rootModel.User;
+        const rootModel = ReactNoopFlightClient.read(transport);
+        const UserClient = rootModel.User;
         ReactNoop.render(<UserClient greeting="Hello" />);
       });
 
@@ -111,16 +111,16 @@ describe('ReactFlight', () => {
           </span>
         );
       }
-      let loadUser = block(User, load);
-      let model = {
+      const loadUser = block(User, load);
+      const model = {
         User: loadUser('Seb', 'Smith'),
       };
 
-      let transport = ReactNoopFlightServer.render(model);
+      const transport = ReactNoopFlightServer.render(model);
 
       act(() => {
-        let rootModel = ReactNoopFlightClient.read(transport);
-        let UserClient = rootModel.User;
+        const rootModel = ReactNoopFlightClient.read(transport);
+        const UserClient = rootModel.User;
         ReactNoop.render(<UserClient greeting="Hello" />);
       });
 

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

@@ -65,7 +65,7 @@ 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) {
-    let cache = new Map();
+    const cache = new Map();
     let readHookLog;
     try {
       // Use all hooks here to add them to the hook log.
@@ -94,7 +94,7 @@ function getPrimitiveStackCache(): Map<string, Array<any>> {
       hookLog = [];
     }
     for (let i = 0; i < readHookLog.length; i++) {
-      let hook = readHookLog[i];
+      const hook = readHookLog[i];
       cache.set(hook.primitive, ErrorStackParser.parse(hook.stackError));
     }
     primitiveStackCache = cache;
@@ -104,7 +104,7 @@ function getPrimitiveStackCache(): Map<string, Array<any>> {
 
 let currentHook: null | Hook = null;
 function nextHook(): null | Hook {
-  let hook = currentHook;
+  const hook = currentHook;
   if (hook !== null) {
     currentHook = hook.next;
   }
@@ -134,8 +134,8 @@ function useContext<T>(
 function useState<S>(
   initialState: (() => S) | S,
 ): [S, Dispatch<BasicStateAction<S>>] {
-  let hook = nextHook();
-  let state: S =
+  const hook = nextHook();
+  const state: S =
     hook !== null
       ? hook.memoizedState
       : typeof initialState === 'function'
@@ -151,7 +151,7 @@ function useReducer<S, I, A>(
   initialArg: I,
   init?: I => S,
 ): [S, Dispatch<A>] {
-  let hook = nextHook();
+  const hook = nextHook();
   let state;
   if (hook !== null) {
     state = hook.memoizedState;
@@ -167,8 +167,8 @@ function useReducer<S, I, A>(
 }
 
 function useRef<T>(initialValue: T): {|current: T|} {
-  let hook = nextHook();
-  let ref = hook !== null ? hook.memoizedState : {current: initialValue};
+  const hook = nextHook();
+  const ref = hook !== null ? hook.memoizedState : {current: initialValue};
   hookLog.push({
     primitive: 'Ref',
     stackError: new Error(),
@@ -227,7 +227,7 @@ function useDebugValue(value: any, formatterFn: ?(value: any) => any) {
 }
 
 function useCallback<T>(callback: T, inputs: Array<mixed> | void | null): T {
-  let hook = nextHook();
+  const hook = nextHook();
   hookLog.push({
     primitive: 'Callback',
     stackError: new Error(),
@@ -240,8 +240,8 @@ function useMemo<T>(
   nextCreate: () => T,
   inputs: Array<mixed> | void | null,
 ): T {
-  let hook = nextHook();
-  let value = hook !== null ? hook.memoizedState[0] : nextCreate();
+  const hook = nextHook();
+  const value = hook !== null ? hook.memoizedState[0] : nextCreate();
   hookLog.push({primitive: 'Memo', stackError: new Error(), value});
   return value;
 }
@@ -367,7 +367,7 @@ export type HooksTree = Array<HooksNode>;
 let mostLikelyAncestorIndex = 0;
 
 function findSharedIndex(hookStack, rootStack, rootIndex) {
-  let source = rootStack[rootIndex].source;
+  const source = rootStack[rootIndex].source;
   hookSearch: for (let i = 0; i < hookStack.length; i++) {
     if (hookStack[i].source === source) {
       // This looks like a match. Validate that the rest of both stack match up.
@@ -412,7 +412,7 @@ function isReactWrapper(functionName, primitiveName) {
   if (!functionName) {
     return false;
   }
-  let expectedPrimitiveName = 'use' + primitiveName;
+  const expectedPrimitiveName = 'use' + primitiveName;
   if (functionName.length < expectedPrimitiveName.length) {
     return false;
   }
@@ -423,8 +423,8 @@ function isReactWrapper(functionName, primitiveName) {
 }
 
 function findPrimitiveIndex(hookStack, hook) {
-  let stackCache = getPrimitiveStackCache();
-  let primitiveStack = stackCache.get(hook.primitive);
+  const stackCache = getPrimitiveStackCache();
+  const primitiveStack = stackCache.get(hook.primitive);
   if (primitiveStack === undefined) {
     return -1;
   }
@@ -453,9 +453,9 @@ function findPrimitiveIndex(hookStack, hook) {
 function parseTrimmedStack(rootStack, hook) {
   // Get the stack trace between the primitive hook function and
   // the root function call. I.e. the stack frames of custom hooks.
-  let hookStack = ErrorStackParser.parse(hook.stackError);
-  let rootIndex = findCommonAncestorIndex(rootStack, hookStack);
-  let primitiveIndex = findPrimitiveIndex(hookStack, hook);
+  const hookStack = ErrorStackParser.parse(hook.stackError);
+  const rootIndex = findCommonAncestorIndex(rootStack, hookStack);
+  const primitiveIndex = findPrimitiveIndex(hookStack, hook);
   if (
     rootIndex === -1 ||
     primitiveIndex === -1 ||
@@ -482,14 +482,14 @@ function parseCustomHookName(functionName: void | string): string {
 }
 
 function buildTree(rootStack, readHookLog): HooksTree {
-  let rootChildren = [];
+  const rootChildren = [];
   let prevStack = null;
   let levelChildren = rootChildren;
   let nativeHookID = 0;
-  let stackOfChildren = [];
+  const stackOfChildren = [];
   for (let i = 0; i < readHookLog.length; i++) {
-    let hook = readHookLog[i];
-    let stack = parseTrimmedStack(rootStack, hook);
+    const hook = readHookLog[i];
+    const stack = parseTrimmedStack(rootStack, hook);
     if (stack !== null) {
       // Note: The indices 0 <= n < length-1 will contain the names.
       // The indices 1 <= n < length will contain the source locations.
@@ -499,8 +499,9 @@ function buildTree(rootStack, readHookLog): HooksTree {
       if (prevStack !== null) {
         // Compare the current level's stack to the new stack.
         while (commonSteps < stack.length && commonSteps < prevStack.length) {
-          let stackSource = stack[stack.length - commonSteps - 1].source;
-          let prevSource = prevStack[prevStack.length - commonSteps - 1].source;
+          const stackSource = stack[stack.length - commonSteps - 1].source;
+          const prevSource =
+            prevStack[prevStack.length - commonSteps - 1].source;
           if (stackSource !== prevSource) {
             break;
           }
@@ -514,7 +515,7 @@ function buildTree(rootStack, readHookLog): HooksTree {
       // The remaining part of the new stack are custom hooks. Push them
       // to the tree.
       for (let j = stack.length - commonSteps - 1; j >= 1; j--) {
-        let children = [];
+        const children = [];
         levelChildren.push({
           id: null,
           isStateEditable: false,
@@ -563,7 +564,7 @@ function processDebugValues(
   hooksTree: HooksTree,
   parentHooksNode: HooksNode | null,
 ): void {
-  let debugValueHooksNodes: Array<HooksNode> = [];
+  const debugValueHooksNodes: Array<HooksNode> = [];
 
   for (let i = 0; i < hooksTree.length; i++) {
     const hooksNode = hooksTree[i];
@@ -599,7 +600,7 @@ export function inspectHooks<Props>(
     currentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
   }
 
-  let previousDispatcher = currentDispatcher.current;
+  const previousDispatcher = currentDispatcher.current;
   let readHookLog;
   currentDispatcher.current = Dispatcher;
   let ancestorStackError;
@@ -611,7 +612,7 @@ export function inspectHooks<Props>(
     hookLog = [];
     currentDispatcher.current = previousDispatcher;
   }
-  let rootStack = ErrorStackParser.parse(ancestorStackError);
+  const rootStack = ErrorStackParser.parse(ancestorStackError);
   return buildTree(rootStack, readHookLog);
 }
 
@@ -642,7 +643,7 @@ function inspectHooksOfForwardRef<Props, Ref>(
   ref: Ref,
   currentDispatcher: CurrentDispatcherRef,
 ): HooksTree {
-  let previousDispatcher = currentDispatcher.current;
+  const previousDispatcher = currentDispatcher.current;
   let readHookLog;
   currentDispatcher.current = Dispatcher;
   let ancestorStackError;
@@ -654,7 +655,7 @@ function inspectHooksOfForwardRef<Props, Ref>(
     hookLog = [];
     currentDispatcher.current = previousDispatcher;
   }
-  let rootStack = ErrorStackParser.parse(ancestorStackError);
+  const rootStack = ErrorStackParser.parse(ancestorStackError);
   return buildTree(rootStack, readHookLog);
 }
 
@@ -663,7 +664,7 @@ function resolveDefaultProps(Component, baseProps) {
     // Resolve default props. Taken from ReactElement
     const props = Object.assign({}, baseProps);
     const defaultProps = Component.defaultProps;
-    for (let propName in defaultProps) {
+    for (const propName in defaultProps) {
       if (props[propName] === undefined) {
         props[propName] = defaultProps[propName];
       }
@@ -695,7 +696,7 @@ export function inspectHooksOfFiber(
   }
   // Warm up the cache so that it doesn't consume the currentHook.
   getPrimitiveStackCache();
-  let type = fiber.type;
+  const type = fiber.type;
   let props = fiber.memoizedProps;
   if (type !== fiber.elementType) {
     props = resolveDefaultProps(type, props);
@@ -703,7 +704,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);
-  let contextMap = new Map();
+  const contextMap = new Map();
   try {
     setupContexts(contextMap, fiber);
     if (fiber.tag === ForwardRef) {

packages/react-debug-tools/src/__tests__/ReactHooksInspection-test.internal.js

@@ -39,7 +39,7 @@ describe('ReactHooksInspection', () => {
       });
       return <div DEPRECATED_flareListeners={listener}>Hello world</div>;
     }
-    let tree = ReactDebugTools.inspectHooks(Foo, {});
+    const tree = ReactDebugTools.inspectHooks(Foo, {});
     expect(tree).toEqual([
       {
         isStateEditable: false,
@@ -65,7 +65,7 @@ describe('ReactHooksInspection', () => {
       React.useEffect(effect);
       return <div ref={ref}>Hello world</div>;
     }
-    let tree = ReactDebugTools.inspectHooks(Foo, {});
+    const tree = ReactDebugTools.inspectHooks(Foo, {});
     expect(tree).toEqual([
       {
         isStateEditable: false,

packages/react-debug-tools/src/__tests__/ReactHooksInspection-test.js

@@ -22,10 +22,10 @@ describe('ReactHooksInspection', () => {
 
   it('should inspect a simple useState hook', () => {
     function Foo(props) {
-      let [state] = React.useState('hello world');
+      const [state] = React.useState('hello world');
       return <div>{state}</div>;
     }
-    let tree = ReactDebugTools.inspectHooks(Foo, {});
+    const tree = ReactDebugTools.inspectHooks(Foo, {});
     expect(tree).toEqual([
       {
         isStateEditable: true,
@@ -39,15 +39,15 @@ describe('ReactHooksInspection', () => {
 
   it('should inspect a simple custom hook', () => {
     function useCustom(value) {
-      let [state] = React.useState(value);
+      const [state] = React.useState(value);
       React.useDebugValue('custom hook label');
       return state;
     }
     function Foo(props) {
-      let value = useCustom('hello world');
+      const value = useCustom('hello world');
       return <div>{value}</div>;
     }
-    let tree = ReactDebugTools.inspectHooks(Foo, {});
+    const tree = ReactDebugTools.inspectHooks(Foo, {});
     expect(tree).toEqual([
       {
         isStateEditable: false,
@@ -70,20 +70,20 @@ describe('ReactHooksInspection', () => {
   it('should inspect a tree of multiple hooks', () => {
     function effect() {}
     function useCustom(value) {
-      let [state] = React.useState(value);
+      const [state] = React.useState(value);
       React.useEffect(effect);
       return state;
     }
     function Foo(props) {
-      let value1 = useCustom('hello');
-      let value2 = useCustom('world');
+      const value1 = useCustom('hello');
+      const value2 = useCustom('world');
       return (
         <div>
           {value1} {value2}
         </div>
       );
     }
-    let tree = ReactDebugTools.inspectHooks(Foo, {});
+    const tree = ReactDebugTools.inspectHooks(Foo, {});
     expect(tree).toEqual([
       {
         isStateEditable: false,
@@ -135,30 +135,30 @@ describe('ReactHooksInspection', () => {
   it('should inspect a tree of multiple levels of hooks', () => {
     function effect() {}
     function useCustom(value) {
-      let [state] = React.useReducer((s, a) => s, value);
+      const [state] = React.useReducer((s, a) => s, value);
       React.useEffect(effect);
       return state;
     }
     function useBar(value) {
-      let result = useCustom(value);
+      const result = useCustom(value);
       React.useLayoutEffect(effect);
       return result;
     }
     function useBaz(value) {
       React.useLayoutEffect(effect);
-      let result = useCustom(value);
+      const result = useCustom(value);
       return result;
     }
     function Foo(props) {
-      let value1 = useBar('hello');
-      let value2 = useBaz('world');
+      const value1 = useBar('hello');
+      const value2 = useBaz('world');
       return (
         <div>
           {value1} {value2}
         </div>
       );
     }
-    let tree = ReactDebugTools.inspectHooks(Foo, {});
+    const tree = ReactDebugTools.inspectHooks(Foo, {});
     expect(tree).toEqual([
       {
         isStateEditable: false,
@@ -238,12 +238,12 @@ describe('ReactHooksInspection', () => {
   });
 
   it('should inspect the default value using the useContext hook', () => {
-    let MyContext = React.createContext('default');
+    const MyContext = React.createContext('default');
     function Foo(props) {
-      let value = React.useContext(MyContext);
+      const value = React.useContext(MyContext);
       return <div>{value}</div>;
     }
-    let tree = ReactDebugTools.inspectHooks(Foo, {});
+    const tree = ReactDebugTools.inspectHooks(Foo, {});
     expect(tree).toEqual([
       {
         isStateEditable: false,
@@ -257,15 +257,15 @@ describe('ReactHooksInspection', () => {
 
   it('should support an injected dispatcher', () => {
     function Foo(props) {
-      let [state] = React.useState('hello world');
+      const [state] = React.useState('hello world');
       return <div>{state}</div>;
     }
 
-    let initial = {};
+    const initial = {};
     let current = initial;
     let getterCalls = 0;
-    let setterCalls = [];
-    let FakeDispatcherRef = {
+    const setterCalls = [];
+    const FakeDispatcherRef = {
       get current() {
         getterCalls++;
         return current;
@@ -299,7 +299,7 @@ describe('ReactHooksInspection', () => {
         React.useDebugValue('this is invalid');
         return null;
       }
-      let tree = ReactDebugTools.inspectHooks(Foo, {});
+      const tree = ReactDebugTools.inspectHooks(Foo, {});
       expect(tree).toHaveLength(0);
     });
 
@@ -312,7 +312,7 @@ describe('ReactHooksInspection', () => {
         useCustom();
         return null;
       }
-      let tree = ReactDebugTools.inspectHooks(Foo, {});
+      const tree = ReactDebugTools.inspectHooks(Foo, {});
       expect(tree).toEqual([
         {
           isStateEditable: false,

packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js

@@ -27,17 +27,17 @@ describe('ReactHooksInspectionIntegration', () => {
   });
 
   it('should inspect the current state of useState hooks', () => {
-    let useState = React.useState;
+    const useState = React.useState;
     function Foo(props) {
-      let [state1, setState1] = useState('hello');
-      let [state2, setState2] = useState('world');
+      const [state1, setState1] = useState('hello');
+      const [state2, setState2] = useState('world');
       return (
         <div onMouseDown={setState1} onMouseUp={setState2}>
           {state1} {state2}
         </div>
       );
     }
-    let renderer = ReactTestRenderer.create(<Foo prop="prop" />);
+    const renderer = ReactTestRenderer.create(<Foo prop="prop" />);
 
     let childFiber = renderer.root.findByType(Foo)._currentFiber();
     let tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
@@ -58,7 +58,7 @@ describe('ReactHooksInspectionIntegration', () => {
       },
     ]);
 
-    let {
+    const {
       onMouseDown: setStateA,
       onMouseUp: setStateB,
     } = renderer.root.findByType('div').props;
@@ -109,12 +109,12 @@ describe('ReactHooksInspectionIntegration', () => {
   });
 
   it('should inspect the current state of all stateful hooks', () => {
-    let outsideRef = React.createRef();
+    const outsideRef = React.createRef();
     function effect() {}
     function Foo(props) {
-      let [state1, setState] = React.useState('a');
-      let [state2, dispatch] = React.useReducer((s, a) => a.value, 'b');
-      let ref = React.useRef('c');
+      const [state1, setState] = React.useState('a');
+      const [state2, dispatch] = React.useReducer((s, a) => a.value, 'b');
+      const ref = React.useRef('c');
 
       React.useLayoutEffect(effect);
       React.useEffect(effect);
@@ -139,7 +139,7 @@ describe('ReactHooksInspectionIntegration', () => {
         });
         ref.current = 'C';
       }
-      let memoizedUpdate = React.useCallback(update, []);
+      const memoizedUpdate = React.useCallback(update, []);
       return (
         <div onClick={memoizedUpdate}>
           {state1} {state2}
@@ -153,7 +153,7 @@ describe('ReactHooksInspectionIntegration', () => {
 
     let childFiber = renderer.root.findByType(Foo)._currentFiber();
 
-    let {onClick: updateStates} = renderer.root.findByType('div').props;
+    const {onClick: updateStates} = renderer.root.findByType('div').props;
 
     let tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
     expect(tree).toEqual([
@@ -269,18 +269,18 @@ describe('ReactHooksInspectionIntegration', () => {
   });
 
   it('should inspect the value of the current provider in useContext', () => {
-    let MyContext = React.createContext('default');
+    const MyContext = React.createContext('default');
     function Foo(props) {
-      let value = React.useContext(MyContext);
+      const value = React.useContext(MyContext);
       return <div>{value}</div>;
     }
-    let renderer = ReactTestRenderer.create(
+    const renderer = ReactTestRenderer.create(
       <MyContext.Provider value="contextual">
         <Foo prop="prop" />
       </MyContext.Provider>,
     );
-    let childFiber = renderer.root.findByType(Foo)._currentFiber();
-    let tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
+    const childFiber = renderer.root.findByType(Foo)._currentFiber();
+    const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
     expect(tree).toEqual([
       {
         isStateEditable: false,
@@ -293,16 +293,16 @@ describe('ReactHooksInspectionIntegration', () => {
   });
 
   it('should inspect forwardRef', () => {
-    let obj = function() {};
-    let Foo = React.forwardRef(function(props, ref) {
+    const obj = function() {};
+    const Foo = React.forwardRef(function(props, ref) {
       React.useImperativeHandle(ref, () => obj);
       return <div />;
     });
-    let ref = React.createRef();
-    let renderer = ReactTestRenderer.create(<Foo ref={ref} />);
+    const ref = React.createRef();
+    const renderer = ReactTestRenderer.create(<Foo ref={ref} />);
 
-    let childFiber = renderer.root.findByType(Foo)._currentFiber();
-    let tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
+    const childFiber = renderer.root.findByType(Foo)._currentFiber();
+    const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
     expect(tree).toEqual([
       {
         isStateEditable: false,
@@ -316,14 +316,14 @@ describe('ReactHooksInspectionIntegration', () => {
 
   it('should inspect memo', () => {
     function InnerFoo(props) {
-      let [value] = React.useState('hello');
+      const [value] = React.useState('hello');
       return <div>{value}</div>;
     }
-    let Foo = React.memo(InnerFoo);
-    let renderer = ReactTestRenderer.create(<Foo />);
+    const Foo = React.memo(InnerFoo);
+    const renderer = ReactTestRenderer.create(<Foo />);
     // TODO: Test renderer findByType is broken for memo. Have to search for the inner.
-    let childFiber = renderer.root.findByType(InnerFoo)._currentFiber();
-    let tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
+    const childFiber = renderer.root.findByType(InnerFoo)._currentFiber();
+    const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
     expect(tree).toEqual([
       {
         isStateEditable: true,
@@ -337,16 +337,16 @@ describe('ReactHooksInspectionIntegration', () => {
 
   it('should inspect custom hooks', () => {
     function useCustom() {
-      let [value] = React.useState('hello');
+      const [value] = React.useState('hello');
       return value;
     }
     function Foo(props) {
-      let value = useCustom();
+      const value = useCustom();
       return <div>{value}</div>;
     }
-    let renderer = ReactTestRenderer.create(<Foo />);
-    let childFiber = renderer.root.findByType(Foo)._currentFiber();
-    let tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
+    const renderer = ReactTestRenderer.create(<Foo />);
+    const childFiber = renderer.root.findByType(Foo)._currentFiber();
+    const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
     expect(tree).toEqual([
       {
         isStateEditable: false,
@@ -373,9 +373,9 @@ describe('ReactHooksInspectionIntegration', () => {
         const memoizedValue = React.useMemo(() => 'hello', []);
         return <div>{memoizedValue}</div>;
       }
-      let renderer = ReactTestRenderer.create(<Foo />);
-      let childFiber = renderer.root.findByType(Foo)._currentFiber();
-      let tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
+      const renderer = ReactTestRenderer.create(<Foo />);
+      const childFiber = renderer.root.findByType(Foo)._currentFiber();
+      const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
       expect(tree).toEqual([
         {
           id: 0,
@@ -402,9 +402,9 @@ describe('ReactHooksInspectionIntegration', () => {
         const [state] = React.useState(() => 'hello', []);
         return <div>{state}</div>;
       }
-      let renderer = ReactTestRenderer.create(<Foo />);
-      let childFiber = renderer.root.findByType(Foo)._currentFiber();
-      let tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
+      const renderer = ReactTestRenderer.create(<Foo />);
+      const childFiber = renderer.root.findByType(Foo)._currentFiber();
+      const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
       expect(tree).toEqual([
         {
           id: 0,
@@ -427,12 +427,12 @@ describe('ReactHooksInspectionIntegration', () => {
   describe('useDebugValue', () => {
     it('should support inspectable values for multiple custom hooks', () => {
       function useLabeledValue(label) {
-        let [value] = React.useState(label);
+        const [value] = React.useState(label);
         React.useDebugValue(`custom label ${label}`);
         return value;
       }
       function useAnonymous(label) {
-        let [value] = React.useState(label);
+        const [value] = React.useState(label);
         return value;
       }
       function Example() {
@@ -442,9 +442,9 @@ describe('ReactHooksInspectionIntegration', () => {
         useLabeledValue('d');
         return null;
       }
-      let renderer = ReactTestRenderer.create(<Example />);
-      let childFiber = renderer.root.findByType(Example)._currentFiber();
-      let tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
+      const renderer = ReactTestRenderer.create(<Example />);
+      const childFiber = renderer.root.findByType(Example)._currentFiber();
+      const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
       expect(tree).toEqual([
         {
           isStateEditable: false,
@@ -514,9 +514,9 @@ describe('ReactHooksInspectionIntegration', () => {
         useOuter();
         return null;
       }
-      let renderer = ReactTestRenderer.create(<Example />);
-      let childFiber = renderer.root.findByType(Example)._currentFiber();
-      let tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
+      const renderer = ReactTestRenderer.create(<Example />);
+      const childFiber = renderer.root.findByType(Example)._currentFiber();
+      const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
       expect(tree).toEqual([
         {
           isStateEditable: false,
@@ -561,9 +561,9 @@ describe('ReactHooksInspectionIntegration', () => {
         useSingleLabelCustom('two');
         return null;
       }
-      let renderer = ReactTestRenderer.create(<Example />);
-      let childFiber = renderer.root.findByType(Example)._currentFiber();
-      let tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
+      const renderer = ReactTestRenderer.create(<Example />);
+      const childFiber = renderer.root.findByType(Example)._currentFiber();
+      const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
       expect(tree).toEqual([
         {
           isStateEditable: false,
@@ -618,9 +618,9 @@ describe('ReactHooksInspectionIntegration', () => {
         React.useDebugValue('this is invalid');
         return null;
       }
-      let renderer = ReactTestRenderer.create(<Example />);
-      let childFiber = renderer.root.findByType(Example)._currentFiber();
-      let tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
+      const renderer = ReactTestRenderer.create(<Example />);
+      const childFiber = renderer.root.findByType(Example)._currentFiber();
+      const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
       expect(tree).toHaveLength(0);
     });
 
@@ -633,9 +633,9 @@ describe('ReactHooksInspectionIntegration', () => {
         useCustom();
         return null;
       }
-      let renderer = ReactTestRenderer.create(<Example />);
-      let childFiber = renderer.root.findByType(Example)._currentFiber();
-      let tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
+      const renderer = ReactTestRenderer.create(<Example />);
+      const childFiber = renderer.root.findByType(Example)._currentFiber();
+      const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
       expect(tree).toEqual([
         {
           isStateEditable: false,
@@ -657,10 +657,10 @@ describe('ReactHooksInspectionIntegration', () => {
   });
 
   it('should support defaultProps and lazy', async () => {
-    let Suspense = React.Suspense;
+    const Suspense = React.Suspense;
 
     function Foo(props) {
-      let [value] = React.useState(props.defaultValue.substr(0, 3));
+      const [value] = React.useState(props.defaultValue.substr(0, 3));
       return <div>{value}</div>;
     }
     Foo.defaultProps = {
@@ -671,9 +671,9 @@ describe('ReactHooksInspectionIntegration', () => {
       return {default: result};
     }
 
-    let LazyFoo = React.lazy(() => fakeImport(Foo));
+    const LazyFoo = React.lazy(() => fakeImport(Foo));
 
-    let renderer = ReactTestRenderer.create(
+    const renderer = ReactTestRenderer.create(
       <Suspense fallback="Loading...">
         <LazyFoo />
       </Suspense>,
@@ -683,8 +683,8 @@ describe('ReactHooksInspectionIntegration', () => {
 
     Scheduler.unstable_flushAll();
 
-    let childFiber = renderer.root._currentFiber();
-    let tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
+    const childFiber = renderer.root._currentFiber();
+    const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
     expect(tree).toEqual([
       {
         isStateEditable: true,
@@ -698,15 +698,15 @@ describe('ReactHooksInspectionIntegration', () => {
 
   it('should support an injected dispatcher', () => {
     function Foo(props) {
-      let [state] = React.useState('hello world');
+      const [state] = React.useState('hello world');
       return <div>{state}</div>;
     }
 
-    let initial = {};
+    const initial = {};
     let current = initial;
     let getterCalls = 0;
-    let setterCalls = [];
-    let FakeDispatcherRef = {
+    const setterCalls = [];
+    const FakeDispatcherRef = {
       get current() {
         getterCalls++;
         return current;
@@ -717,8 +717,8 @@ describe('ReactHooksInspectionIntegration', () => {
       },
     };
 
-    let renderer = ReactTestRenderer.create(<Foo />);
-    let childFiber = renderer.root._currentFiber();
+    const renderer = ReactTestRenderer.create(<Foo />);
+    const childFiber = renderer.root._currentFiber();
     expect(() => {
       ReactDebugTools.inspectHooksOfFiber(childFiber, FakeDispatcherRef);
     }).toThrow(
@@ -798,9 +798,9 @@ describe('ReactHooksInspectionIntegration', () => {
         React.useMemo(() => 'memo', []);
         return <div />;
       }
-      let renderer = ReactTestRenderer.create(<Foo />);
-      let childFiber = renderer.root.findByType(Foo)._currentFiber();
-      let tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
+      const renderer = ReactTestRenderer.create(<Foo />);
+      const childFiber = renderer.root.findByType(Foo)._currentFiber();
+      const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
       expect(tree).toEqual([
         {
           id: 0,

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

@@ -156,11 +156,13 @@ export function launchEditor(
     return;
   }
 
-  let [editor, ...args] = guessEditor();
+  const [editor, ...destructuredArgs] = guessEditor();
   if (!editor) {
     return;
   }
 
+  let args = destructuredArgs;
+
   if (lineNumber) {
     args = args.concat(getArgumentsForLineNumber(editor, filePath, lineNumber));
   } else {

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

@@ -228,11 +228,11 @@ function createPanelIfReactLoaded() {
       cloneStyleTags = () => {
         const linkTags = [];
         // eslint-disable-next-line no-for-of-loops/no-for-of-loops
-        for (let linkTag of document.getElementsByTagName('link')) {
+        for (const linkTag of document.getElementsByTagName('link')) {
           if (linkTag.rel === 'stylesheet') {
             const newLinkTag = document.createElement('link');
             // eslint-disable-next-line no-for-of-loops/no-for-of-loops
-            for (let attribute of linkTag.attributes) {
+            for (const attribute of linkTag.attributes) {
               newLinkTag.setAttribute(attribute.nodeName, attribute.nodeValue);
             }
             linkTags.push(newLinkTag);

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

@@ -12,7 +12,7 @@ window.injectStyles = getLinkTags => {
     const linkTags = getLinkTags();
 
     // eslint-disable-next-line no-for-of-loops/no-for-of-loops
-    for (let linkTag of linkTags) {
+    for (const linkTag of linkTags) {
       document.head.appendChild(linkTag);
     }
   }

packages/react-devtools-shared/src/__tests__/profilingCache-test.js

@@ -72,7 +72,7 @@ describe('ProfilingCache', () => {
     utils.act(() => ReactDOM.render(<Parent count={0} />, containerA));
     utils.act(() => store.profilerStore.stopProfiling());
 
-    let allProfilingDataForRoots = [];
+    const allProfilingDataForRoots = [];
 
     function Validator({previousProfilingDataForRoot, rootID}) {
       const profilingDataForRoot = store.profilerStore.getDataForRoot(rootID);

packages/react-devtools-shared/src/__tests__/storeStressSync-test.js

@@ -37,7 +37,7 @@ describe('StoreStress (Legacy Mode)', () => {
       // We'll be manually flipping this component back and forth in the test.
       // We only do this for a single node in order to verify that DevTools
       // can handle a subtree switching alternates while other subtrees are memoized.
-      let [showX, _setShowX] = React.useState(false);
+      const [showX, _setShowX] = React.useState(false);
       setShowX = _setShowX;
       return showX ? <X /> : 'c';
     };
@@ -87,7 +87,7 @@ describe('StoreStress (Legacy Mode)', () => {
     // These cases are picked so that rendering them sequentially in the same
     // container results in a combination of mounts, updates, unmounts, and reorders.
     // prettier-ignore
-    let cases = [
+    const cases = [
       [a, b, c, d, e],
       [[a], b, c, d, e],
       [[a, b], c, d, e],
@@ -183,7 +183,7 @@ describe('StoreStress (Legacy Mode)', () => {
     const e = <E key="e" />;
 
     // prettier-ignore
-    let steps = [
+    const steps = [
       a,
       b,
       c,
@@ -207,7 +207,7 @@ describe('StoreStress (Legacy Mode)', () => {
     };
 
     // 1. Capture the expected render result.
-    let snapshots = [];
+    const snapshots = [];
     let container = document.createElement('div');
     for (let i = 0; i < steps.length; i++) {
       act(() => ReactDOM.render(<Root>{steps[i]}</Root>, container));
@@ -308,7 +308,7 @@ describe('StoreStress (Legacy Mode)', () => {
 
     // 1. For each step, check Suspense can render them as initial primary content.
     // This is the only step where we use Jest snapshots.
-    let snapshots = [];
+    const snapshots = [];
     let container = document.createElement('div');
     for (let i = 0; i < steps.length; i++) {
       act(() =>
@@ -719,7 +719,7 @@ describe('StoreStress (Legacy Mode)', () => {
 
     // 1. For each step, check Suspense can render them as initial primary content.
     // This is the only step where we use Jest snapshots.
-    let snapshots = [];
+    const snapshots = [];
     let container = document.createElement('div');
     for (let i = 0; i < steps.length; i++) {
       act(() =>
@@ -744,7 +744,7 @@ describe('StoreStress (Legacy Mode)', () => {
     // 2. Verify check Suspense can render same steps as initial fallback content.
     // We don't actually assert here because the tree includes <MaybeSuspend>
     // which is different from the snapshots above. So we take more snapshots.
-    let fallbackSnapshots = [];
+    const fallbackSnapshots = [];
     for (let i = 0; i < steps.length; i++) {
       act(() =>
         ReactDOM.render(

packages/react-devtools-shared/src/__tests__/storeStressTestConcurrent-test.js

@@ -42,7 +42,7 @@ describe('StoreStressConcurrent', () => {
       // We'll be manually flipping this component back and forth in the test.
       // We only do this for a single node in order to verify that DevTools
       // can handle a subtree switching alternates while other subtrees are memoized.
-      let [showX, _setShowX] = React.useState(false);
+      const [showX, _setShowX] = React.useState(false);
       setShowX = _setShowX;
       return showX ? <X /> : 'c';
     };
@@ -115,7 +115,7 @@ describe('StoreStressConcurrent', () => {
     // These cases are picked so that rendering them sequentially in the same
     // container results in a combination of mounts, updates, unmounts, and reorders.
     // prettier-ignore
-    let cases = [
+    const cases = [
       [a, b, c, d, e],
       [[a], b, c, d, e],
       [[a, b], c, d, e],
@@ -215,7 +215,7 @@ describe('StoreStressConcurrent', () => {
     const e = <E key="e" />;
 
     // prettier-ignore
-    let steps = [
+    const steps = [
       a,
       b,
       c,
@@ -239,7 +239,7 @@ describe('StoreStressConcurrent', () => {
     };
 
     // 1. Capture the expected render result.
-    let snapshots = [];
+    const snapshots = [];
     let container = document.createElement('div');
     // $FlowFixMe
     let root = ReactDOM.createRoot(container);
@@ -401,7 +401,7 @@ describe('StoreStressConcurrent', () => {
 
     // 1. For each step, check Suspense can render them as initial primary content.
     // This is the only step where we use Jest snapshots.
-    let snapshots = [];
+    const snapshots = [];
     let container = document.createElement('div');
     // $FlowFixMe
     let root = ReactDOM.createRoot(container);
@@ -890,7 +890,7 @@ describe('StoreStressConcurrent', () => {
 
     // 1. For each step, check Suspense can render them as initial primary content.
     // This is the only step where we use Jest snapshots.
-    let snapshots = [];
+    const snapshots = [];
     let container = document.createElement('div');
     // $FlowFixMe
     let root = ReactDOM.createRoot(container);
@@ -915,7 +915,7 @@ describe('StoreStressConcurrent', () => {
     // 2. Verify check Suspense can render same steps as initial fallback content.
     // We don't actually assert here because the tree includes <MaybeSuspend>
     // which is different from the snapshots above. So we take more snapshots.
-    let fallbackSnapshots = [];
+    const fallbackSnapshots = [];
     for (let i = 0; i < steps.length; i++) {
       act(() =>
         root.render(

packages/react-devtools-shared/src/__tests__/treeContext-test.js

@@ -482,7 +482,7 @@ describe('TreeListContext', () => {
       utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
       expect(state).toMatchSnapshot('1: initial state');
 
-      let parentID = ((store.getElementIDAtIndex(1): any): number);
+      const parentID = ((store.getElementIDAtIndex(1): any): number);
       utils.act(() => dispatch({type: 'SELECT_OWNER', payload: parentID}));
       utils.act(() => renderer.update(<Contexts />));
       expect(state).toMatchSnapshot('2: parent owners tree');
@@ -507,7 +507,7 @@ describe('TreeListContext', () => {
       utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
       expect(state).toMatchSnapshot('1: initial state');
 
-      let parentID = ((store.getElementIDAtIndex(1): any): number);
+      const parentID = ((store.getElementIDAtIndex(1): any): number);
       utils.act(() => dispatch({type: 'SELECT_OWNER', payload: parentID}));
       utils.act(() => renderer.update(<Contexts />));
       expect(state).toMatchSnapshot('2: parent owners tree');
@@ -545,7 +545,7 @@ describe('TreeListContext', () => {
       utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
       expect(state).toMatchSnapshot('1: initial state');
 
-      let childID = ((store.getElementIDAtIndex(1): any): number);
+      const childID = ((store.getElementIDAtIndex(1): any): number);
       utils.act(() => dispatch({type: 'SELECT_OWNER', payload: childID}));
       utils.act(() => renderer.update(<Contexts />));
       expect(state).toMatchSnapshot('2: child owners tree');
@@ -553,7 +553,7 @@ describe('TreeListContext', () => {
       await utils.actAsync(() => ReactDOM.render(<Parent />, container));
       expect(state).toMatchSnapshot('3: remove child');
 
-      let parentID = ((store.getElementIDAtIndex(0): any): number);
+      const parentID = ((store.getElementIDAtIndex(0): any): number);
       utils.act(() => dispatch({type: 'SELECT_OWNER', payload: parentID}));
       utils.act(() => renderer.update(<Contexts />));
       expect(state).toMatchSnapshot('4: parent owners tree');

packages/react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor.js

@@ -171,7 +171,7 @@ function measureStyle(
 
 function shallowClone(object: Object): Object {
   const cloned = {};
-  for (let n in object) {
+  for (const n in object) {
     cloned[n] = object[n];
   }
   return cloned;

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

@@ -211,7 +211,7 @@ export default class Agent extends EventEmitter<{|
   }
 
   getIDForNode(node: Object): number | null {
-    for (let rendererID in this._rendererInterfaces) {
+    for (const rendererID in this._rendererInterfaces) {
       const renderer = ((this._rendererInterfaces[
         (rendererID: any)
       ]: any): RendererInterface);
@@ -389,7 +389,7 @@ export default class Agent extends EventEmitter<{|
 
     setTraceUpdatesEnabled(traceUpdatesEnabled);
 
-    for (let rendererID in this._rendererInterfaces) {
+    for (const rendererID in this._rendererInterfaces) {
       const renderer = ((this._rendererInterfaces[
         (rendererID: any)
       ]: any): RendererInterface);
@@ -413,7 +413,7 @@ export default class Agent extends EventEmitter<{|
   startProfiling = (recordChangeDescriptions: boolean) => {
     this._recordChangeDescriptions = recordChangeDescriptions;
     this._isProfiling = true;
-    for (let rendererID in this._rendererInterfaces) {
+    for (const rendererID in this._rendererInterfaces) {
       const renderer = ((this._rendererInterfaces[
         (rendererID: any)
       ]: any): RendererInterface);
@@ -425,7 +425,7 @@ export default class Agent extends EventEmitter<{|
   stopProfiling = () => {
     this._isProfiling = false;
     this._recordChangeDescriptions = false;
-    for (let rendererID in this._rendererInterfaces) {
+    for (const rendererID in this._rendererInterfaces) {
       const renderer = ((this._rendererInterfaces[
         (rendererID: any)
       ]: any): RendererInterface);
@@ -456,7 +456,7 @@ export default class Agent extends EventEmitter<{|
   };
 
   updateComponentFilters = (componentFilters: Array<ComponentFilter>) => {
-    for (let rendererID in this._rendererInterfaces) {
+    for (const rendererID in this._rendererInterfaces) {
       const renderer = ((this._rendererInterfaces[
         (rendererID: any)
       ]: any): RendererInterface);

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

@@ -27,7 +27,7 @@ const injectedRenderers: Map<
 
 let targetConsole: Object = console;
 let targetConsoleMethods = {};
-for (let method in console) {
+for (const method in console) {
   targetConsoleMethods[method] = console[method];
 }
 
@@ -40,7 +40,7 @@ export function dangerous_setTargetConsoleForTesting(
   targetConsole = targetConsoleForTesting;
 
   targetConsoleMethods = {};
-  for (let method in targetConsole) {
+  for (const method in targetConsole) {
     targetConsoleMethods[method] = console[method];
   }
 }
@@ -77,7 +77,7 @@ export function patch(): void {
   const originalConsoleMethods = {};
 
   unpatchFn = () => {
-    for (let method in originalConsoleMethods) {
+    for (const method in originalConsoleMethods) {
       try {
         // $FlowFixMe property error|warn is not writable.
         targetConsole[method] = originalConsoleMethods[method];
@@ -101,7 +101,7 @@ export function patch(): void {
             // If there's a component stack for at least one of the injected renderers, append it.
             // We don't handle the edge case of stacks for more than one (e.g. interleaved renderers?)
             // eslint-disable-next-line no-for-of-loops/no-for-of-loops
-            for (let {
+            for (const {
               getCurrentFiber,
               getDisplayNameForFiber,
             } of injectedRenderers.values()) {

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

@@ -21,7 +21,7 @@ export default function describeComponentFrame(
 ) {
   let sourceInfo = '';
   if (source) {
-    let path = source.fileName;
+    const path = source.fileName;
     let fileName = path.replace(BEFORE_SLASH_RE, '');
     if (__DEV__) {
       // In DEV, include code for a common special case:

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

@@ -87,7 +87,7 @@ function getElementType(internalInstance: InternalInstance): ElementType {
 }
 
 function getChildren(internalInstance: Object): Array<any> {
-  let children = [];
+  const children = [];
 
   // If the parent is a native node without rendered children, but with
   // multiple string children, then the `element` that gets passed in here is
@@ -106,7 +106,7 @@ function getChildren(internalInstance: Object): Array<any> {
     }
   } else if (internalInstance._renderedChildren) {
     const renderedChildren = internalInstance._renderedChildren;
-    for (let name in renderedChildren) {
+    for (const name in renderedChildren) {
       const child = renderedChildren[name];
       if (getElementType(child) !== ElementTypeOtherOrUnknown) {
         children.push(child);
@@ -386,8 +386,8 @@ export function attach(
           ? getID(internalInstance._currentElement._owner)
           : 0;
 
-      let displayNameStringID = getStringID(displayName);
-      let keyStringID = getStringID(key);
+      const displayNameStringID = getStringID(displayName);
+      const keyStringID = getStringID(key);
       pushOperation(TREE_OPERATION_ADD);
       pushOperation(id);
       pushOperation(type);
@@ -447,7 +447,7 @@ export function attach(
       renderer.Mount._instancesByReactRootID ||
       renderer.Mount._instancesByContainerID;
 
-    for (let key in roots) {
+    for (const key in roots) {
       const internalInstance = roots[key];
       const id = getID(internalInstance);
       crawlAndRecordInitialMounts(id, 0, id);
@@ -455,8 +455,8 @@ export function attach(
     }
   }
 
-  let pendingOperations: Array<number> = [];
-  let pendingStringTable: Map<string, number> = new Map();
+  const pendingOperations: Array<number> = [];
+  const pendingStringTable: Map<string, number> = new Map();
   let pendingUnmountedIDs: Array<number> = [];
   let pendingStringTableLength: number = 0;
   let pendingUnmountedRootID: number | null = null;

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

@@ -29,7 +29,7 @@ export function decorateMany(
 }
 
 export function restoreMany(source: Object, olds: Object): void {
-  for (let name in olds) {
+  for (const name in olds) {
     source[name] = olds[name];
   }
 }

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

@@ -543,7 +543,7 @@ export function attach(
 
   // Highlight updates
   let traceUpdatesEnabled: boolean = false;
-  let traceUpdatesForNodes: Set<NativeType> = new Set();
+  const traceUpdatesForNodes: Set<NativeType> = new Set();
 
   function applyComponentFilters(componentFilters: Array<ComponentFilter>) {
     hideElementsWithTypes.clear();
@@ -675,7 +675,7 @@ export function attach(
       const displayName = getDisplayNameForFiber(fiber);
       if (displayName != null) {
         // eslint-disable-next-line no-for-of-loops/no-for-of-loops
-        for (let displayNameRegExp of hideElementsWithDisplayNames) {
+        for (const displayNameRegExp of hideElementsWithDisplayNames) {
           if (displayNameRegExp.test(displayName)) {
             return true;
           }
@@ -686,7 +686,7 @@ export function attach(
     if (_debugSource != null && hideElementsWithPaths.size > 0) {
       const {fileName} = _debugSource;
       // eslint-disable-next-line no-for-of-loops/no-for-of-loops
-      for (let pathRegExp of hideElementsWithPaths) {
+      for (const pathRegExp of hideElementsWithPaths) {
         if (pathRegExp.test(fileName)) {
           return true;
         }
@@ -960,7 +960,7 @@ export function attach(
     const keys = new Set([...Object.keys(prev), ...Object.keys(next)]);
     const changedKeys = [];
     // eslint-disable-next-line no-for-of-loops/no-for-of-loops
-    for (let key of keys) {
+    for (const key of keys) {
       if (prev[key] !== next[key]) {
         changedKeys.push(key);
       }
@@ -994,11 +994,11 @@ export function attach(
     }
   }
 
-  let pendingOperations: Array<number> = [];
-  let pendingRealUnmountedIDs: Array<number> = [];
-  let pendingSimulatedUnmountedIDs: Array<number> = [];
+  const pendingOperations: Array<number> = [];
+  const pendingRealUnmountedIDs: Array<number> = [];
+  const pendingSimulatedUnmountedIDs: Array<number> = [];
   let pendingOperationsQueue: Array<Array<number>> | null = [];
-  let pendingStringTable: Map<string, number> = new Map();
+  const pendingStringTable: Map<string, number> = new Map();
   let pendingStringTableLength: number = 0;
   let pendingUnmountedRootID: number | null = null;
 
@@ -1173,12 +1173,12 @@ export function attach(
         ? getFiberID(getPrimaryFiber(parentFiber))
         : 0;
 
-      let displayNameStringID = getStringID(displayName);
+      const displayNameStringID = getStringID(displayName);
 
       // This check is a guard to handle a React element that has been modified
       // in such a way as to bypass the default stringification of the "key" property.
-      let keyString = key === null ? null : '' + key;
-      let keyStringID = getStringID(keyString);
+      const keyString = key === null ? null : '' + key;
+      const keyStringID = getStringID(keyString);
 
       pushOperation(TREE_OPERATION_ADD);
       pushOperation(id);
@@ -1974,7 +1974,7 @@ export function attach(
       return null;
     }
 
-    let alternate = fiber.alternate;
+    const alternate = fiber.alternate;
     if (!alternate) {
       // If there is no alternate, then we only need to check if it is mounted.
       const state = isFiberMountedImpl(fiber);
@@ -1992,12 +1992,12 @@ export function attach(
     let a: Fiber = fiber;
     let b: Fiber = alternate;
     while (true) {
-      let parentA = a.return;
+      const parentA = a.return;
       if (parentA === null) {
         // We're at the root.
         break;
       }
-      let parentB = parentA.alternate;
+      const parentB = parentA.alternate;
       if (parentB === null) {
         // There is no alternate. This is an unusual case. Currently, it only
         // happens when a Suspense component is hidden. An extra fragment fiber
@@ -2131,7 +2131,7 @@ export function attach(
   }
 
   function prepareViewElementSource(id: number): void {
-    let fiber = idToFiberMap.get(id);
+    const fiber = idToFiberMap.get(id);
     if (fiber == null) {
       console.warn(`Could not find Fiber with id "${id}"`);
       return;
@@ -2163,7 +2163,7 @@ export function attach(
   }
 
   function getOwnersList(id: number): Array<Owner> | null {
-    let fiber = findCurrentFiberUsingSlowPathById(id);
+    const fiber = findCurrentFiberUsingSlowPathById(id);
     if (fiber == null) {
       return null;
     }
@@ -2200,7 +2200,7 @@ export function attach(
     let instance = null;
     let style = null;
 
-    let fiber = findCurrentFiberUsingSlowPathById(id);
+    const fiber = findCurrentFiberUsingSlowPathById(id);
     if (fiber !== null) {
       instance = fiber.stateNode;
 
@@ -2213,7 +2213,7 @@ export function attach(
   }
 
   function inspectElementRaw(id: number): InspectedElement | null {
-    let fiber = findCurrentFiberUsingSlowPathById(id);
+    const fiber = findCurrentFiberUsingSlowPathById(id);
     if (fiber == null) {
       return null;
     }
@@ -2328,7 +2328,7 @@ export function attach(
       const originalConsoleMethods = {};
 
       // Temporarily disable all console logging before re-running the hook.
-      for (let method in console) {
+      for (const method in console) {
         try {
           originalConsoleMethods[method] = console[method];
           // $FlowFixMe property error|warn is not writable.
@@ -2343,7 +2343,7 @@ export function attach(
         );
       } finally {
         // Restore original console functionality.
-        for (let method in originalConsoleMethods) {
+        for (const method in originalConsoleMethods) {
           try {
             // $FlowFixMe property error|warn is not writable.
             console[method] = originalConsoleMethods[method];
@@ -2462,7 +2462,7 @@ export function attach(
   function updateSelectedElement(inspectedElement: InspectedElement): void {
     const {hooks, id, props} = inspectedElement;
 
-    let fiber = idToFiberMap.get(id);
+    const fiber = idToFiberMap.get(id);
     if (fiber == null) {
       console.warn(`Could not find Fiber with id "${id}"`);
       return;
@@ -2912,7 +2912,7 @@ export function attach(
     return false;
   }
 
-  let forceFallbackForSuspenseIDs = new Set();
+  const forceFallbackForSuspenseIDs = new Set();
   function shouldSuspendFiberAccordingToSet(fiber) {
     const id = getFiberID(getPrimaryFiber(((fiber: any): Fiber)));
     return forceFallbackForSuspenseIDs.has(id);

packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js

@@ -155,11 +155,11 @@ export default class Overlay {
 
   constructor() {
     // Find the root window, because overlays are positioned relative to it.
-    let currentWindow = window.__REACT_DEVTOOLS_TARGET_WINDOW__ || window;
+    const currentWindow = window.__REACT_DEVTOOLS_TARGET_WINDOW__ || window;
     this.window = currentWindow;
 
     // When opened in shells/dev, the tooltip should be bound by the app iframe, not by the topmost window.
-    let tipBoundsWindow = window.__REACT_DEVTOOLS_TARGET_WINDOW__ || window;
+    const tipBoundsWindow = window.__REACT_DEVTOOLS_TARGET_WINDOW__ || window;
     this.tipBoundsWindow = tipBoundsWindow;
 
     const doc = currentWindow.document;

packages/react-devtools-shared/src/backend/views/TraceUpdates/index.js

@@ -135,7 +135,7 @@ function measureNode(node: Object): Rect | null {
     return null;
   }
 
-  let currentWindow = window.__REACT_DEVTOOLS_TARGET_WINDOW__ || window;
+  const currentWindow = window.__REACT_DEVTOOLS_TARGET_WINDOW__ || window;
 
   return getNestedBoundingClientRect(node, currentWindow);
 }

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

@@ -297,7 +297,7 @@ export default class ProfilerStore extends EventEmitter<{|
 
       // Record all renderer IDs initially too (in case of unmount)
       // eslint-disable-next-line no-for-of-loops/no-for-of-loops
-      for (let rendererID of this._store.rootIDToRendererID.values()) {
+      for (const rendererID of this._store.rootIDToRendererID.values()) {
         if (!this._initialRendererIDs.has(rendererID)) {
           this._initialRendererIDs.add(rendererID);
         }

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

@@ -479,7 +479,7 @@ export default class Store extends EventEmitter<{|
 
   getOwnersListForElement(ownerID: number): Array<Element> {
     const list = [];
-    let element = this._idToElement.get(ownerID);
+    const element = this._idToElement.get(ownerID);
     if (element != null) {
       list.push({
         ...element,

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

@@ -44,7 +44,8 @@ export function printElement(element: Element, includeWeight: boolean = false) {
     }
   }
 
-  let hocs = hocDisplayNames === null ? '' : ` [${hocDisplayNames.join('][')}]`;
+  const hocs =
+    hocDisplayNames === null ? '' : ` [${hocDisplayNames.join('][')}]`;
 
   let suffix = '';
   if (includeWeight) {

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

@@ -76,7 +76,7 @@ const resource: Resource<
   InspectedElementFrontend,
 > = createResource(
   (element: Element) => {
-    let request = inProgressRequests.get(element);
+    const request = inProgressRequests.get(element);
     if (request != null) {
       return request.promise;
     }
@@ -351,16 +351,19 @@ function hydrateHelper(
   path?: Array<string | number>,
 ): Object | null {
   if (dehydratedData !== null) {
-    let {cleaned, data, unserializable} = dehydratedData;
+    const {cleaned, data, unserializable} = dehydratedData;
 
     if (path) {
       const {length} = path;
       if (length > 0) {
         // Hydration helper requires full paths, but inspection dehydrates with relative paths.
         // In that event it's important that we adjust the "cleaned" paths to match.
-        cleaned = cleaned.map(cleanedPath => cleanedPath.slice(length));
-        unserializable = unserializable.map(unserializablePath =>
-          unserializablePath.slice(length),
+        return hydrate(
+          data,
+          cleaned.map(cleanedPath => cleanedPath.slice(length)),
+          unserializable.map(unserializablePath =>
+            unserializablePath.slice(length),
+          ),
         );
       }
     }

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

@@ -217,7 +217,7 @@ export default function KeyValue({
       const hasChildren = entries.length > 0;
       const displayName = getMetaValueLabel(value);
 
-      let areChildrenReadOnly = isReadOnly || !!value[meta.readonly];
+      const areChildrenReadOnly = isReadOnly || !!value[meta.readonly];
       children = entries.map<Element<any>>(([key, keyValue]) => (
         <KeyValue
           key={key}

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

@@ -57,7 +57,7 @@ const resource: Resource<
   StyleAndLayoutFrontend,
 > = createResource(
   (element: Element) => {
-    let request = inProgressRequests.get(element);
+    const request = inProgressRequests.get(element);
     if (request != null) {
       return request.promise;
     }
@@ -108,7 +108,7 @@ function NativeStyleContextController({children}: Props) {
   // This effect handler invalidates the suspense cache and schedules rendering updates with React.
   useEffect(() => {
     const onStyleAndLayout = ({id, layout, style}: StyleAndLayoutBackend) => {
-      let element = store.getElementByID(id);
+      const element = store.getElementByID(id);
       if (element !== null) {
         const styleAndLayout: StyleAndLayoutFrontend = {
           layout,

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

@@ -35,7 +35,7 @@ type InProgressRequest = {|
 const inProgressRequests: WeakMap<Element, InProgressRequest> = new WeakMap();
 const resource: Resource<Element, Element, Array<Owner>> = createResource(
   (element: Element) => {
-    let request = inProgressRequests.get(element);
+    const request = inProgressRequests.get(element);
     if (request != null) {
       return request.promise;
     }

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

@@ -409,7 +409,7 @@ function updateIndentationSizeVar(
   let maxIndentationSize: number = indentationSizeRef.current;
 
   // eslint-disable-next-line no-for-of-loops/no-for-of-loops
-  for (let child of innerDiv.children) {
+  for (const child of innerDiv.children) {
     const depth = parseInt(child.getAttribute('data-depth'), 10) || 0;
 
     let childWidth: number = 0;

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

@@ -157,7 +157,8 @@ type State = {|
 |};
 
 function reduceTreeState(store: Store, state: State, action: Action): State {
-  let {numElements, ownerID, selectedElementIndex, selectedElementID} = state;
+  let {numElements, selectedElementIndex, selectedElementID} = state;
+  const ownerID = state.ownerID;
 
   let lookupIDForIndex = true;
 
@@ -277,13 +278,13 @@ function reduceTreeState(store: Store, state: State, action: Action): State {
 
 function reduceSearchState(store: Store, state: State, action: Action): State {
   let {
-    ownerID,
     searchIndex,
     searchResults,
     searchText,
     selectedElementID,
     selectedElementIndex,
   } = state;
+  const ownerID = state.ownerID;
 
   const prevSearchIndex = searchIndex;
   const prevSearchText = searchText;
@@ -452,10 +453,8 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {
     selectedElementIndex,
     ownerID,
     ownerFlatTree,
-    searchIndex,
-    searchResults,
-    searchText,
   } = state;
+  const {searchIndex, searchResults, searchText} = state;
 
   let prevSelectedElementIndex = selectedElementIndex;
 
@@ -734,7 +733,7 @@ function TreeContextController({
       prevSelectedElementID.current = state.selectedElementID;
 
       if (state.selectedElementID !== null) {
-        let element = store.getElementByID(state.selectedElementID);
+        const element = store.getElementByID(state.selectedElementID);
         if (element !== null && element.parentID > 0) {
           store.toggleIsCollapsed(element.parentID, false);
         }

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

@@ -107,11 +107,13 @@ export default function DevTools({
   viewAttributeSourceFunction,
   viewElementSourceFunction,
 }: Props) {
-  let [tab, setTab] = useLocalStorage<TabID>(
+  const [currentTab, setTab] = useLocalStorage<TabID>(
     'React::DevTools::defaultTab',
     defaultTab,
   );
 
+  let tab = currentTab;
+
   if (overrideTab != null) {
     tab = overrideTab;
   }

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

@@ -64,7 +64,7 @@ function CommitFlamegraphListItem({data, index, style}: Props) {
 
   const row = rows[index];
 
-  let selectedNodeOffset = scaleX(
+  const selectedNodeOffset = scaleX(
     selectedChartNode !== null ? selectedChartNode.offset : 0,
     width,
   );

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

@@ -14,7 +14,7 @@ export default class EventEmitter<Events: Object> {
     event: Event,
     listener: (...$ElementType<Events, Event>) => any,
   ): void {
-    let listeners = this.listenersMap.get(event);
+    const listeners = this.listenersMap.get(event);
     if (listeners === undefined) {
       this.listenersMap.set(event, [listener]);
     } else {

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

@@ -287,7 +287,7 @@ export function dehydrate(
         return createDehydrated(type, true, data, cleaned, path);
       } else {
         const object = {};
-        for (let name in data) {
+        for (const name in data) {
           object[name] = dehydrate(
             data[name],
             cleaned,

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

@@ -49,7 +49,7 @@ const cachedDisplayNames: WeakMap<Function, string> = new WeakMap();
 
 // On large trees, encoding takes significant time.
 // Try to reuse the already encoded strings.
-let encodedStringCache = new LRU({max: 1000});
+const encodedStringCache = new LRU({max: 1000});
 
 export function alphaSortKeys(a: string, b: string): number {
   if (a > b) {
@@ -96,7 +96,7 @@ export function utfDecodeString(array: Array<number>): string {
 }
 
 export function utfEncodeString(string: string): Array<number> {
-  let cached = encodedStringCache.get(string);
+  const cached = encodedStringCache.get(string);
   if (cached !== undefined) {
     return cached;
   }
@@ -281,12 +281,12 @@ export function separateDisplayNameAndHOCs(
 // Pulled from react-compat
 // https://github.com/developit/preact-compat/blob/7c5de00e7c85e2ffd011bf3af02899b63f699d3a/src/index.js#L349
 export function shallowDiffers(prev: Object, next: Object): boolean {
-  for (let attribute in prev) {
+  for (const attribute in prev) {
     if (!(attribute in next)) {
       return true;
     }
   }
-  for (let attribute in next) {
+  for (const attribute in next) {
     if (prev[attribute] !== next[attribute]) {
       return true;
     }

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

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

packages/react-dom/src/__tests__/ReactCompositeComponentState-test.js

@@ -143,7 +143,7 @@ describe('ReactCompositeComponent-state', () => {
 
     ReactDOM.unmountComponentAtNode(container);
 
-    let expected = [
+    const expected = [
       // there is no state when getInitialState() is called
       ['getInitialState', null],
       ['componentWillMount-start', 'red'],
@@ -283,8 +283,6 @@ describe('ReactCompositeComponent-state', () => {
   });
 
   it('should batch unmounts', () => {
-    let outer;
-
     class Inner extends React.Component {
       render() {
         return <div />;
@@ -306,7 +304,7 @@ describe('ReactCompositeComponent-state', () => {
     }
 
     const container = document.createElement('div');
-    outer = ReactDOM.render(<Outer />, container);
+    const outer = ReactDOM.render(<Outer />, container);
     expect(() => {
       ReactDOM.unmountComponentAtNode(container);
     }).not.toThrow();
@@ -380,7 +378,7 @@ describe('ReactCompositeComponent-state', () => {
   });
 
   it('should treat assigning to this.state inside cWRP as a replaceState, with a warning', () => {
-    let ops = [];
+    const ops = [];
     class Test extends React.Component {
       state = {step: 1, extra: true};
       UNSAFE_componentWillReceiveProps() {
@@ -423,7 +421,7 @@ describe('ReactCompositeComponent-state', () => {
   });
 
   it('should treat assigning to this.state inside cWM as a replaceState, with a warning', () => {
-    let ops = [];
+    const ops = [];
     class Test extends React.Component {
       state = {step: 1, extra: true};
       UNSAFE_componentWillMount() {

packages/react-dom/src/__tests__/ReactDOMComponent-test.js

@@ -564,8 +564,8 @@ describe('ReactDOMComponent', () => {
             {'></div><script>alert("hi")</script>': 'selected'},
             null,
           );
-          let result1 = ReactDOMServer.renderToString(element1);
-          let result2 = ReactDOMServer.renderToString(element2);
+          const result1 = ReactDOMServer.renderToString(element1);
+          const result2 = ReactDOMServer.renderToString(element2);
           expect(result1.toLowerCase()).not.toContain('onclick');
           expect(result2.toLowerCase()).not.toContain('script');
         }
@@ -588,8 +588,8 @@ describe('ReactDOMComponent', () => {
             {'></x-foo-component><script>alert("hi")</script>': 'selected'},
             null,
           );
-          let result1 = ReactDOMServer.renderToString(element1);
-          let result2 = ReactDOMServer.renderToString(element2);
+          const result1 = ReactDOMServer.renderToString(element1);
+          const result2 = ReactDOMServer.renderToString(element2);
           expect(result1.toLowerCase()).not.toContain('onclick');
           expect(result2.toLowerCase()).not.toContain('script');
         }
@@ -1166,7 +1166,7 @@ describe('ReactDOMComponent', () => {
       let realToString;
       try {
         realToString = Object.prototype.toString;
-        let wrappedToString = function() {
+        const wrappedToString = function() {
           // Emulate browser behavior which is missing in jsdom
           if (this instanceof window.HTMLUnknownElement) {
             return '[object HTMLUnknownElement]';
@@ -2553,10 +2553,10 @@ describe('ReactDOMComponent', () => {
   });
 
   it('receives events in specific order', () => {
-    let eventOrder = [];
-    let track = tag => () => eventOrder.push(tag);
-    let outerRef = React.createRef();
-    let innerRef = React.createRef();
+    const eventOrder = [];
+    const track = tag => () => eventOrder.push(tag);
+    const outerRef = React.createRef();
+    const innerRef = React.createRef();
 
     function OuterReactApp() {
       return (

packages/react-dom/src/__tests__/ReactDOMEventListener-test.js

@@ -12,7 +12,7 @@
 describe('ReactDOMEventListener', () => {
   let React;
   let ReactDOM;
-  let ReactFeatureFlags = require('shared/ReactFeatureFlags');
+  const ReactFeatureFlags = require('shared/ReactFeatureFlags');
 
   beforeEach(() => {
     jest.resetModules();

packages/react-dom/src/__tests__/ReactDOMFiber-test.js

@@ -211,7 +211,7 @@ describe('ReactDOMFiber', () => {
   };
 
   const assertNamespacesMatch = function(tree) {
-    let testContainer = document.createElement('div');
+    const testContainer = document.createElement('div');
     svgEls = [];
     htmlEls = [];
     mathEls = [];
@@ -1224,7 +1224,7 @@ describe('ReactDOMFiber', () => {
 
   // Regression test for https://github.com/facebook/react/issues/12643#issuecomment-413727104
   it('should not diff memoized host components', () => {
-    let inputRef = React.createRef();
+    const inputRef = React.createRef();
     let didCallOnChange = false;
 
     class Child extends React.Component {

packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.internal.js

@@ -49,7 +49,7 @@ describe('ReactDOMFiberAsync', () => {
   });
 
   it('flushSync batches sync updates and flushes them at the end of the batch', () => {
-    let ops = [];
+    const ops = [];
     let instance;
 
     class Component extends React.Component {
@@ -87,7 +87,7 @@ describe('ReactDOMFiberAsync', () => {
   });
 
   it('flushSync flushes updates even if nested inside another flushSync', () => {
-    let ops = [];
+    const ops = [];
     let instance;
 
     class Component extends React.Component {
@@ -156,9 +156,9 @@ describe('ReactDOMFiberAsync', () => {
     });
 
     it.experimental('does not perform deferred updates synchronously', () => {
-      let inputRef = React.createRef();
-      let asyncValueRef = React.createRef();
-      let syncValueRef = React.createRef();
+      const inputRef = React.createRef();
+      const asyncValueRef = React.createRef();
+      const syncValueRef = React.createRef();
 
       class Counter extends React.Component {
         state = {asyncValue: '', syncValue: ''};
@@ -246,7 +246,7 @@ describe('ReactDOMFiberAsync', () => {
     });
 
     it.experimental('flushSync flushes updates before end of the tick', () => {
-      let ops = [];
+      const ops = [];
       let instance;
 
       class Component extends React.Component {
@@ -317,7 +317,7 @@ describe('ReactDOMFiberAsync', () => {
         Scheduler.unstable_flushAll();
         expect(container.textContent).toEqual('1');
 
-        let ops = [];
+        const ops = [];
         ReactDOM.unstable_flushControlled(() => {
           inst.increment();
           ReactDOM.unstable_flushControlled(() => {
@@ -350,7 +350,7 @@ describe('ReactDOMFiberAsync', () => {
         }
         ReactDOM.render(<Counter />, container);
 
-        let ops = [];
+        const ops = [];
         ReactDOM.unstable_batchedUpdates(() => {
           inst.increment();
           ReactDOM.unstable_flushControlled(() => {
@@ -428,22 +428,22 @@ describe('ReactDOMFiberAsync', () => {
         // Flush
         Scheduler.unstable_flushAll();
 
-        let disableButton = disableButtonRef.current;
+        const disableButton = disableButtonRef.current;
         expect(disableButton.tagName).toBe('BUTTON');
 
         // Dispatch a click event on the Disable-button.
-        let firstEvent = document.createEvent('Event');
+        const firstEvent = document.createEvent('Event');
         firstEvent.initEvent('click', true, true);
         disableButton.dispatchEvent(firstEvent);
 
         // There should now be a pending update to disable the form.
 
         // This should not have flushed yet since it's in concurrent mode.
-        let submitButton = submitButtonRef.current;
+        const submitButton = submitButtonRef.current;
         expect(submitButton.tagName).toBe('BUTTON');
 
         // In the meantime, we can dispatch a new client event on the submit button.
-        let secondEvent = document.createEvent('Event');
+        const secondEvent = document.createEvent('Event');
         secondEvent.initEvent('click', true, true);
         // This should force the pending update to flush which disables the submit button before the event is invoked.
         submitButton.dispatchEvent(secondEvent);
@@ -499,22 +499,22 @@ describe('ReactDOMFiberAsync', () => {
         // Flush
         Scheduler.unstable_flushAll();
 
-        let disableButton = disableButtonRef.current;
+        const disableButton = disableButtonRef.current;
         expect(disableButton.tagName).toBe('BUTTON');
 
         // Dispatch a click event on the Disable-button.
-        let firstEvent = document.createEvent('Event');
+        const firstEvent = document.createEvent('Event');
         firstEvent.initEvent('click', true, true);
         disableButton.dispatchEvent(firstEvent);
 
         // There should now be a pending update to disable the form.
 
         // This should not have flushed yet since it's in concurrent mode.
-        let submitButton = submitButtonRef.current;
+        const submitButton = submitButtonRef.current;
         expect(submitButton.tagName).toBe('BUTTON');
 
         // In the meantime, we can dispatch a new client event on the submit button.
-        let secondEvent = document.createEvent('Event');
+        const secondEvent = document.createEvent('Event');
         secondEvent.initEvent('click', true, true);
         // This should force the pending update to flush which disables the submit button before the event is invoked.
         submitButton.dispatchEvent(secondEvent);
@@ -562,22 +562,22 @@ describe('ReactDOMFiberAsync', () => {
         // Flush
         Scheduler.unstable_flushAll();
 
-        let enableButton = enableButtonRef.current;
+        const enableButton = enableButtonRef.current;
         expect(enableButton.tagName).toBe('BUTTON');
 
         // Dispatch a click event on the Enable-button.
-        let firstEvent = document.createEvent('Event');
+        const firstEvent = document.createEvent('Event');
         firstEvent.initEvent('click', true, true);
         enableButton.dispatchEvent(firstEvent);
 
         // There should now be a pending update to enable the form.
 
         // This should not have flushed yet since it's in concurrent mode.
-        let submitButton = submitButtonRef.current;
+        const submitButton = submitButtonRef.current;
         expect(submitButton.tagName).toBe('BUTTON');
 
         // In the meantime, we can dispatch a new client event on the submit button.
-        let secondEvent = document.createEvent('Event');
+        const secondEvent = document.createEvent('Event');
         secondEvent.initEvent('click', true, true);
         // This should force the pending update to flush which enables the submit button before the event is invoked.
         submitButton.dispatchEvent(secondEvent);

packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js

@@ -24,10 +24,10 @@ describe('ReactDOMFizzServer', () => {
   });
 
   async function readResult(stream) {
-    let reader = stream.getReader();
+    const reader = stream.getReader();
     let result = '';
     while (true) {
-      let {done, value} = await reader.read();
+      const {done, value} = await reader.read();
       if (done) {
         return result;
       }
@@ -36,10 +36,10 @@ describe('ReactDOMFizzServer', () => {
   }
 
   it('should call renderToReadableStream', async () => {
-    let stream = ReactDOMFizzServer.renderToReadableStream(
+    const stream = ReactDOMFizzServer.renderToReadableStream(
       <div>hello world</div>,
     );
-    let result = await readResult(stream);
+    const result = await readResult(stream);
     expect(result).toBe('<div>hello world</div>');
   });
 });

packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js

@@ -23,7 +23,7 @@ describe('ReactDOMFizzServer', () => {
   });
 
   function getTestWritable() {
-    let writable = new Stream.PassThrough();
+    const writable = new Stream.PassThrough();
     writable.setEncoding('utf8');
     writable.result = '';
     writable.on('data', chunk => (writable.result += chunk));
@@ -31,7 +31,7 @@ describe('ReactDOMFizzServer', () => {
   }
 
   it('should call pipeToNodeWritable', () => {
-    let writable = getTestWritable();
+    const writable = getTestWritable();
     ReactDOMFizzServer.pipeToNodeWritable(<div>hello world</div>, writable);
     jest.runAllTimers();
     expect(writable.result).toBe('<div>hello world</div>');

packages/react-dom/src/__tests__/ReactDOMHooks-test.js

@@ -32,8 +32,8 @@ describe('ReactDOMHooks', () => {
   });
 
   it('can ReactDOM.render() from useEffect', () => {
-    let container2 = document.createElement('div');
-    let container3 = document.createElement('div');
+    const container2 = document.createElement('div');
+    const container3 = document.createElement('div');
 
     function Example1({n}) {
       React.useEffect(() => {

packages/react-dom/src/__tests__/ReactDOMInput-test.js

@@ -383,7 +383,7 @@ describe('ReactDOMInput', () => {
   });
 
   it('should display `defaultValue` of number 0', () => {
-    let stub = <input type="text" defaultValue={0} />;
+    const stub = <input type="text" defaultValue={0} />;
     const node = ReactDOM.render(stub, container);
 
     expect(node.getAttribute('value')).toBe('0');
@@ -415,14 +415,14 @@ describe('ReactDOMInput', () => {
   });
 
   it('should display "true" for `defaultValue` of `true`', () => {
-    let stub = <input type="text" defaultValue={true} />;
+    const stub = <input type="text" defaultValue={true} />;
     const node = ReactDOM.render(stub, container);
 
     expect(node.value).toBe('true');
   });
 
   it('should display "false" for `defaultValue` of `false`', () => {
-    let stub = <input type="text" defaultValue={false} />;
+    const stub = <input type="text" defaultValue={false} />;
     const node = ReactDOM.render(stub, container);
 
     expect(node.value).toBe('false');
@@ -887,7 +887,7 @@ describe('ReactDOMInput', () => {
   });
 
   it('should set a value on a submit input', () => {
-    let stub = <input type="submit" value="banana" />;
+    const stub = <input type="submit" value="banana" />;
     ReactDOM.render(stub, container);
     const node = container.firstChild;
 
@@ -895,7 +895,7 @@ describe('ReactDOMInput', () => {
   });
 
   it('should not set an undefined value on a submit input', () => {
-    let stub = <input type="submit" value={undefined} />;
+    const stub = <input type="submit" value={undefined} />;
     ReactDOM.render(stub, container);
     const node = container.firstChild;
 
@@ -908,7 +908,7 @@ describe('ReactDOMInput', () => {
   });
 
   it('should not set an undefined value on a reset input', () => {
-    let stub = <input type="reset" value={undefined} />;
+    const stub = <input type="reset" value={undefined} />;
     ReactDOM.render(stub, container);
     const node = container.firstChild;
 
@@ -921,7 +921,7 @@ describe('ReactDOMInput', () => {
   });
 
   it('should not set a null value on a submit input', () => {
-    let stub = <input type="submit" value={null} />;
+    const stub = <input type="submit" value={null} />;
     expect(() => {
       ReactDOM.render(stub, container);
     }).toErrorDev('`value` prop on `input` should not be null');
@@ -936,7 +936,7 @@ describe('ReactDOMInput', () => {
   });
 
   it('should not set a null value on a reset input', () => {
-    let stub = <input type="reset" value={null} />;
+    const stub = <input type="reset" value={null} />;
     expect(() => {
       ReactDOM.render(stub, container);
     }).toErrorDev('`value` prop on `input` should not be null');
@@ -951,7 +951,7 @@ describe('ReactDOMInput', () => {
   });
 
   it('should set a value on a reset input', () => {
-    let stub = <input type="reset" value="banana" />;
+    const stub = <input type="reset" value="banana" />;
     ReactDOM.render(stub, container);
     const node = container.firstChild;
 
@@ -959,7 +959,7 @@ describe('ReactDOMInput', () => {
   });
 
   it('should set an empty string value on a submit input', () => {
-    let stub = <input type="submit" value="" />;
+    const stub = <input type="submit" value="" />;
     ReactDOM.render(stub, container);
     const node = container.firstChild;
 
@@ -967,7 +967,7 @@ describe('ReactDOMInput', () => {
   });
 
   it('should set an empty string value on a reset input', () => {
-    let stub = <input type="reset" value="" />;
+    const stub = <input type="reset" value="" />;
     ReactDOM.render(stub, container);
     const node = container.firstChild;
 

packages/react-dom/src/__tests__/ReactDOMOption-test.js

@@ -22,7 +22,7 @@ describe('ReactDOMOption', () => {
   });
 
   it('should flatten children to a string', () => {
-    let stub = (
+    const stub = (
       <option>
         {1} {'foo'}
       </option>
@@ -50,7 +50,7 @@ describe('ReactDOMOption', () => {
   });
 
   it('should ignore null/undefined/false children without warning', () => {
-    let stub = (
+    const stub = (
       <option>
         {1} {false}
         {true}
@@ -92,7 +92,7 @@ describe('ReactDOMOption', () => {
   it('should support element-ish child', () => {
     // This is similar to <fbt>.
     // It's important that we toString it.
-    let obj = {
+    const obj = {
       $$typeof: Symbol.for('react.element'),
       type: props => props.content,
       ref: null,
@@ -134,7 +134,7 @@ describe('ReactDOMOption', () => {
   });
 
   it('should be able to use dangerouslySetInnerHTML on option', () => {
-    let stub = <option dangerouslySetInnerHTML={{__html: 'foobar'}} />;
+    const stub = <option dangerouslySetInnerHTML={{__html: 'foobar'}} />;
     const node = ReactTestUtils.renderIntoDocument(stub);
 
     expect(node.innerHTML).toBe('foobar');
@@ -153,7 +153,7 @@ describe('ReactDOMOption', () => {
 
   it('should allow ignoring `value` on option', () => {
     const a = 'a';
-    let stub = (
+    const stub = (
       <select value="giraffe" onChange={() => {}}>
         <option>monkey</option>
         <option>gir{a}ffe</option>

packages/react-dom/src/__tests__/ReactDOMSelect-test.js

@@ -26,7 +26,7 @@ describe('ReactDOMSelect', () => {
   });
 
   it('should allow setting `defaultValue`', () => {
-    let stub = (
+    const stub = (
       <select defaultValue="giraffe">
         <option value="monkey">A monkey!</option>
         <option value="giraffe">A giraffe!</option>
@@ -75,7 +75,7 @@ describe('ReactDOMSelect', () => {
   });
 
   it('should allow setting `defaultValue` with multiple', () => {
-    let stub = (
+    const stub = (
       <select multiple={true} defaultValue={['giraffe', 'gorilla']}>
         <option value="monkey">A monkey!</option>
         <option value="giraffe">A giraffe!</option>
@@ -104,7 +104,7 @@ describe('ReactDOMSelect', () => {
   });
 
   it('should allow setting `value`', () => {
-    let stub = (
+    const stub = (
       <select value="giraffe" onChange={noop}>
         <option value="monkey">A monkey!</option>
         <option value="giraffe">A giraffe!</option>
@@ -128,7 +128,7 @@ describe('ReactDOMSelect', () => {
   });
 
   it('should default to the first non-disabled option', () => {
-    let stub = (
+    const stub = (
       <select defaultValue="">
         <option disabled={true}>Disabled</option>
         <option disabled={true}>Still Disabled</option>
@@ -143,7 +143,7 @@ describe('ReactDOMSelect', () => {
   });
 
   it('should allow setting `value` to __proto__', () => {
-    let stub = (
+    const stub = (
       <select value="__proto__" onChange={noop}>
         <option value="monkey">A monkey!</option>
         <option value="__proto__">A giraffe!</option>
@@ -175,7 +175,7 @@ describe('ReactDOMSelect', () => {
   });
 
   it('should allow setting `value` with multiple', () => {
-    let stub = (
+    const stub = (
       <select multiple={true} value={['giraffe', 'gorilla']} onChange={noop}>
         <option value="monkey">A monkey!</option>
         <option value="giraffe">A giraffe!</option>
@@ -204,7 +204,7 @@ describe('ReactDOMSelect', () => {
   });
 
   it('should allow setting `value` to __proto__ with multiple', () => {
-    let stub = (
+    const stub = (
       <select multiple={true} value={['__proto__', 'gorilla']} onChange={noop}>
         <option value="monkey">A monkey!</option>
         <option value="__proto__">A __proto__!</option>
@@ -233,7 +233,7 @@ describe('ReactDOMSelect', () => {
   });
 
   it('should not select other options automatically', () => {
-    let stub = (
+    const stub = (
       <select multiple={true} value={['12']} onChange={noop}>
         <option value="1">one</option>
         <option value="2">two</option>
@@ -248,7 +248,7 @@ describe('ReactDOMSelect', () => {
   });
 
   it('should reset child options selected when they are changed and `value` is set', () => {
-    let stub = <select multiple={true} value={['a', 'b']} onChange={noop} />;
+    const stub = <select multiple={true} value={['a', 'b']} onChange={noop} />;
     const container = document.createElement('div');
     const node = ReactDOM.render(stub, container);
 
@@ -306,7 +306,7 @@ describe('ReactDOMSelect', () => {
   });
 
   it('should allow switching to multiple', () => {
-    let stub = (
+    const stub = (
       <select defaultValue="giraffe">
         <option value="monkey">A monkey!</option>
         <option value="giraffe">A giraffe!</option>
@@ -335,7 +335,7 @@ describe('ReactDOMSelect', () => {
   });
 
   it('should allow switching from multiple', () => {
-    let stub = (
+    const stub = (
       <select multiple={true} defaultValue={['giraffe', 'gorilla']}>
         <option value="monkey">A monkey!</option>
         <option value="giraffe">A giraffe!</option>
@@ -389,7 +389,7 @@ describe('ReactDOMSelect', () => {
   });
 
   it('should remember value when switching to uncontrolled', () => {
-    let stub = (
+    const stub = (
       <select value={'giraffe'} onChange={noop}>
         <option value="monkey">A monkey!</option>
         <option value="giraffe">A giraffe!</option>
@@ -412,7 +412,7 @@ describe('ReactDOMSelect', () => {
   });
 
   it('should remember updated value when switching to uncontrolled', () => {
-    let stub = (
+    const stub = (
       <select value={'giraffe'} onChange={noop}>
         <option value="monkey">A monkey!</option>
         <option value="giraffe">A giraffe!</option>
@@ -663,7 +663,7 @@ describe('ReactDOMSelect', () => {
   });
 
   it('should refresh state on change', () => {
-    let stub = (
+    const stub = (
       <select value="giraffe" onChange={noop}>
         <option value="monkey">A monkey!</option>
         <option value="giraffe">A giraffe!</option>
@@ -725,7 +725,7 @@ describe('ReactDOMSelect', () => {
     }
 
     const container = document.createElement('div');
-    let stub = (
+    const stub = (
       <select value="giraffe" onChange={changeView}>
         <option value="monkey">A monkey!</option>
         <option value="giraffe">A giraffe!</option>

packages/react-dom/src/__tests__/ReactDOMSelection-test.internal.js

@@ -60,7 +60,7 @@ describe('ReactDOMSelection', () => {
         if (i === node.childNodes.length) {
           break;
         }
-        let n = node.childNodes[i];
+        const n = node.childNodes[i];
         traverse(n);
       }
     }

packages/react-dom/src/__tests__/ReactDOMServerIntegrationBasic-test.js

@@ -63,37 +63,37 @@ describe('ReactDOMServerIntegration', () => {
     });
 
     itRenders('a string', async render => {
-      let e = await render('Hello');
+      const e = await render('Hello');
       expect(e.nodeType).toBe(3);
       expect(e.nodeValue).toMatch('Hello');
     });
 
     itRenders('a number', async render => {
-      let e = await render(42);
+      const e = await render(42);
       expect(e.nodeType).toBe(3);
       expect(e.nodeValue).toMatch('42');
     });
 
     itRenders('an array with one child', async render => {
-      let e = await render([<div key={1}>text1</div>]);
-      let parent = e.parentNode;
+      const e = await render([<div key={1}>text1</div>]);
+      const parent = e.parentNode;
       expect(parent.childNodes[0].tagName).toBe('DIV');
     });
 
     itRenders('an array with several children', async render => {
-      let Header = props => {
+      const Header = props => {
         return <p>header</p>;
       };
-      let Footer = props => {
+      const Footer = props => {
         return [<h2 key={1}>footer</h2>, <h3 key={2}>about</h3>];
       };
-      let e = await render([
+      const e = await render([
         <div key={1}>text1</div>,
         <span key={2}>text2</span>,
         <Header key={3} />,
         <Footer key={4} />,
       ]);
-      let parent = e.parentNode;
+      const parent = e.parentNode;
       expect(parent.childNodes[0].tagName).toBe('DIV');
       expect(parent.childNodes[1].tagName).toBe('SPAN');
       expect(parent.childNodes[2].tagName).toBe('P');
@@ -102,12 +102,12 @@ describe('ReactDOMServerIntegration', () => {
     });
 
     itRenders('a nested array', async render => {
-      let e = await render([
+      const e = await render([
         [<div key={1}>text1</div>],
         <span key={1}>text2</span>,
         [[[null, <p key={1} />], false]],
       ]);
-      let parent = e.parentNode;
+      const parent = e.parentNode;
       expect(parent.childNodes[0].tagName).toBe('DIV');
       expect(parent.childNodes[1].tagName).toBe('SPAN');
       expect(parent.childNodes[2].tagName).toBe('P');
@@ -128,8 +128,8 @@ describe('ReactDOMServerIntegration', () => {
           };
         },
       };
-      let e = await render(threeDivIterable);
-      let parent = e.parentNode;
+      const e = await render(threeDivIterable);
+      const parent = e.parentNode;
       expect(parent.childNodes.length).toBe(3);
       expect(parent.childNodes[0].tagName).toBe('DIV');
       expect(parent.childNodes[1].tagName).toBe('DIV');
@@ -137,7 +137,7 @@ describe('ReactDOMServerIntegration', () => {
     });
 
     itRenders('emptyish values', async render => {
-      let e = await render(0);
+      const e = await render(0);
       expect(e.nodeType).toBe(TEXT_NODE_TYPE);
       expect(e.nodeValue).toMatch('0');
 

packages/react-dom/src/__tests__/ReactDOMServerIntegrationClassContextType-test.js

@@ -257,7 +257,7 @@ describe('ReactDOMServerIntegration', () => {
           </LanguageConsumer>
         </div>
       );
-      let e = await render(<App />);
+      const e = await render(<App />);
       expect(e.querySelector('#theme1').textContent).toBe('dark');
       expect(e.querySelector('#theme2').textContent).toBe('light');
       expect(e.querySelector('#theme3').textContent).toBe('blue');

packages/react-dom/src/__tests__/ReactDOMServerIntegrationElements-test.js

@@ -128,9 +128,8 @@ describe('ReactDOMServerIntegration', () => {
             Text<span>More Text</span>
           </div>,
         );
-        let spanNode;
         expect(e.childNodes.length).toBe(2);
-        spanNode = e.childNodes[1];
+        const spanNode = e.childNodes[1];
         expectTextNode(e.childNodes[0], 'Text');
         expect(spanNode.tagName).toBe('SPAN');
         expect(spanNode.childNodes.length).toBe(1);
@@ -397,7 +396,7 @@ describe('ReactDOMServerIntegration', () => {
       });
 
       itRenders('svg child element with an attribute', async render => {
-        let e = await render(<svg viewBox="0 0 0 0" />);
+        const e = await render(<svg viewBox="0 0 0 0" />);
         expect(e.childNodes.length).toBe(0);
         expect(e.tagName).toBe('svg');
         expect(e.namespaceURI).toBe('http://www.w3.org/2000/svg');
@@ -439,14 +438,14 @@ describe('ReactDOMServerIntegration', () => {
       });
 
       itRenders('svg element with a tabIndex attribute', async render => {
-        let e = await render(<svg tabIndex="1" />);
+        const e = await render(<svg tabIndex="1" />);
         expect(e.tabIndex).toBe(1);
       });
 
       itRenders(
         'svg element with a badly cased tabIndex attribute',
         async render => {
-          let e = await render(<svg tabindex="1" />, 1);
+          const e = await render(<svg tabindex="1" />, 1);
           expect(e.tabIndex).toBe(1);
         },
       );
@@ -758,11 +757,10 @@ describe('ReactDOMServerIntegration', () => {
             </div>,
           );
           expect(e.id).toBe('parent');
-          let child1, child2, textNode;
           expect(e.childNodes.length).toBe(3);
-          child1 = e.childNodes[0];
-          textNode = e.childNodes[1];
-          child2 = e.childNodes[2];
+          const child1 = e.childNodes[0];
+          const textNode = e.childNodes[1];
+          const child2 = e.childNodes[2];
           expect(child1.id).toBe('child1');
           expect(child1.childNodes.length).toBe(0);
           expectTextNode(textNode, ' ');
@@ -776,11 +774,10 @@ describe('ReactDOMServerIntegration', () => {
         async render => {
           // prettier-ignore
           const e = await render(<div id="parent">  <div id="child" />   </div>); // eslint-disable-line no-multi-spaces
-          let textNode1, child, textNode2;
           expect(e.childNodes.length).toBe(3);
-          textNode1 = e.childNodes[0];
-          child = e.childNodes[1];
-          textNode2 = e.childNodes[2];
+          const textNode1 = e.childNodes[0];
+          const child = e.childNodes[1];
+          const textNode2 = e.childNodes[2];
           expect(e.id).toBe('parent');
           expectTextNode(textNode1, '  ');
           expect(child.id).toBe('child');
@@ -795,7 +792,7 @@ describe('ReactDOMServerIntegration', () => {
           <Component>{['a', 'b', [undefined], [[false, 'c']]]}</Component>,
         );
 
-        let parent = e.parentNode;
+        const parent = e.parentNode;
         if (
           render === serverRender ||
           render === clientRenderOnServerString ||

packages/react-dom/src/__tests__/ReactDOMServerIntegrationFragment-test.js

@@ -41,20 +41,20 @@ describe('ReactDOMServerIntegration', () => {
 
   describe('React.Fragment', () => {
     itRenders('a fragment with one child', async render => {
-      let e = await render(
+      const e = await render(
         <>
           <div>text1</div>
         </>,
       );
-      let parent = e.parentNode;
+      const parent = e.parentNode;
       expect(parent.childNodes[0].tagName).toBe('DIV');
     });
 
     itRenders('a fragment with several children', async render => {
-      let Header = props => {
+      const Header = props => {
         return <p>header</p>;
       };
-      let Footer = props => {
+      const Footer = props => {
         return (
           <>
             <h2>footer</h2>
@@ -62,7 +62,7 @@ describe('ReactDOMServerIntegration', () => {
           </>
         );
       };
-      let e = await render(
+      const e = await render(
         <>
           <div>text1</div>
           <span>text2</span>
@@ -70,7 +70,7 @@ describe('ReactDOMServerIntegration', () => {
           <Footer />
         </>,
       );
-      let parent = e.parentNode;
+      const parent = e.parentNode;
       expect(parent.childNodes[0].tagName).toBe('DIV');
       expect(parent.childNodes[1].tagName).toBe('SPAN');
       expect(parent.childNodes[2].tagName).toBe('P');
@@ -79,7 +79,7 @@ describe('ReactDOMServerIntegration', () => {
     });
 
     itRenders('a nested fragment', async render => {
-      let e = await render(
+      const e = await render(
         <>
           <>
             <div>text1</div>
@@ -96,7 +96,7 @@ describe('ReactDOMServerIntegration', () => {
           </>
         </>,
       );
-      let parent = e.parentNode;
+      const parent = e.parentNode;
       expect(parent.childNodes[0].tagName).toBe('DIV');
       expect(parent.childNodes[1].tagName).toBe('SPAN');
       expect(parent.childNodes[2].tagName).toBe('P');

packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.internal.js

@@ -121,7 +121,7 @@ describe('ReactDOMServerHooks', () => {
         return <span>{children}</span>;
       }
       function Counter() {
-        let [count, setCount] = useState(0);
+        const [count, setCount] = useState(0);
         return (
           <div>
             <UpdateCount setCount={setCount} count={count}>
@@ -140,7 +140,7 @@ describe('ReactDOMServerHooks', () => {
       async render => {
         class Counter extends React.Component {
           render() {
-            let [count] = useState(0);
+            const [count] = useState(0);
             return <Text text={count} />;
           }
         }
@@ -157,7 +157,7 @@ describe('ReactDOMServerHooks', () => {
 
     itRenders('multiple times when an updater is called', async render => {
       function Counter() {
-        let [count, setCount] = useState(0);
+        const [count, setCount] = useState(0);
         if (count < 12) {
           setCount(c => c + 1);
           setCount(c => c + 1);
@@ -172,7 +172,7 @@ describe('ReactDOMServerHooks', () => {
 
     itRenders('until there are no more new updates', async render => {
       function Counter() {
-        let [count, setCount] = useState(0);
+        const [count, setCount] = useState(0);
         if (count < 3) {
           setCount(count + 1);
         }
@@ -187,7 +187,7 @@ describe('ReactDOMServerHooks', () => {
       'after too many iterations',
       async render => {
         function Counter() {
-          let [count, setCount] = useState(0);
+          const [count, setCount] = useState(0);
           setCount(count + 1);
           return <span>{count}</span>;
         }
@@ -204,7 +204,7 @@ describe('ReactDOMServerHooks', () => {
         return action === 'increment' ? state + 1 : state;
       }
       function Counter() {
-        let [count] = useReducer(reducer, 0);
+        const [count] = useReducer(reducer, 0);
         yieldValue('Render: ' + count);
         return <Text text={count} />;
       }
@@ -221,7 +221,7 @@ describe('ReactDOMServerHooks', () => {
         return action === 'increment' ? state + 1 : state;
       }
       function Counter() {
-        let [count] = useReducer(reducer, 0, c => c + 1);
+        const [count] = useReducer(reducer, 0, c => c + 1);
         yieldValue('Render: ' + count);
         return <Text text={count} />;
       }
@@ -240,7 +240,7 @@ describe('ReactDOMServerHooks', () => {
           return action === 'increment' ? state + 1 : state;
         }
         function Counter() {
-          let [count, dispatch] = useReducer(reducer, 0);
+          const [count, dispatch] = useReducer(reducer, 0);
           if (count < 3) {
             dispatch('increment');
           }
@@ -286,8 +286,8 @@ describe('ReactDOMServerHooks', () => {
         }
 
         function Counter() {
-          let [reducer, setReducer] = useState(() => reducerA);
-          let [count, dispatch] = useReducer(reducer, 0);
+          const [reducer, setReducer] = useState(() => reducerA);
+          const [count, dispatch] = useReducer(reducer, 0);
           if (count < 20) {
             dispatch('increment');
             // Swap reducers each time we increment
@@ -630,7 +630,7 @@ describe('ReactDOMServerHooks', () => {
         const Context = React.createContext({}, () => {});
         class Counter extends React.Component {
           render() {
-            let [count] = useContext(Context);
+            const [count] = useContext(Context);
             return <Text text={count} />;
           }
         }
@@ -705,7 +705,7 @@ describe('ReactDOMServerHooks', () => {
   );
 
   itRenders('warns when bitmask is passed to useContext', async render => {
-    let Context = React.createContext('Hi');
+    const Context = React.createContext('Hi');
 
     function Foo() {
       return <span>{useContext(Context, 1)}</span>;
@@ -815,12 +815,12 @@ describe('ReactDOMServerHooks', () => {
       const Context = React.createContext(42);
 
       function ReadInMemo(props) {
-        let count = React.useMemo(() => readContext(Context), []);
+        const count = React.useMemo(() => readContext(Context), []);
         return <Text text={count} />;
       }
 
       function ReadInReducer(props) {
-        let [count, dispatch] = React.useReducer(() => readContext(Context));
+        const [count, dispatch] = React.useReducer(() => readContext(Context));
         if (count !== 42) {
           dispatch();
         }

packages/react-dom/src/__tests__/ReactDOMServerIntegrationLegacyContextDisabled-test.internal.js

@@ -69,7 +69,7 @@ describe('ReactDOMServerIntegrationLegacyContextDisabled', () => {
       }
     }
 
-    let lifecycleContextLog = [];
+    const lifecycleContextLog = [];
     class LegacyClsConsumer extends React.Component {
       static contextTypes = {
         foo() {},
@@ -113,7 +113,7 @@ describe('ReactDOMServerIntegrationLegacyContextDisabled', () => {
   });
 
   itRenders('modern context', async render => {
-    let Ctx = React.createContext();
+    const Ctx = React.createContext();
 
     class Provider extends React.Component {
       render() {
@@ -131,7 +131,7 @@ describe('ReactDOMServerIntegrationLegacyContextDisabled', () => {
       }
     }
 
-    let lifecycleContextLog = [];
+    const lifecycleContextLog = [];
     class ContextTypeConsumer extends React.Component {
       static contextType = Ctx;
       shouldComponentUpdate(nextProps, nextState, nextContext) {

packages/react-dom/src/__tests__/ReactDOMServerIntegrationModes-test.js

@@ -41,20 +41,20 @@ describe('ReactDOMServerIntegration', () => {
 
   describe('React.StrictMode', () => {
     itRenders('a strict mode with one child', async render => {
-      let e = await render(
+      const e = await render(
         <React.StrictMode>
           <div>text1</div>
         </React.StrictMode>,
       );
-      let parent = e.parentNode;
+      const parent = e.parentNode;
       expect(parent.childNodes[0].tagName).toBe('DIV');
     });
 
     itRenders('a strict mode with several children', async render => {
-      let Header = props => {
+      const Header = props => {
         return <p>header</p>;
       };
-      let Footer = props => {
+      const Footer = props => {
         return (
           <React.StrictMode>
             <h2>footer</h2>
@@ -62,7 +62,7 @@ describe('ReactDOMServerIntegration', () => {
           </React.StrictMode>
         );
       };
-      let e = await render(
+      const e = await render(
         <React.StrictMode>
           <div>text1</div>
           <span>text2</span>
@@ -70,7 +70,7 @@ describe('ReactDOMServerIntegration', () => {
           <Footer />
         </React.StrictMode>,
       );
-      let parent = e.parentNode;
+      const parent = e.parentNode;
       expect(parent.childNodes[0].tagName).toBe('DIV');
       expect(parent.childNodes[1].tagName).toBe('SPAN');
       expect(parent.childNodes[2].tagName).toBe('P');
@@ -79,7 +79,7 @@ describe('ReactDOMServerIntegration', () => {
     });
 
     itRenders('a nested strict mode', async render => {
-      let e = await render(
+      const e = await render(
         <React.StrictMode>
           <React.StrictMode>
             <div>text1</div>
@@ -96,7 +96,7 @@ describe('ReactDOMServerIntegration', () => {
           </React.StrictMode>
         </React.StrictMode>,
       );
-      let parent = e.parentNode;
+      const parent = e.parentNode;
       expect(parent.childNodes[0].tagName).toBe('DIV');
       expect(parent.childNodes[1].tagName).toBe('SPAN');
       expect(parent.childNodes[2].tagName).toBe('P');

packages/react-dom/src/__tests__/ReactDOMServerIntegrationNewContext-test.js

@@ -287,7 +287,7 @@ describe('ReactDOMServerIntegration', () => {
           </Language.Consumer>
         </div>
       );
-      let e = await render(<App />);
+      const e = await render(<App />);
       expect(e.querySelector('#theme1').textContent).toBe('dark');
       expect(e.querySelector('#theme2').textContent).toBe('light');
       expect(e.querySelector('#theme3').textContent).toBe('blue');
@@ -442,11 +442,11 @@ describe('ReactDOMServerIntegration', () => {
         </CurrentIndex.Provider>
       );
 
-      let streams = [];
+      const streams = [];
 
       // Test with more than 32 streams to test that growing the thread count
       // works properly.
-      let streamCount = 34;
+      const streamCount = 34;
 
       for (let i = 0; i < streamCount; i++) {
         streams[i] = ReactDOMServer.renderToNodeStream(

packages/react-dom/src/__tests__/ReactDOMServerIntegrationUntrustedURL-test.internal.js

@@ -139,7 +139,7 @@ function runTests(itRenders, itRejectsRendering, expectToReject) {
   );
 
   it('rejects a javascript protocol href if it is added during an update', () => {
-    let container = document.createElement('div');
+    const container = document.createElement('div');
     ReactDOM.render(<a href="thisisfine">click me</a>, container);
     expectToReject(() => {
       ReactDOM.render(<a href="javascript:notfine">click me</a>, container);
@@ -244,7 +244,7 @@ describe('ReactDOMServerIntegration - Untrusted URLs - disableJavaScriptURLs', (
     }
 
     let toStringCalls = 0;
-    let firstIsSafe = {
+    const firstIsSafe = {
       toString() {
         // This tries to avoid the validation by pretending to be safe
         // the first times it is called and then becomes dangerous.
@@ -262,7 +262,7 @@ describe('ReactDOMServerIntegration - Untrusted URLs - disableJavaScriptURLs', (
   });
 
   it('rejects a javascript protocol href if it is added during an update twice', () => {
-    let container = document.createElement('div');
+    const container = document.createElement('div');
     ReactDOM.render(<a href="thisisfine">click me</a>, container);
     expectToReject(() => {
       ReactDOM.render(<a href="javascript:notfine">click me</a>, container);

packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js

@@ -95,7 +95,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
   beforeEach(() => {
     jest.resetModuleRegistry();
 
-    let ReactFeatureFlags = require('shared/ReactFeatureFlags');
+    const ReactFeatureFlags = require('shared/ReactFeatureFlags');
     ReactFeatureFlags.enableDeprecatedFlareAPI = true;
     ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode = false;
 
@@ -140,19 +140,19 @@ describe('ReactDOMServerSelectiveHydration', () => {
       );
     }
 
-    let finalHTML = ReactDOMServer.renderToString(<App />);
+    const finalHTML = ReactDOMServer.renderToString(<App />);
 
     expect(Scheduler).toHaveYielded(['App', 'A', 'B']);
 
-    let container = document.createElement('div');
+    const container = document.createElement('div');
     // We need this to be in the document since we'll dispatch events on it.
     document.body.appendChild(container);
 
     container.innerHTML = finalHTML;
 
-    let span = container.getElementsByTagName('span')[1];
+    const span = container.getElementsByTagName('span')[1];
 
-    let root = ReactDOM.createRoot(container, {hydrate: true});
+    const root = ReactDOM.createRoot(container, {hydrate: true});
     root.render(<App />);
 
     // Nothing has been hydrated so far.
@@ -160,7 +160,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
 
     // This should synchronously hydrate the root App and the second suspense
     // boundary.
-    let result = dispatchClickEvent(span);
+    const result = dispatchClickEvent(span);
 
     // The event should have been canceled because we called preventDefault.
     expect(result).toBe(false);
@@ -177,7 +177,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
   it('hydrates at higher pri if sync did not work first time', async () => {
     let suspend = false;
     let resolve;
-    let promise = new Promise(resolvePromise => (resolve = resolvePromise));
+    const promise = new Promise(resolvePromise => (resolve = resolvePromise));
 
     function Child({text}) {
       if ((text === 'A' || text === 'D') && suspend) {
@@ -215,30 +215,30 @@ describe('ReactDOMServerSelectiveHydration', () => {
       );
     }
 
-    let finalHTML = ReactDOMServer.renderToString(<App />);
+    const finalHTML = ReactDOMServer.renderToString(<App />);
 
     expect(Scheduler).toHaveYielded(['App', 'A', 'B', 'C', 'D']);
 
-    let container = document.createElement('div');
+    const container = document.createElement('div');
     // We need this to be in the document since we'll dispatch events on it.
     document.body.appendChild(container);
 
     container.innerHTML = finalHTML;
 
-    let spanD = container.getElementsByTagName('span')[3];
+    const spanD = container.getElementsByTagName('span')[3];
 
     suspend = true;
 
     // A and D will be suspended. We'll click on D which should take
     // priority, after we unsuspend.
-    let root = ReactDOM.createRoot(container, {hydrate: true});
+    const root = ReactDOM.createRoot(container, {hydrate: true});
     root.render(<App />);
 
     // Nothing has been hydrated so far.
     expect(Scheduler).toHaveYielded([]);
 
     // This click target cannot be hydrated yet because it's suspended.
-    let result = dispatchClickEvent(spanD);
+    const result = dispatchClickEvent(spanD);
 
     expect(Scheduler).toHaveYielded(['App']);
 
@@ -261,7 +261,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
   it('hydrates at higher pri for secondary discrete events', async () => {
     let suspend = false;
     let resolve;
-    let promise = new Promise(resolvePromise => (resolve = resolvePromise));
+    const promise = new Promise(resolvePromise => (resolve = resolvePromise));
 
     function Child({text}) {
       if ((text === 'A' || text === 'D') && suspend) {
@@ -299,25 +299,25 @@ describe('ReactDOMServerSelectiveHydration', () => {
       );
     }
 
-    let finalHTML = ReactDOMServer.renderToString(<App />);
+    const finalHTML = ReactDOMServer.renderToString(<App />);
 
     expect(Scheduler).toHaveYielded(['App', 'A', 'B', 'C', 'D']);
 
-    let container = document.createElement('div');
+    const container = document.createElement('div');
     // We need this to be in the document since we'll dispatch events on it.
     document.body.appendChild(container);
 
     container.innerHTML = finalHTML;
 
-    let spanA = container.getElementsByTagName('span')[0];
-    let spanC = container.getElementsByTagName('span')[2];
-    let spanD = container.getElementsByTagName('span')[3];
+    const spanA = container.getElementsByTagName('span')[0];
+    const spanC = container.getElementsByTagName('span')[2];
+    const spanD = container.getElementsByTagName('span')[3];
 
     suspend = true;
 
     // A and D will be suspended. We'll click on D which should take
     // priority, after we unsuspend.
-    let root = ReactDOM.createRoot(container, {hydrate: true});
+    const root = ReactDOM.createRoot(container, {hydrate: true});
     root.render(<App />);
 
     // Nothing has been hydrated so far.
@@ -352,7 +352,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
 
   if (__EXPERIMENTAL__) {
     it('hydrates the target boundary synchronously during a click (flare)', async () => {
-      let usePress = require('react-interactions/events/press').usePress;
+      const usePress = require('react-interactions/events/press').usePress;
 
       function Child({text}) {
         Scheduler.unstable_yieldValue(text);
@@ -379,29 +379,29 @@ describe('ReactDOMServerSelectiveHydration', () => {
         );
       }
 
-      let finalHTML = ReactDOMServer.renderToString(<App />);
+      const finalHTML = ReactDOMServer.renderToString(<App />);
 
       expect(Scheduler).toHaveYielded(['App', 'A', 'B']);
 
-      let container = document.createElement('div');
+      const container = document.createElement('div');
       // We need this to be in the document since we'll dispatch events on it.
       document.body.appendChild(container);
 
       container.innerHTML = finalHTML;
 
-      let root = ReactDOM.createRoot(container, {hydrate: true});
+      const root = ReactDOM.createRoot(container, {hydrate: true});
       root.render(<App />);
 
       // Nothing has been hydrated so far.
       expect(Scheduler).toHaveYielded([]);
 
-      let span = container.getElementsByTagName('span')[1];
+      const span = container.getElementsByTagName('span')[1];
 
-      let target = createEventTarget(span);
+      const target = createEventTarget(span);
 
       // This should synchronously hydrate the root App and the second suspense
       // boundary.
-      let preventDefault = jest.fn();
+      const preventDefault = jest.fn();
       target.virtualclick({preventDefault});
 
       // The event should have been canceled because we called preventDefault.
@@ -417,10 +417,10 @@ describe('ReactDOMServerSelectiveHydration', () => {
     });
 
     it('hydrates at higher pri if sync did not work first time (flare)', async () => {
-      let usePress = require('react-interactions/events/press').usePress;
+      const usePress = require('react-interactions/events/press').usePress;
       let suspend = false;
       let resolve;
-      let promise = new Promise(resolvePromise => (resolve = resolvePromise));
+      const promise = new Promise(resolvePromise => (resolve = resolvePromise));
 
       function Child({text}) {
         if ((text === 'A' || text === 'D') && suspend) {
@@ -456,30 +456,30 @@ describe('ReactDOMServerSelectiveHydration', () => {
         );
       }
 
-      let finalHTML = ReactDOMServer.renderToString(<App />);
+      const finalHTML = ReactDOMServer.renderToString(<App />);
 
       expect(Scheduler).toHaveYielded(['App', 'A', 'B', 'C', 'D']);
 
-      let container = document.createElement('div');
+      const container = document.createElement('div');
       // We need this to be in the document since we'll dispatch events on it.
       document.body.appendChild(container);
 
       container.innerHTML = finalHTML;
 
-      let spanD = container.getElementsByTagName('span')[3];
+      const spanD = container.getElementsByTagName('span')[3];
 
       suspend = true;
 
       // A and D will be suspended. We'll click on D which should take
       // priority, after we unsuspend.
-      let root = ReactDOM.createRoot(container, {hydrate: true});
+      const root = ReactDOM.createRoot(container, {hydrate: true});
       root.render(<App />);
 
       // Nothing has been hydrated so far.
       expect(Scheduler).toHaveYielded([]);
 
       // This click target cannot be hydrated yet because it's suspended.
-      let result = dispatchClickEvent(spanD);
+      const result = dispatchClickEvent(spanD);
 
       expect(Scheduler).toHaveYielded(['App']);
 
@@ -500,10 +500,10 @@ describe('ReactDOMServerSelectiveHydration', () => {
     });
 
     it('hydrates at higher pri for secondary discrete events (flare)', async () => {
-      let usePress = require('react-interactions/events/press').usePress;
+      const usePress = require('react-interactions/events/press').usePress;
       let suspend = false;
       let resolve;
-      let promise = new Promise(resolvePromise => (resolve = resolvePromise));
+      const promise = new Promise(resolvePromise => (resolve = resolvePromise));
 
       function Child({text}) {
         if ((text === 'A' || text === 'D') && suspend) {
@@ -539,25 +539,25 @@ describe('ReactDOMServerSelectiveHydration', () => {
         );
       }
 
-      let finalHTML = ReactDOMServer.renderToString(<App />);
+      const finalHTML = ReactDOMServer.renderToString(<App />);
 
       expect(Scheduler).toHaveYielded(['App', 'A', 'B', 'C', 'D']);
 
-      let container = document.createElement('div');
+      const container = document.createElement('div');
       // We need this to be in the document since we'll dispatch events on it.
       document.body.appendChild(container);
 
       container.innerHTML = finalHTML;
 
-      let spanA = container.getElementsByTagName('span')[0];
-      let spanC = container.getElementsByTagName('span')[2];
-      let spanD = container.getElementsByTagName('span')[3];
+      const spanA = container.getElementsByTagName('span')[0];
+      const spanC = container.getElementsByTagName('span')[2];
+      const spanD = container.getElementsByTagName('span')[3];
 
       suspend = true;
 
       // A and D will be suspended. We'll click on D which should take
       // priority, after we unsuspend.
-      let root = ReactDOM.createRoot(container, {hydrate: true});
+      const root = ReactDOM.createRoot(container, {hydrate: true});
       root.render(<App />);
 
       // Nothing has been hydrated so far.
@@ -594,7 +594,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
   it('hydrates the hovered targets as higher priority for continuous events', async () => {
     let suspend = false;
     let resolve;
-    let promise = new Promise(resolvePromise => (resolve = resolvePromise));
+    const promise = new Promise(resolvePromise => (resolve = resolvePromise));
 
     function Child({text}) {
       if ((text === 'A' || text === 'D') && suspend) {
@@ -636,25 +636,25 @@ describe('ReactDOMServerSelectiveHydration', () => {
       );
     }
 
-    let finalHTML = ReactDOMServer.renderToString(<App />);
+    const finalHTML = ReactDOMServer.renderToString(<App />);
 
     expect(Scheduler).toHaveYielded(['App', 'A', 'B', 'C', 'D']);
 
-    let container = document.createElement('div');
+    const container = document.createElement('div');
     // We need this to be in the document since we'll dispatch events on it.
     document.body.appendChild(container);
 
     container.innerHTML = finalHTML;
 
-    let spanB = container.getElementsByTagName('span')[1];
-    let spanC = container.getElementsByTagName('span')[2];
-    let spanD = container.getElementsByTagName('span')[3];
+    const spanB = container.getElementsByTagName('span')[1];
+    const spanC = container.getElementsByTagName('span')[2];
+    const spanD = container.getElementsByTagName('span')[3];
 
     suspend = true;
 
     // A and D will be suspended. We'll click on D which should take
     // priority, after we unsuspend.
-    let root = ReactDOM.createRoot(container, {hydrate: true});
+    const root = ReactDOM.createRoot(container, {hydrate: true});
     root.render(<App />);
 
     // Nothing has been hydrated so far.
@@ -694,7 +694,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
   it('hydrates the last target path first for continuous events', async () => {
     let suspend = false;
     let resolve;
-    let promise = new Promise(resolvePromise => (resolve = resolvePromise));
+    const promise = new Promise(resolvePromise => (resolve = resolvePromise));
 
     function Child({text}) {
       if ((text === 'A' || text === 'D') && suspend) {
@@ -734,25 +734,25 @@ describe('ReactDOMServerSelectiveHydration', () => {
       );
     }
 
-    let finalHTML = ReactDOMServer.renderToString(<App />);
+    const finalHTML = ReactDOMServer.renderToString(<App />);
 
     expect(Scheduler).toHaveYielded(['App', 'A', 'B', 'C', 'D']);
 
-    let container = document.createElement('div');
+    const container = document.createElement('div');
     // We need this to be in the document since we'll dispatch events on it.
     document.body.appendChild(container);
 
     container.innerHTML = finalHTML;
 
-    let spanB = container.getElementsByTagName('span')[1];
-    let spanC = container.getElementsByTagName('span')[2];
-    let spanD = container.getElementsByTagName('span')[3];
+    const spanB = container.getElementsByTagName('span')[1];
+    const spanC = container.getElementsByTagName('span')[2];
+    const spanD = container.getElementsByTagName('span')[3];
 
     suspend = true;
 
     // A and D will be suspended. We'll click on D which should take
     // priority, after we unsuspend.
-    let root = ReactDOM.createRoot(container, {hydrate: true});
+    const root = ReactDOM.createRoot(container, {hydrate: true});
     root.render(<App />);
 
     // Nothing has been hydrated so far.
@@ -799,17 +799,17 @@ describe('ReactDOMServerSelectiveHydration', () => {
       );
     }
 
-    let finalHTML = ReactDOMServer.renderToString(<App />);
+    const finalHTML = ReactDOMServer.renderToString(<App />);
 
     expect(Scheduler).toHaveYielded(['App', 'A', 'B', 'C']);
 
-    let container = document.createElement('div');
+    const container = document.createElement('div');
     container.innerHTML = finalHTML;
 
-    let spanB = container.getElementsByTagName('span')[1];
-    let spanC = container.getElementsByTagName('span')[2];
+    const spanB = container.getElementsByTagName('span')[1];
+    const spanC = container.getElementsByTagName('span')[2];
 
-    let root = ReactDOM.createRoot(container, {hydrate: true});
+    const root = ReactDOM.createRoot(container, {hydrate: true});
     root.render(<App />);
 
     // Nothing has been hydrated so far.
@@ -829,7 +829,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
       Scheduler.unstable_yieldValue(text);
       return <span>{text}</span>;
     }
-    let ChildWithBoundary = React.memo(function({text}) {
+    const ChildWithBoundary = React.memo(function({text}) {
       return (
         <Suspense fallback="Loading...">
           <Child text={text} />
@@ -852,21 +852,21 @@ describe('ReactDOMServerSelectiveHydration', () => {
       );
     }
 
-    let finalHTML = ReactDOMServer.renderToString(<App a="A" />);
+    const finalHTML = ReactDOMServer.renderToString(<App a="A" />);
 
     expect(Scheduler).toHaveYielded(['App', 'A', 'a', 'B', 'b', 'C', 'c']);
 
-    let container = document.createElement('div');
+    const container = document.createElement('div');
     container.innerHTML = finalHTML;
 
     // We need this to be in the document since we'll dispatch events on it.
     document.body.appendChild(container);
 
-    let spanA = container.getElementsByTagName('span')[0];
-    let spanB = container.getElementsByTagName('span')[2];
-    let spanC = container.getElementsByTagName('span')[4];
+    const spanA = container.getElementsByTagName('span')[0];
+    const spanB = container.getElementsByTagName('span')[2];
+    const spanC = container.getElementsByTagName('span')[4];
 
-    let root = ReactDOM.createRoot(container, {hydrate: true});
+    const root = ReactDOM.createRoot(container, {hydrate: true});
     ReactTestUtils.act(() => {
       root.render(<App a="A" />);
 
@@ -923,7 +923,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
       ]);
     });
 
-    let spanA2 = container.getElementsByTagName('span')[0];
+    const spanA2 = container.getElementsByTagName('span')[0];
     // This is supposed to have been hydrated, not replaced.
     expect(spanA).toBe(spanA2);
 

packages/react-dom/src/__tests__/ReactDOMSuspensePlaceholder-test.js

@@ -72,7 +72,7 @@ describe('ReactDOMSuspensePlaceholder', () => {
   }
 
   it('hides and unhides timed out DOM elements', async () => {
-    let divs = [
+    const divs = [
       React.createRef(null),
       React.createRef(null),
       React.createRef(null),
@@ -244,7 +244,7 @@ describe('ReactDOMSuspensePlaceholder', () => {
     let suspendOnce = Promise.resolve();
     function Suspend() {
       if (suspendOnce) {
-        let promise = suspendOnce;
+        const promise = suspendOnce;
         suspendOnce = null;
         throw promise;
       }

packages/react-dom/src/__tests__/ReactDOMTextComponent-test.js

@@ -41,8 +41,8 @@ describe('ReactDOMTextComponent', () => {
     );
     let nodes = filterOutComments(inst.childNodes);
 
-    let foo = nodes[1];
-    let bar = nodes[2];
+    const foo = nodes[1];
+    const bar = nodes[2];
     expect(foo.data).toBe('foo');
     expect(bar.data).toBe('bar');
 
@@ -75,7 +75,7 @@ describe('ReactDOMTextComponent', () => {
     );
 
     let childNodes = filterOutComments(inst.childNodes);
-    let childDiv = childNodes[1];
+    const childDiv = childNodes[1];
 
     inst = ReactDOM.render(
       <div>
@@ -200,8 +200,8 @@ describe('ReactDOMTextComponent', () => {
       el,
     );
 
-    let childNodes = filterOutComments(inst.childNodes);
-    let textNode = childNodes[1];
+    const childNodes = filterOutComments(inst.childNodes);
+    const textNode = childNodes[1];
     textNode.textContent = 'foo';
     inst.insertBefore(
       document.createTextNode('bar'),
@@ -237,8 +237,8 @@ describe('ReactDOMTextComponent', () => {
       el,
     );
 
-    let childNodes = filterOutComments(inst.childNodes);
-    let textNode = childNodes[3];
+    const childNodes = filterOutComments(inst.childNodes);
+    const textNode = childNodes[3];
     textNode.textContent = 'foo';
     inst.insertBefore(
       document.createTextNode('bar'),
@@ -248,7 +248,7 @@ describe('ReactDOMTextComponent', () => {
       document.createTextNode('baz'),
       childNodes[3].nextSibling,
     );
-    let secondTextNode = childNodes[5];
+    const secondTextNode = childNodes[5];
     secondTextNode.textContent = 'bar';
     inst.insertBefore(
       document.createTextNode('foo'),

packages/react-dom/src/__tests__/ReactErrorBoundaries-test.internal.js

@@ -1043,8 +1043,8 @@ describe('ReactErrorBoundaries', () => {
   });
 
   it('resets object refs if mounting aborts', () => {
-    let childRef = React.createRef();
-    let errorMessageRef = React.createRef();
+    const childRef = React.createRef();
+    const errorMessageRef = React.createRef();
 
     const container = document.createElement('div');
     ReactDOM.render(
@@ -2073,7 +2073,7 @@ describe('ReactErrorBoundaries', () => {
     let err2;
 
     try {
-      let container = document.createElement('div');
+      const container = document.createElement('div');
       expect(() => ReactDOM.render(<X />, container)).toErrorDev(
         'React.createElement: type is invalid -- expected a string ' +
           '(for built-in components) or a class/function ' +
@@ -2083,7 +2083,7 @@ describe('ReactErrorBoundaries', () => {
       err1 = err;
     }
     try {
-      let container = document.createElement('div');
+      const container = document.createElement('div');
       expect(() => ReactDOM.render(<Y />, container)).toErrorDev(
         'React.createElement: type is invalid -- expected a string ' +
           '(for built-in components) or a class/function ' +

packages/react-dom/src/__tests__/ReactErrorLoggingRecovery-test.js

@@ -39,7 +39,7 @@ class Bad extends React.Component {
 }
 
 describe('ReactErrorLoggingRecovery', () => {
-  let originalConsoleError = console.error;
+  const originalConsoleError = console.error;
 
   beforeEach(() => {
     console.error = error => {

packages/react-dom/src/__tests__/ReactLegacyContextDisabled-test.internal.js

@@ -51,7 +51,7 @@ describe('ReactLegacyContextDisabled', () => {
       }
     }
 
-    let lifecycleContextLog = [];
+    const lifecycleContextLog = [];
     class LegacyClsConsumer extends React.Component {
       static contextTypes = {
         foo() {},
@@ -146,7 +146,7 @@ describe('ReactLegacyContextDisabled', () => {
   });
 
   it('renders a tree with modern context', () => {
-    let Ctx = React.createContext();
+    const Ctx = React.createContext();
 
     class Provider extends React.Component {
       render() {
@@ -164,7 +164,7 @@ describe('ReactLegacyContextDisabled', () => {
       }
     }
 
-    let lifecycleContextLog = [];
+    const lifecycleContextLog = [];
     class ContextTypeConsumer extends React.Component {
       static contextType = Ctx;
       shouldComponentUpdate(nextProps, nextState, nextContext) {

packages/react-dom/src/__tests__/ReactLegacyErrorBoundaries-test.internal.js

@@ -1093,8 +1093,8 @@ describe('ReactLegacyErrorBoundaries', () => {
   });
 
   it('resets object refs if mounting aborts', () => {
-    let childRef = React.createRef();
-    let errorMessageRef = React.createRef();
+    const childRef = React.createRef();
+    const errorMessageRef = React.createRef();
 
     const container = document.createElement('div');
     ReactDOM.render(
@@ -2080,7 +2080,7 @@ describe('ReactLegacyErrorBoundaries', () => {
     let err2;
 
     try {
-      let container = document.createElement('div');
+      const container = document.createElement('div');
       expect(() => ReactDOM.render(<X />, container)).toErrorDev(
         'React.createElement: type is invalid -- expected a string ' +
           '(for built-in components) or a class/function ' +
@@ -2090,7 +2090,7 @@ describe('ReactLegacyErrorBoundaries', () => {
       err1 = err;
     }
     try {
-      let container = document.createElement('div');
+      const container = document.createElement('div');
       expect(() => ReactDOM.render(<Y />, container)).toErrorDev(
         'React.createElement: type is invalid -- expected a string ' +
           '(for built-in components) or a class/function ' +

packages/react-dom/src/__tests__/ReactServerRendering-test.js

@@ -14,7 +14,7 @@ let React;
 let ReactDOMServer;
 let PropTypes;
 let ReactCurrentDispatcher;
-let enableSuspenseServerRenderer = require('shared/ReactFeatureFlags')
+const enableSuspenseServerRenderer = require('shared/ReactFeatureFlags')
   .enableSuspenseServerRenderer;
 
 function normalizeCodeLocInfo(str) {

packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js

@@ -494,10 +494,10 @@ describe('ReactDOMServerHydration', () => {
   it.experimental(
     'does not re-enter hydration after committing the first one',
     () => {
-      let finalHTML = ReactDOMServer.renderToString(<div />);
-      let container = document.createElement('div');
+      const finalHTML = ReactDOMServer.renderToString(<div />);
+      const container = document.createElement('div');
       container.innerHTML = finalHTML;
-      let root = ReactDOM.createRoot(container, {hydrate: true});
+      const root = ReactDOM.createRoot(container, {hydrate: true});
       root.render(<div />);
       Scheduler.unstable_flushAll();
       root.render(null);
@@ -512,8 +512,8 @@ describe('ReactDOMServerHydration', () => {
   it('Suspense + hydration in legacy mode', () => {
     const element = document.createElement('div');
     element.innerHTML = '<div>Hello World</div>';
-    let div = element.firstChild;
-    let ref = React.createRef();
+    const div = element.firstChild;
+    const ref = React.createRef();
     expect(() =>
       ReactDOM.hydrate(
         <React.Suspense fallback={null}>
@@ -536,8 +536,8 @@ describe('ReactDOMServerHydration', () => {
   it('Suspense + hydration in legacy mode with no fallback', () => {
     const element = document.createElement('div');
     element.innerHTML = '<div>Hello World</div>';
-    let div = element.firstChild;
-    let ref = React.createRef();
+    const div = element.firstChild;
+    const ref = React.createRef();
     ReactDOM.hydrate(
       <React.Suspense>
         <div ref={ref}>Hello World</div>

packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js

@@ -186,7 +186,7 @@ function runActTests(label, render, unmount, rerender) {
 
       it('flushes effects on every call', () => {
         function App() {
-          let [ctr, setCtr] = React.useState(0);
+          const [ctr, setCtr] = React.useState(0);
           React.useEffect(() => {
             Scheduler.unstable_yieldValue(ctr);
           });
@@ -222,7 +222,7 @@ function runActTests(label, render, unmount, rerender) {
 
       it("should keep flushing effects until the're done", () => {
         function App() {
-          let [ctr, setCtr] = React.useState(0);
+          const [ctr, setCtr] = React.useState(0);
           React.useEffect(() => {
             if (ctr < 5) {
               setCtr(x => x + 1);
@@ -261,7 +261,7 @@ function runActTests(label, render, unmount, rerender) {
       it('warns if a setState is called outside of act(...)', () => {
         let setValue = null;
         function App() {
-          let [value, _setValue] = React.useState(0);
+          const [value, _setValue] = React.useState(0);
           setValue = _setValue;
           return value;
         }
@@ -286,9 +286,9 @@ function runActTests(label, render, unmount, rerender) {
 
         it('lets a ticker update', () => {
           function App() {
-            let [toggle, setToggle] = React.useState(0);
+            const [toggle, setToggle] = React.useState(0);
             React.useEffect(() => {
-              let timeout = setTimeout(() => {
+              const timeout = setTimeout(() => {
                 setToggle(1);
               }, 200);
               return () => clearTimeout(timeout);
@@ -308,7 +308,7 @@ function runActTests(label, render, unmount, rerender) {
 
         it('can use the async version to catch microtasks', async () => {
           function App() {
-            let [toggle, setToggle] = React.useState(0);
+            const [toggle, setToggle] = React.useState(0);
             React.useEffect(() => {
               // just like the previous test, except we
               // use a promise and schedule the update
@@ -332,7 +332,7 @@ function runActTests(label, render, unmount, rerender) {
           // this component triggers an effect, that waits a tick,
           // then sets state. repeats this 5 times.
           function App() {
-            let [state, setState] = React.useState(0);
+            const [state, setState] = React.useState(0);
             async function ticker() {
               await null;
               setState(x => x + 1);
@@ -353,7 +353,7 @@ function runActTests(label, render, unmount, rerender) {
 
         it('flushes immediate re-renders with act', () => {
           function App() {
-            let [ctr, setCtr] = React.useState(0);
+            const [ctr, setCtr] = React.useState(0);
             React.useEffect(() => {
               if (ctr === 0) {
                 setCtr(1);
@@ -408,7 +408,7 @@ function runActTests(label, render, unmount, rerender) {
     describe('asynchronous tests', () => {
       it('works with timeouts', async () => {
         function App() {
-          let [ctr, setCtr] = React.useState(0);
+          const [ctr, setCtr] = React.useState(0);
           function doSomething() {
             setTimeout(() => {
               setCtr(1);
@@ -432,7 +432,7 @@ function runActTests(label, render, unmount, rerender) {
 
       it('flushes microtasks before exiting', async () => {
         function App() {
-          let [ctr, setCtr] = React.useState(0);
+          const [ctr, setCtr] = React.useState(0);
           async function someAsyncFunction() {
             // queue a bunch of promises to be sure they all flush
             await null;
@@ -486,7 +486,7 @@ function runActTests(label, render, unmount, rerender) {
 
       it('async commits and effects are guaranteed to be flushed', async () => {
         function App() {
-          let [state, setState] = React.useState(0);
+          const [state, setState] = React.useState(0);
           async function something() {
             await null;
             setState(1);
@@ -513,7 +513,7 @@ function runActTests(label, render, unmount, rerender) {
         // this component triggers an effect, that waits a tick,
         // then sets state. repeats this 5 times.
         function App() {
-          let [state, setState] = React.useState(0);
+          const [state, setState] = React.useState(0);
           async function ticker() {
             await null;
             setState(x => x + 1);

packages/react-dom/src/__tests__/ReactTestUtilsActUnmockedScheduler-test.js

@@ -64,7 +64,7 @@ it('can use act to flush effects', () => {
 
 it('flushes effects on every call', () => {
   function App() {
-    let [ctr, setCtr] = React.useState(0);
+    const [ctr, setCtr] = React.useState(0);
     React.useEffect(() => {
       yields.push(ctr);
     });
@@ -102,7 +102,7 @@ it('flushes effects on every call', () => {
 
 it("should keep flushing effects until the're done", () => {
   function App() {
-    let [ctr, setCtr] = React.useState(0);
+    const [ctr, setCtr] = React.useState(0);
     React.useEffect(() => {
       if (ctr < 5) {
         setCtr(x => x + 1);
@@ -142,7 +142,7 @@ it('can handle cascading promises', async () => {
   // this component triggers an effect, that waits a tick,
   // then sets state. repeats this 5 times.
   function App() {
-    let [state, setState] = React.useState(0);
+    const [state, setState] = React.useState(0);
     async function ticker() {
       await null;
       setState(x => x + 1);

packages/react-dom/src/__tests__/ReactTreeTraversal-test.js

@@ -11,7 +11,7 @@
 
 let React;
 let ReactDOM;
-let ReactFeatureFlags = require('shared/ReactFeatureFlags');
+const ReactFeatureFlags = require('shared/ReactFeatureFlags');
 
 const ChildComponent = ({id, eventHandler}) => (
   <div

packages/react-dom/src/__tests__/ReactUpdates-test.js

@@ -526,7 +526,6 @@ describe('ReactUpdates', () => {
 
     const bContainer = document.createElement('div');
 
-    let a;
     let b;
 
     let aUpdated = false;
@@ -560,7 +559,7 @@ describe('ReactUpdates', () => {
       }
     }
 
-    a = ReactTestUtils.renderIntoDocument(<A />);
+    const a = ReactTestUtils.renderIntoDocument(<A />);
     ReactDOM.unstable_batchedUpdates(function() {
       a.setState({x: 1});
       b.setState({x: 1});
@@ -733,11 +732,8 @@ describe('ReactUpdates', () => {
       }
     }
 
-    let x;
-    let y;
-
-    x = ReactTestUtils.renderIntoDocument(<X />);
-    y = ReactTestUtils.renderIntoDocument(<Y />);
+    const x = ReactTestUtils.renderIntoDocument(<X />);
+    const y = ReactTestUtils.renderIntoDocument(<Y />);
     expect(ReactDOM.findDOMNode(x).textContent).toBe('0');
 
     y.forceUpdate();
@@ -1102,7 +1098,7 @@ describe('ReactUpdates', () => {
     'in legacy mode, updates in componentWillUpdate and componentDidUpdate ' +
       'should both flush in the immediately subsequent commit',
     () => {
-      let ops = [];
+      const ops = [];
       class Foo extends React.Component {
         state = {a: false, b: false};
         UNSAFE_componentWillUpdate(_, nextState) {
@@ -1145,7 +1141,7 @@ describe('ReactUpdates', () => {
     'in legacy mode, updates in componentWillUpdate and componentDidUpdate ' +
       '(on a sibling) should both flush in the immediately subsequent commit',
     () => {
-      let ops = [];
+      const ops = [];
       class Foo extends React.Component {
         state = {a: false};
         UNSAFE_componentWillUpdate(_, nextState) {
@@ -1213,7 +1209,7 @@ describe('ReactUpdates', () => {
   );
 
   it('uses correct base state for setState inside render phase', () => {
-    let ops = [];
+    const ops = [];
 
     class Foo extends React.Component {
       state = {step: 0};
@@ -1236,7 +1232,7 @@ describe('ReactUpdates', () => {
   });
 
   it('does not re-render if state update is null', () => {
-    let container = document.createElement('div');
+    const container = document.createElement('div');
 
     let instance;
     let ops = [];
@@ -1626,7 +1622,7 @@ describe('ReactUpdates', () => {
 
       let error = null;
       let stack = null;
-      let originalConsoleError = console.error;
+      const originalConsoleError = console.error;
       console.error = (e, s) => {
         error = e;
         stack = s;

packages/react-dom/src/__tests__/utils/ReactDOMServerIntegrationTestUtils.js

@@ -145,7 +145,7 @@ module.exports = function(initModules) {
     return await expectErrors(
       () =>
         new Promise(resolve => {
-          let writable = new DrainWritable();
+          const writable = new DrainWritable();
           ReactDOMServer.renderToNodeStream(reactElement).pipe(writable);
           writable.on('finish', () => resolve(writable.buffer));
         }),
@@ -174,7 +174,7 @@ module.exports = function(initModules) {
     const markup = await renderIntoString(element, errorCount);
     resetModules();
 
-    let container = getContainerFromMarkup(element, markup);
+    const container = getContainerFromMarkup(element, markup);
     let serverNode = container.firstChild;
 
     const firstClientNode = await renderIntoDom(
@@ -205,7 +205,7 @@ module.exports = function(initModules) {
   const clientRenderOnBadMarkup = async (element, errorCount = 0) => {
     // First we render the top of bad mark up.
 
-    let container = getContainerFromMarkup(
+    const container = getContainerFromMarkup(
       element,
       shouldUseDocument(element)
         ? '<html><body><div id="badIdWhichWillCauseMismatch" /></body></html>'

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

@@ -114,7 +114,7 @@ export function getClosestInstanceFromNode(targetNode: Node): null | Fiber {
           // have had an internalInstanceKey on it.
           // Let's get the fiber associated with the SuspenseComponent
           // as the deepest instance.
-          let targetSuspenseInst = suspenseInstance[internalInstanceKey];
+          const targetSuspenseInst = suspenseInstance[internalInstanceKey];
           if (targetSuspenseInst) {
             return targetSuspenseInst;
           }

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

@@ -191,7 +191,7 @@ export function getRootHostContext(
     case DOCUMENT_NODE:
     case DOCUMENT_FRAGMENT_NODE: {
       type = nodeType === DOCUMENT_NODE ? '#document' : '#fragment';
-      let root = (rootContainerInstance: any).documentElement;
+      const root = (rootContainerInstance: any).documentElement;
       namespace = root ? root.namespaceURI : getChildNamespace(null, '');
       break;
     }
@@ -620,10 +620,10 @@ export function clearSuspenseBoundary(
   // deep we are and only break out when we're back on top.
   let depth = 0;
   do {
-    let nextNode = node.nextSibling;
+    const nextNode = node.nextSibling;
     parentInstance.removeChild(node);
     if (nextNode && nextNode.nodeType === COMMENT_NODE) {
-      let data = ((nextNode: any).data: string);
+      const data = ((nextNode: any).data: string);
       if (data === SUSPENSE_END_DATA) {
         if (depth === 0) {
           parentInstance.removeChild(nextNode);
@@ -867,7 +867,7 @@ export function getNextHydratableInstanceAfterSuspenseInstance(
   let depth = 0;
   while (node) {
     if (node.nodeType === COMMENT_NODE) {
-      let data = ((node: any).data: string);
+      const data = ((node: any).data: string);
       if (data === SUSPENSE_END_DATA) {
         if (depth === 0) {
           return getNextHydratableSibling((node: any));
@@ -901,7 +901,7 @@ export function getParentSuspenseInstance(
   let depth = 0;
   while (node) {
     if (node.nodeType === COMMENT_NODE) {
-      let data = ((node: any).data: string);
+      const data = ((node: any).data: string);
       if (
         data === SUSPENSE_START_DATA ||
         data === SUSPENSE_FALLBACK_START_DATA ||

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

@@ -225,7 +225,7 @@ export function findDOMNode(
   componentOrElement: Element | ?React$Component<any, any>,
 ): null | Element | Text {
   if (__DEV__) {
-    let owner = (ReactCurrentOwner.current: any);
+    const owner = (ReactCurrentOwner.current: any);
     if (owner !== null && owner.stateNode !== null) {
       const warnedAboutRefsInRender = owner.stateNode._warnedAboutRefsInRender;
       if (!warnedAboutRefsInRender) {

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

@@ -78,8 +78,8 @@ function updateOptions(
   const options: IndexableHTMLOptionsCollection = node.options;
 
   if (multiple) {
-    let selectedValues = (propValue: Array<string>);
-    let selectedValue = {};
+    const selectedValues = (propValue: Array<string>);
+    const selectedValue = {};
     for (let i = 0; i < selectedValues.length; i++) {
       // Prefix to avoid chaos with special keys.
       selectedValue['$' + selectedValues[i]] = true;
@@ -96,7 +96,7 @@ function updateOptions(
   } else {
     // Do not set `select.value` as exact behavior isn't consistent across all
     // browsers for all cases.
-    let selectedValue = toString(getToStringValue((propValue: any)));
+    const selectedValue = toString(getToStringValue((propValue: any)));
     let defaultSelected = null;
     for (let i = 0; i < options.length; i++) {
       if (options[i].value === selectedValue) {

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

@@ -169,7 +169,7 @@ export function setOffsets(node, offsets) {
   // IE 11 uses modern selection, but doesn't support the extend method.
   // Flip backward selections, so we can set with a single range.
   if (!selection.extend && start > end) {
-    let temp = end;
+    const temp = end;
     end = start;
     start = temp;
   }

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

@@ -181,7 +181,8 @@ export function getSelection(input) {
  * -@offsets   Object of same form that is returned from get*
  */
 export function setSelection(input, offsets) {
-  let {start, end} = offsets;
+  const start = offsets.start;
+  let end = offsets.end;
   if (end === undefined) {
     end = start;
   }

packages/react-dom/src/client/__tests__/trustedTypes-test.internal.js

@@ -54,7 +54,7 @@ describe('when Trusted Types are available in global object', () => {
   });
 
   it('should not stringify trusted values for dangerouslySetInnerHTML', () => {
-    let innerHTMLDescriptor = Object.getOwnPropertyDescriptor(
+    const innerHTMLDescriptor = Object.getOwnPropertyDescriptor(
       Element.prototype,
       'innerHTML',
     );
@@ -97,7 +97,7 @@ describe('when Trusted Types are available in global object', () => {
   });
 
   it('should not stringify trusted values for setAttribute (unknown attribute)', () => {
-    let setAttribute = Element.prototype.setAttribute;
+    const setAttribute = Element.prototype.setAttribute;
     try {
       const setAttributeCalls = [];
       Element.prototype.setAttribute = function(name, value) {
@@ -125,7 +125,7 @@ describe('when Trusted Types are available in global object', () => {
   });
 
   it('should not stringify trusted values for setAttribute (known attribute)', () => {
-    let setAttribute = Element.prototype.setAttribute;
+    const setAttribute = Element.prototype.setAttribute;
     try {
       const setAttributeCalls = [];
       Element.prototype.setAttribute = function(name, value) {
@@ -153,7 +153,7 @@ describe('when Trusted Types are available in global object', () => {
   });
 
   it('should not stringify trusted values for setAttributeNS', () => {
-    let setAttributeNS = Element.prototype.setAttributeNS;
+    const setAttributeNS = Element.prototype.setAttributeNS;
     try {
       const setAttributeNSCalls = [];
       Element.prototype.setAttributeNS = function(ns, name, value) {

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

@@ -18,9 +18,9 @@ import {TEXT_NODE} from '../shared/HTMLNodeType';
  * @param {string} text
  * @internal
  */
-let setTextContent = function(node: Element, text: string): void {
+const setTextContent = function(node: Element, text: string): void {
   if (text) {
-    let firstChild = node.firstChild;
+    const firstChild = node.firstChild;
 
     if (
       firstChild &&

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

@@ -159,8 +159,8 @@ if (__DEV__) {
   };
 
   updatedAncestorInfo = function(oldInfo, tag) {
-    let ancestorInfo = {...(oldInfo || emptyAncestorInfo)};
-    let info = {tag};
+    const ancestorInfo = {...(oldInfo || emptyAncestorInfo)};
+    const info = {tag};
 
     if (inScopeTags.indexOf(tag) !== -1) {
       ancestorInfo.aTagInScope = null;

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

@@ -234,7 +234,7 @@ function getTargetInstForInputOrChangeEvent(topLevelType, targetInst) {
 }
 
 function handleControlledInputBlur(node) {
-  let state = node._wrapperState;
+  const state = node._wrapperState;
 
   if (
     !state ||

packages/react-dom/src/events/DOMModernPluginEventSystem.js

@@ -452,7 +452,7 @@ function getNearestRootOrPortalContainer(instance: Element): Element {
 }
 
 function addEventTypeToDispatchConfig(type: DOMTopLevelEventType): void {
-  let dispatchConfig = topLevelEventsToDispatchConfig.get(type);
+  const dispatchConfig = topLevelEventsToDispatchConfig.get(type);
   // If we don't have a dispatchConfig, then we're dealing with
   // an event type that React does not know about (i.e. a custom event).
   // We need to register an event config for this or the SimpleEventPlugin

packages/react-dom/src/events/DeprecatedDOMEventResponderSystem.js

@@ -175,10 +175,10 @@ const eventResponderContext: ReactDOMResponderContext = {
     validateResponderContext();
     for (let i = 0; i < rootEventTypes.length; i++) {
       const rootEventType = rootEventTypes[i];
-      let rootEventResponders = rootEventTypesToEventResponderInstances.get(
+      const rootEventResponders = rootEventTypesToEventResponderInstances.get(
         rootEventType,
       );
-      let rootEventTypesSet = ((currentInstance: any): ReactDOMEventResponderInstance)
+      const rootEventTypesSet = ((currentInstance: any): ReactDOMEventResponderInstance)
         .rootEventTypes;
       if (rootEventTypesSet !== null) {
         rootEventTypesSet.delete(rootEventType);
@@ -462,7 +462,7 @@ export function unmountEventResponder(
   const responder = ((responderInstance.responder: any): ReactDOMEventResponder);
   const onUnmount = responder.onUnmount;
   if (onUnmount !== null) {
-    let {props, state} = responderInstance;
+    const {props, state} = responderInstance;
     const previousInstance = currentInstance;
     currentInstance = responderInstance;
     try {
@@ -477,7 +477,7 @@ export function unmountEventResponder(
 
     for (let i = 0; i < rootEventTypes.length; i++) {
       const topLevelEventType = rootEventTypes[i];
-      let rootEventResponderInstances = rootEventTypesToEventResponderInstances.get(
+      const rootEventResponderInstances = rootEventTypesToEventResponderInstances.get(
         topLevelEventType,
       );
       if (rootEventResponderInstances !== undefined) {

packages/react-dom/src/events/ReactDOMEventListener.js

@@ -424,14 +424,14 @@ export function attemptToDispatchEvent(
   let targetInst = getClosestInstanceFromNode(nativeEventTarget);
 
   if (targetInst !== null) {
-    let nearestMounted = getNearestMountedFiber(targetInst);
+    const nearestMounted = getNearestMountedFiber(targetInst);
     if (nearestMounted === null) {
       // This tree has been unmounted already. Dispatch without a target.
       targetInst = null;
     } else {
       const tag = nearestMounted.tag;
       if (tag === SuspenseComponent) {
-        let instance = getSuspenseInstanceFromFiber(nearestMounted);
+        const instance = getSuspenseInstanceFromFiber(nearestMounted);
         if (instance !== null) {
           // Queue the event to be replayed later. Abort dispatching since we
           // don't want this event dispatched twice through the event system.

packages/react-dom/src/events/ReactDOMEventReplaying.js

@@ -133,18 +133,18 @@ type QueuedReplayableEvent = {|
 let hasScheduledReplayAttempt = false;
 
 // The queue of discrete events to be replayed.
-let queuedDiscreteEvents: Array<QueuedReplayableEvent> = [];
+const queuedDiscreteEvents: Array<QueuedReplayableEvent> = [];
 
 // Indicates if any continuous event targets are non-null for early bailout.
-let hasAnyQueuedContinuousEvents: boolean = false;
+const hasAnyQueuedContinuousEvents: boolean = false;
 // The last of each continuous event type. We only need to replay the last one
 // if the last target was dehydrated.
 let queuedFocus: null | QueuedReplayableEvent = null;
 let queuedDrag: null | QueuedReplayableEvent = null;
 let queuedMouse: null | QueuedReplayableEvent = null;
 // For pointer events there can be one latest event per pointerId.
-let queuedPointers: Map<number, QueuedReplayableEvent> = new Map();
-let queuedPointerCaptures: Map<number, QueuedReplayableEvent> = new Map();
+const queuedPointers: Map<number, QueuedReplayableEvent> = new Map();
+const queuedPointerCaptures: Map<number, QueuedReplayableEvent> = new Map();
 // We could consider replaying selectionchange and touchmoves too.
 
 type QueuedHydrationTarget = {|
@@ -152,7 +152,7 @@ type QueuedHydrationTarget = {|
   target: Node,
   priority: number,
 |};
-let queuedExplicitHydrationTargets: Array<QueuedHydrationTarget> = [];
+const queuedExplicitHydrationTargets: Array<QueuedHydrationTarget> = [];
 
 export function hasQueuedDiscreteEvents(): boolean {
   return queuedDiscreteEvents.length > 0;
@@ -318,7 +318,7 @@ export function queueDiscreteEvent(
       // If this was the first discrete event, we might be able to
       // synchronously unblock it so that preventDefault still works.
       while (queuedEvent.blockedOn !== null) {
-        let fiber = getInstanceFromNode(queuedEvent.blockedOn);
+        const fiber = getInstanceFromNode(queuedEvent.blockedOn);
         if (fiber === null) {
           break;
         }
@@ -359,13 +359,13 @@ export function clearIfContinuousEvent(
       break;
     case TOP_POINTER_OVER:
     case TOP_POINTER_OUT: {
-      let pointerId = ((nativeEvent: any): PointerEvent).pointerId;
+      const pointerId = ((nativeEvent: any): PointerEvent).pointerId;
       queuedPointers.delete(pointerId);
       break;
     }
     case TOP_GOT_POINTER_CAPTURE:
     case TOP_LOST_POINTER_CAPTURE: {
-      let pointerId = ((nativeEvent: any): PointerEvent).pointerId;
+      const pointerId = ((nativeEvent: any): PointerEvent).pointerId;
       queuedPointerCaptures.delete(pointerId);
       break;
     }
@@ -384,7 +384,7 @@ function accumulateOrCreateContinuousQueuedReplayableEvent(
     existingQueuedEvent === null ||
     existingQueuedEvent.nativeEvent !== nativeEvent
   ) {
-    let queuedEvent = createQueuedReplayableEvent(
+    const queuedEvent = createQueuedReplayableEvent(
       blockedOn,
       topLevelType,
       eventSystemFlags,
@@ -392,7 +392,7 @@ function accumulateOrCreateContinuousQueuedReplayableEvent(
       nativeEvent,
     );
     if (blockedOn !== null) {
-      let fiber = getInstanceFromNode(blockedOn);
+      const fiber = getInstanceFromNode(blockedOn);
       if (fiber !== null) {
         // Attempt to increase the priority of this target.
         attemptContinuousHydration(fiber);
@@ -505,13 +505,13 @@ function attemptExplicitHydrationTarget(
   // TODO: This function shares a lot of logic with attemptToDispatchEvent.
   // Try to unify them. It's a bit tricky since it would require two return
   // values.
-  let targetInst = getClosestInstanceFromNode(queuedTarget.target);
+  const targetInst = getClosestInstanceFromNode(queuedTarget.target);
   if (targetInst !== null) {
-    let nearestMounted = getNearestMountedFiber(targetInst);
+    const nearestMounted = getNearestMountedFiber(targetInst);
     if (nearestMounted !== null) {
       const tag = nearestMounted.tag;
       if (tag === SuspenseComponent) {
-        let instance = getSuspenseInstanceFromFiber(nearestMounted);
+        const instance = getSuspenseInstanceFromFiber(nearestMounted);
         if (instance !== null) {
           // We're blocked on hydrating this boundary.
           // Increase its priority.
@@ -537,7 +537,7 @@ function attemptExplicitHydrationTarget(
 
 export function queueExplicitHydrationTarget(target: Node): void {
   if (enableSelectiveHydration) {
-    let priority = getCurrentPriorityLevel();
+    const priority = getCurrentPriorityLevel();
     const queuedTarget: QueuedHydrationTarget = {
       blockedOn: null,
       target: target,
@@ -562,10 +562,10 @@ function attemptReplayContinuousQueuedEvent(
   if (queuedEvent.blockedOn !== null) {
     return false;
   }
-  let targetContainers = queuedEvent.targetContainers;
+  const targetContainers = queuedEvent.targetContainers;
   while (targetContainers.length > 0) {
-    let targetContainer = targetContainers[0];
-    let nextBlockedOn = attemptToDispatchEvent(
+    const targetContainer = targetContainers[0];
+    const nextBlockedOn = attemptToDispatchEvent(
       queuedEvent.topLevelType,
       queuedEvent.eventSystemFlags,
       targetContainer,
@@ -573,7 +573,7 @@ function attemptReplayContinuousQueuedEvent(
     );
     if (nextBlockedOn !== null) {
       // We're still blocked. Try again later.
-      let fiber = getInstanceFromNode(nextBlockedOn);
+      const fiber = getInstanceFromNode(nextBlockedOn);
       if (fiber !== null) {
         attemptContinuousHydration(fiber);
       }
@@ -600,21 +600,21 @@ function replayUnblockedEvents() {
   hasScheduledReplayAttempt = false;
   // First replay discrete events.
   while (queuedDiscreteEvents.length > 0) {
-    let nextDiscreteEvent = queuedDiscreteEvents[0];
+    const nextDiscreteEvent = queuedDiscreteEvents[0];
     if (nextDiscreteEvent.blockedOn !== null) {
       // We're still blocked.
       // Increase the priority of this boundary to unblock
       // the next discrete event.
-      let fiber = getInstanceFromNode(nextDiscreteEvent.blockedOn);
+      const fiber = getInstanceFromNode(nextDiscreteEvent.blockedOn);
       if (fiber !== null) {
         attemptUserBlockingHydration(fiber);
       }
       break;
     }
-    let targetContainers = nextDiscreteEvent.targetContainers;
+    const targetContainers = nextDiscreteEvent.targetContainers;
     while (targetContainers.length > 0) {
-      let targetContainer = targetContainers[0];
-      let nextBlockedOn = attemptToDispatchEvent(
+      const targetContainer = targetContainers[0];
+      const nextBlockedOn = attemptToDispatchEvent(
         nextDiscreteEvent.topLevelType,
         nextDiscreteEvent.eventSystemFlags,
         targetContainer,
@@ -674,7 +674,7 @@ export function retryIfBlockedOn(
     // worth it because we expect very few discrete events to queue up and once
     // we are actually fully unblocked it will be fast to replay them.
     for (let i = 1; i < queuedDiscreteEvents.length; i++) {
-      let queuedEvent = queuedDiscreteEvents[i];
+      const queuedEvent = queuedDiscreteEvents[i];
       if (queuedEvent.blockedOn === unblocked) {
         queuedEvent.blockedOn = null;
       }
@@ -696,14 +696,14 @@ export function retryIfBlockedOn(
   queuedPointerCaptures.forEach(unblock);
 
   for (let i = 0; i < queuedExplicitHydrationTargets.length; i++) {
-    let queuedTarget = queuedExplicitHydrationTargets[i];
+    const queuedTarget = queuedExplicitHydrationTargets[i];
     if (queuedTarget.blockedOn === unblocked) {
       queuedTarget.blockedOn = null;
     }
   }
 
   while (queuedExplicitHydrationTargets.length > 0) {
-    let nextExplicitTarget = queuedExplicitHydrationTargets[0];
+    const nextExplicitTarget = queuedExplicitHydrationTargets[0];
     if (nextExplicitTarget.blockedOn !== null) {
       // We're still blocked.
       break;

packages/react-dom/src/events/__tests__/DOMModernPluginEventSystem-test.internal.js

@@ -28,7 +28,7 @@ function dispatchClickEvent(element) {
   dispatchEvent(element, 'click');
 }
 
-let eventListenersToClear = [];
+const eventListenersToClear = [];
 
 function startNativeEventListenerClearDown() {
   const nativeWindowEventListener = window.addEventListener;
@@ -106,7 +106,7 @@ describe('DOMModernPluginEventSystem', () => {
 
           ReactDOM.render(<Test />, container);
 
-          let buttonElement = buttonRef.current;
+          const buttonElement = buttonRef.current;
           dispatchClickEvent(buttonElement);
 
           expect(onClick).toHaveBeenCalledTimes(1);
@@ -114,7 +114,7 @@ describe('DOMModernPluginEventSystem', () => {
           expect(log[0]).toEqual(['capture', buttonElement]);
           expect(log[1]).toEqual(['bubble', buttonElement]);
 
-          let divElement = divRef.current;
+          const divElement = divRef.current;
           dispatchClickEvent(divElement);
           expect(onClick).toHaveBeenCalledTimes(3);
           expect(onClickCapture).toHaveBeenCalledTimes(3);
@@ -159,14 +159,14 @@ describe('DOMModernPluginEventSystem', () => {
           ReactDOM.render(<Parent />, container);
           ReactDOM.render(<Child />, childRef.current);
 
-          let buttonElement = buttonRef.current;
+          const buttonElement = buttonRef.current;
           dispatchClickEvent(buttonElement);
           expect(onClick).toHaveBeenCalledTimes(1);
           expect(onClickCapture).toHaveBeenCalledTimes(1);
           expect(log[0]).toEqual(['capture', buttonElement]);
           expect(log[1]).toEqual(['bubble', buttonElement]);
 
-          let divElement = divRef.current;
+          const divElement = divRef.current;
           dispatchClickEvent(divElement);
           expect(onClick).toHaveBeenCalledTimes(3);
           expect(onClickCapture).toHaveBeenCalledTimes(3);
@@ -211,14 +211,14 @@ describe('DOMModernPluginEventSystem', () => {
           buttonRef.current.appendChild(disjointedNode);
           ReactDOM.render(<Child />, disjointedNode);
 
-          let buttonElement = buttonRef.current;
+          const buttonElement = buttonRef.current;
           dispatchClickEvent(buttonElement);
           expect(onClick).toHaveBeenCalledTimes(1);
           expect(onClickCapture).toHaveBeenCalledTimes(1);
           expect(log[0]).toEqual(['capture', buttonElement]);
           expect(log[1]).toEqual(['bubble', buttonElement]);
 
-          let divElement = divRef.current;
+          const divElement = divRef.current;
           dispatchClickEvent(divElement);
           expect(onClick).toHaveBeenCalledTimes(3);
           expect(onClickCapture).toHaveBeenCalledTimes(3);
@@ -266,14 +266,14 @@ describe('DOMModernPluginEventSystem', () => {
           buttonRef.current.appendChild(disjointedNode);
           ReactDOM.render(<Child />, disjointedNode);
 
-          let buttonElement = buttonRef.current;
+          const buttonElement = buttonRef.current;
           dispatchClickEvent(buttonElement);
           expect(onClick).toHaveBeenCalledTimes(1);
           expect(onClickCapture).toHaveBeenCalledTimes(1);
           expect(log[0]).toEqual(['capture', buttonElement]);
           expect(log[1]).toEqual(['bubble', buttonElement]);
 
-          let divElement = divRef.current;
+          const divElement = divRef.current;
           dispatchClickEvent(divElement);
           expect(onClick).toHaveBeenCalledTimes(3);
           expect(onClickCapture).toHaveBeenCalledTimes(3);
@@ -323,14 +323,14 @@ describe('DOMModernPluginEventSystem', () => {
           spanRef.current.appendChild(disjointedNode);
           ReactDOM.render(<Child />, disjointedNode);
 
-          let buttonElement = buttonRef.current;
+          const buttonElement = buttonRef.current;
           dispatchClickEvent(buttonElement);
           expect(onClick).toHaveBeenCalledTimes(1);
           expect(onClickCapture).toHaveBeenCalledTimes(1);
           expect(log[0]).toEqual(['capture', buttonElement]);
           expect(log[1]).toEqual(['bubble', buttonElement]);
 
-          let divElement = divRef.current;
+          const divElement = divRef.current;
           dispatchClickEvent(divElement);
           expect(onClick).toHaveBeenCalledTimes(3);
           expect(onClickCapture).toHaveBeenCalledTimes(3);
@@ -376,14 +376,14 @@ describe('DOMModernPluginEventSystem', () => {
 
           ReactDOM.render(<Parent />, container);
 
-          let buttonElement = buttonRef.current;
+          const buttonElement = buttonRef.current;
           dispatchClickEvent(buttonElement);
           expect(onClick).toHaveBeenCalledTimes(1);
           expect(onClickCapture).toHaveBeenCalledTimes(1);
           expect(log[0]).toEqual(['capture', buttonElement]);
           expect(log[1]).toEqual(['bubble', buttonElement]);
 
-          let divElement = divRef.current;
+          const divElement = divRef.current;
           dispatchClickEvent(divElement);
           expect(onClick).toHaveBeenCalledTimes(3);
           expect(onClickCapture).toHaveBeenCalledTimes(3);
@@ -437,12 +437,12 @@ describe('DOMModernPluginEventSystem', () => {
           async () => {
             let suspend = false;
             let resolve;
-            let promise = new Promise(
+            const promise = new Promise(
               resolvePromise => (resolve = resolvePromise),
             );
 
             let clicks = 0;
-            let childSlotRef = React.createRef();
+            const childSlotRef = React.createRef();
 
             function Parent() {
               return <div onClick={() => clicks++} ref={childSlotRef} />;
@@ -466,17 +466,17 @@ describe('DOMModernPluginEventSystem', () => {
             }
 
             suspend = false;
-            let finalHTML = ReactDOMServer.renderToString(<App />);
+            const finalHTML = ReactDOMServer.renderToString(<App />);
 
-            let parentContainer = document.createElement('div');
-            let childContainer = document.createElement('div');
+            const parentContainer = document.createElement('div');
+            const childContainer = document.createElement('div');
 
             // We need this to be in the document since we'll dispatch events on it.
             document.body.appendChild(parentContainer);
 
             // We're going to use a different root as a parent.
             // This lets us detect whether an event goes through React's event system.
-            let parentRoot = ReactDOM.createRoot(parentContainer);
+            const parentRoot = ReactDOM.createRoot(parentContainer);
             parentRoot.render(<Parent />);
             Scheduler.unstable_flushAll();
 
@@ -484,12 +484,12 @@ describe('DOMModernPluginEventSystem', () => {
 
             childContainer.innerHTML = finalHTML;
 
-            let a = childContainer.getElementsByTagName('a')[0];
+            const a = childContainer.getElementsByTagName('a')[0];
 
             suspend = true;
 
             // Hydrate asynchronously.
-            let root = ReactDOM.createRoot(childContainer, {hydrate: true});
+            const root = ReactDOM.createRoot(childContainer, {hydrate: true});
             root.render(<App />);
             jest.runAllTimers();
             Scheduler.unstable_flushAll();
@@ -641,14 +641,14 @@ describe('DOMModernPluginEventSystem', () => {
 
           ReactDOM.render(<Parent />, container);
 
-          let buttonElement = buttonRef.current;
+          const buttonElement = buttonRef.current;
           dispatchClickEvent(buttonElement);
           expect(onClick).toHaveBeenCalledTimes(1);
           expect(onClickCapture).toHaveBeenCalledTimes(1);
           expect(log[0]).toEqual(['capture', buttonElement]);
           expect(log[1]).toEqual(['bubble', buttonElement]);
 
-          let divElement = divRef.current;
+          const divElement = divRef.current;
           dispatchClickEvent(divElement);
           expect(onClick).toHaveBeenCalledTimes(1);
           expect(onClickCapture).toHaveBeenCalledTimes(1);
@@ -684,14 +684,14 @@ describe('DOMModernPluginEventSystem', () => {
 
           ReactDOM.render(<Test />, container);
 
-          let buttonElement = buttonRef.current;
+          const buttonElement = buttonRef.current;
           buttonElement.focus();
           expect(onFocus).toHaveBeenCalledTimes(1);
           expect(onFocusCapture).toHaveBeenCalledTimes(1);
           expect(log[0]).toEqual(['capture', buttonElement]);
           expect(log[1]).toEqual(['bubble', buttonElement]);
 
-          let divElement = divRef.current;
+          const divElement = divRef.current;
           divElement.focus();
           expect(onFocus).toHaveBeenCalledTimes(3);
           expect(onFocusCapture).toHaveBeenCalledTimes(3);
@@ -737,14 +737,14 @@ describe('DOMModernPluginEventSystem', () => {
           ReactDOM.render(<Parent />, container);
           ReactDOM.render(<Child />, childRef.current);
 
-          let buttonElement = buttonRef.current;
+          const buttonElement = buttonRef.current;
           buttonElement.focus();
           expect(onFocus).toHaveBeenCalledTimes(1);
           expect(onFocusCapture).toHaveBeenCalledTimes(1);
           expect(log[0]).toEqual(['capture', buttonElement]);
           expect(log[1]).toEqual(['bubble', buttonElement]);
 
-          let divElement = divRef.current;
+          const divElement = divRef.current;
           divElement.focus();
           expect(onFocus).toHaveBeenCalledTimes(3);
           expect(onFocusCapture).toHaveBeenCalledTimes(3);
@@ -791,14 +791,14 @@ describe('DOMModernPluginEventSystem', () => {
 
           ReactDOM.render(<Parent />, container);
 
-          let buttonElement = buttonRef.current;
+          const buttonElement = buttonRef.current;
           buttonElement.focus();
           expect(onFocus).toHaveBeenCalledTimes(1);
           expect(onFocusCapture).toHaveBeenCalledTimes(1);
           expect(log[0]).toEqual(['capture', buttonElement]);
           expect(log[1]).toEqual(['bubble', buttonElement]);
 
-          let divElement = divRef.current;
+          const divElement = divRef.current;
           divElement.focus();
           expect(onFocus).toHaveBeenCalledTimes(3);
           expect(onFocusCapture).toHaveBeenCalledTimes(3);
@@ -858,14 +858,14 @@ describe('DOMModernPluginEventSystem', () => {
 
           ReactDOM.render(<Parent />, container);
 
-          let buttonElement = buttonRef.current;
+          const buttonElement = buttonRef.current;
           buttonElement.focus();
           expect(onFocus).toHaveBeenCalledTimes(1);
           expect(onFocusCapture).toHaveBeenCalledTimes(1);
           expect(log[0]).toEqual(['capture', buttonElement]);
           expect(log[1]).toEqual(['bubble', buttonElement]);
 
-          let divElement = divRef.current;
+          const divElement = divRef.current;
           divElement.focus();
           expect(onFocus).toHaveBeenCalledTimes(1);
           expect(onFocusCapture).toHaveBeenCalledTimes(1);
@@ -906,7 +906,7 @@ describe('DOMModernPluginEventSystem', () => {
 
           ReactDOM.render(<Parent />, container);
 
-          let buttonElement = buttonRef.current;
+          const buttonElement = buttonRef.current;
           buttonElement.dispatchEvent(
             new MouseEvent('mouseover', {
               bubbles: true,
@@ -918,7 +918,7 @@ describe('DOMModernPluginEventSystem', () => {
           expect(onMouseLeave).toHaveBeenCalledTimes(0);
           expect(log[0]).toEqual(buttonElement);
 
-          let divElement = divRef.current;
+          const divElement = divRef.current;
           buttonElement.dispatchEvent(
             new MouseEvent('mouseout', {
               bubbles: true,
@@ -977,7 +977,7 @@ describe('DOMModernPluginEventSystem', () => {
 
           ReactDOM.render(<Parent />, container);
 
-          let buttonElement = buttonRef.current;
+          const buttonElement = buttonRef.current;
           buttonElement.dispatchEvent(
             new MouseEvent('mouseover', {
               bubbles: true,
@@ -989,7 +989,7 @@ describe('DOMModernPluginEventSystem', () => {
           expect(onMouseLeave).toHaveBeenCalledTimes(0);
           expect(log[0]).toEqual(buttonElement);
 
-          let divElement = divRef.current;
+          const divElement = divRef.current;
           buttonElement.dispatchEvent(
             new MouseEvent('mouseout', {
               bubbles: true,
@@ -1042,7 +1042,7 @@ describe('DOMModernPluginEventSystem', () => {
           );
 
           function Root() {
-            let portalTargetRef = React.useRef(null);
+            const portalTargetRef = React.useRef(null);
             React.useLayoutEffect(() => {
               portalTargetRef.current.appendChild(portalContainer);
             });
@@ -1056,7 +1056,7 @@ describe('DOMModernPluginEventSystem', () => {
 
           ReactDOM.render(<Root />, container);
 
-          let divElement = targetRef.current;
+          const divElement = targetRef.current;
           dispatchClickEvent(divElement);
           expect(log).toEqual([
             'capture root',
@@ -1105,7 +1105,7 @@ describe('DOMModernPluginEventSystem', () => {
           }
 
           it('should create the same event listener map', () => {
-            let listenerMaps = [];
+            const listenerMaps = [];
 
             function Test() {
               const listenerMap = ReactDOM.unstable_useEvent('click');
@@ -1231,7 +1231,7 @@ describe('DOMModernPluginEventSystem', () => {
             log = [];
 
             // Clicking the button should also work
-            let buttonElement = buttonRef.current;
+            const buttonElement = buttonRef.current;
             dispatchClickEvent(buttonElement);
             expect(log).toEqual([
               {
@@ -1334,7 +1334,7 @@ describe('DOMModernPluginEventSystem', () => {
             ReactDOM.render(<Test />, container);
             Scheduler.unstable_flushAll();
 
-            let textNode = buttonRef.current.firstChild;
+            const textNode = buttonRef.current.firstChild;
             dispatchClickEvent(textNode);
             expect(clickEvent).toBeCalledTimes(1);
           });
@@ -1371,7 +1371,7 @@ describe('DOMModernPluginEventSystem', () => {
             ReactDOM.render(<Test />, container);
             Scheduler.unstable_flushAll();
 
-            let buttonElement = buttonRef.current;
+            const buttonElement = buttonRef.current;
             dispatchClickEvent(buttonElement);
             expect(onClick).toHaveBeenCalledTimes(1);
             expect(onClickCapture).toHaveBeenCalledTimes(1);
@@ -1382,7 +1382,7 @@ describe('DOMModernPluginEventSystem', () => {
             onClick.mockClear();
             onClickCapture.mockClear();
 
-            let divElement = divRef.current;
+            const divElement = divRef.current;
             dispatchClickEvent(divElement);
             expect(onClick).toHaveBeenCalledTimes(2);
             expect(onClickCapture).toHaveBeenCalledTimes(2);
@@ -1427,14 +1427,14 @@ describe('DOMModernPluginEventSystem', () => {
             ReactDOM.render(<Test />, container);
             Scheduler.unstable_flushAll();
 
-            let buttonElement = buttonRef.current;
+            const buttonElement = buttonRef.current;
             dispatchClickEvent(buttonElement);
             expect(onClick).toHaveBeenCalledTimes(1);
             expect(onClickCapture).toHaveBeenCalledTimes(1);
             expect(log[0]).toEqual(['capture', buttonElement]);
             expect(log[1]).toEqual(['bubble', buttonElement]);
 
-            let divElement = divRef.current;
+            const divElement = divRef.current;
             dispatchClickEvent(divElement);
             expect(onClick).toHaveBeenCalledTimes(3);
             expect(onClickCapture).toHaveBeenCalledTimes(3);
@@ -1504,7 +1504,7 @@ describe('DOMModernPluginEventSystem', () => {
             expect(clickEvent).toBeCalledTimes(2);
 
             // Clicking the button should not work
-            let buttonElement = buttonRef.current;
+            const buttonElement = buttonRef.current;
             dispatchClickEvent(buttonElement);
             expect(clickEvent).toBeCalledTimes(2);
           });
@@ -1577,7 +1577,7 @@ describe('DOMModernPluginEventSystem', () => {
           it('should correctly handle stopPropagation corrrectly for target events', () => {
             const buttonRef = React.createRef();
             const divRef = React.createRef();
-            let clickEvent = jest.fn();
+            const clickEvent = jest.fn();
 
             function Test() {
               const click1 = ReactDOM.unstable_useEvent('click', {
@@ -1602,7 +1602,7 @@ describe('DOMModernPluginEventSystem', () => {
             ReactDOM.render(<Test />, container);
             Scheduler.unstable_flushAll();
 
-            let divElement = divRef.current;
+            const divElement = divRef.current;
             dispatchClickEvent(divElement);
             expect(clickEvent).toHaveBeenCalledTimes(0);
           });
@@ -1633,7 +1633,7 @@ describe('DOMModernPluginEventSystem', () => {
             ReactDOM.render(<Test />, container);
             Scheduler.unstable_flushAll();
 
-            let buttonElement = buttonRef.current;
+            const buttonElement = buttonRef.current;
             dispatchClickEvent(buttonElement);
             expect(targetListerner1).toHaveBeenCalledTimes(1);
             expect(targetListerner2).toHaveBeenCalledTimes(1);
@@ -1671,7 +1671,7 @@ describe('DOMModernPluginEventSystem', () => {
             ReactDOM.render(<Test />, container);
             Scheduler.unstable_flushAll();
 
-            let buttonElement = buttonRef.current;
+            const buttonElement = buttonRef.current;
             dispatchClickEvent(buttonElement);
             expect(targetListerner1).toHaveBeenCalledTimes(1);
             expect(targetListerner2).toHaveBeenCalledTimes(1);
@@ -1698,7 +1698,7 @@ describe('DOMModernPluginEventSystem', () => {
                 return <button ref={ref}>Press me</button>;
               }
 
-              let root = ReactDOM.createRoot(container);
+              const root = ReactDOM.createRoot(container);
               root.render(<Test counter={0} />);
 
               // Dev double-render
@@ -1926,7 +1926,7 @@ describe('DOMModernPluginEventSystem', () => {
             ReactDOM.render(<Test />, container);
             Scheduler.unstable_flushAll();
 
-            let buttonElement = buttonRef.current;
+            const buttonElement = buttonRef.current;
             dispatchClickEvent(buttonElement);
             expect(onClick).toHaveBeenCalledTimes(2);
             expect(onClickCapture).toHaveBeenCalledTimes(2);
@@ -1939,7 +1939,7 @@ describe('DOMModernPluginEventSystem', () => {
             onClick.mockClear();
             onClickCapture.mockClear();
 
-            let divElement = divRef.current;
+            const divElement = divRef.current;
             dispatchClickEvent(divElement);
             expect(onClick).toHaveBeenCalledTimes(3);
             expect(onClickCapture).toHaveBeenCalledTimes(3);
@@ -1981,7 +1981,7 @@ describe('DOMModernPluginEventSystem', () => {
             ReactDOM.render(<Test />, container);
             Scheduler.unstable_flushAll();
 
-            let buttonElement = buttonRef.current;
+            const buttonElement = buttonRef.current;
             dispatchClickEvent(buttonElement);
             expect(rootListerner1).toHaveBeenCalledTimes(1);
             expect(targetListerner1).toHaveBeenCalledTimes(0);
@@ -2020,7 +2020,7 @@ describe('DOMModernPluginEventSystem', () => {
 
             Scheduler.unstable_flushAll();
 
-            let buttonElement = buttonRef.current;
+            const buttonElement = buttonRef.current;
             dispatchClickEvent(buttonElement);
             expect(rootListerner1).toHaveBeenCalledTimes(1);
             expect(rootListerner2).toHaveBeenCalledTimes(1);
@@ -2064,7 +2064,7 @@ describe('DOMModernPluginEventSystem', () => {
             ReactDOM.render(<Test />, container);
             Scheduler.unstable_flushAll();
 
-            let buttonElement = buttonRef.current;
+            const buttonElement = buttonRef.current;
             dispatchClickEvent(buttonElement);
             expect(onClick).toHaveBeenCalledTimes(3);
             expect(onClickCapture).toHaveBeenCalledTimes(3);
@@ -2079,7 +2079,7 @@ describe('DOMModernPluginEventSystem', () => {
             onClick.mockClear();
             onClickCapture.mockClear();
 
-            let divElement = divRef.current;
+            const divElement = divRef.current;
             dispatchClickEvent(divElement);
             expect(onClick).toHaveBeenCalledTimes(4);
             expect(onClickCapture).toHaveBeenCalledTimes(4);
@@ -2150,14 +2150,14 @@ describe('DOMModernPluginEventSystem', () => {
             ReactDOM.render(<Test />, container);
             Scheduler.unstable_flushAll();
 
-            let buttonElement = buttonRef.current;
+            const buttonElement = buttonRef.current;
             dispatchEvent(buttonElement, 'custom-event');
             expect(onCustomEvent).toHaveBeenCalledTimes(1);
             expect(onCustomEventCapture).toHaveBeenCalledTimes(1);
             expect(log[0]).toEqual(['capture', buttonElement]);
             expect(log[1]).toEqual(['bubble', buttonElement]);
 
-            let divElement = divRef.current;
+            const divElement = divRef.current;
             dispatchEvent(divElement, 'custom-event');
             expect(onCustomEvent).toHaveBeenCalledTimes(3);
             expect(onCustomEventCapture).toHaveBeenCalledTimes(3);
@@ -2283,7 +2283,7 @@ describe('DOMModernPluginEventSystem', () => {
               const Suspense = React.Suspense;
               let suspend = false;
               let resolve;
-              let promise = new Promise(
+              const promise = new Promise(
                 resolvePromise => (resolve = resolvePromise),
               );
 
@@ -2319,7 +2319,7 @@ describe('DOMModernPluginEventSystem', () => {
               const container2 = document.createElement('div');
               document.body.appendChild(container2);
 
-              let root = ReactDOM.createRoot(container2);
+              const root = ReactDOM.createRoot(container2);
 
               ReactTestUtils.act(() => {
                 root.render(<Component />);
@@ -2506,7 +2506,7 @@ describe('DOMModernPluginEventSystem', () => {
               ReactDOM.render(<Test />, container);
               Scheduler.unstable_flushAll();
 
-              let textNode = buttonRef.current.firstChild;
+              const textNode = buttonRef.current.firstChild;
               dispatchClickEvent(textNode);
               // This should not work, as the target instance will be the
               // <button>, which is actually outside the scope.

packages/react-dom/src/events/__tests__/DeprecatedDOMEventResponderSystem-test.internal.js

@@ -149,7 +149,7 @@ describe('DOMEventResponderSystem', () => {
 
   it('the event responders should fire on click event', () => {
     let eventResponderFiredCount = 0;
-    let eventLog = [];
+    const eventLog = [];
     const buttonRef = React.createRef();
 
     const TestResponder = createEventResponder({
@@ -208,7 +208,7 @@ describe('DOMEventResponderSystem', () => {
     const checkPassiveEvents = require('react-dom/src/events/checkPassiveEvents');
     checkPassiveEvents.passiveBrowserEventsSupported = true;
 
-    let eventLog = [];
+    const eventLog = [];
     const buttonRef = React.createRef();
 
     const TestResponder = createEventResponder({
@@ -235,7 +235,7 @@ describe('DOMEventResponderSystem', () => {
     ReactDOM.render(<Test />, container);
 
     // Clicking the button should trigger the event responder onEvent()
-    let buttonElement = buttonRef.current;
+    const buttonElement = buttonRef.current;
     dispatchClickEvent(buttonElement);
     expect(eventLog.length).toBe(1);
     expect(eventLog).toEqual([
@@ -393,7 +393,7 @@ describe('DOMEventResponderSystem', () => {
   });
 
   it('nested event responders should fire in the correct order #2', () => {
-    let eventLog = [];
+    const eventLog = [];
     const buttonRef = React.createRef();
 
     const TestResponder = createEventResponder({
@@ -422,14 +422,14 @@ describe('DOMEventResponderSystem', () => {
     ReactDOM.render(<Test />, container);
 
     // Clicking the button should trigger the event responder onEvent()
-    let buttonElement = buttonRef.current;
+    const buttonElement = buttonRef.current;
     dispatchClickEvent(buttonElement);
 
     expect(eventLog).toEqual(['B [bubble]']);
   });
 
   it('custom event dispatching for click -> magicClick works', () => {
-    let eventLog = [];
+    const eventLog = [];
     const buttonRef = React.createRef();
 
     const TestResponder = createEventResponder({
@@ -468,7 +468,7 @@ describe('DOMEventResponderSystem', () => {
     ReactDOM.render(<Test />, container);
 
     // Clicking the button should trigger the event responder onEvent()
-    let buttonElement = buttonRef.current;
+    const buttonElement = buttonRef.current;
     dispatchClickEvent(buttonElement);
 
     expect(eventLog).toEqual(['magic event fired', 'magicclick', 'bubble']);
@@ -626,7 +626,7 @@ describe('DOMEventResponderSystem', () => {
   it('the event responder target listeners should correctly fire for only their events', () => {
     let clickEventComponent1Fired = 0;
     let clickEventComponent2Fired = 0;
-    let eventLog = [];
+    const eventLog = [];
     const buttonRef = React.createRef();
 
     const TestResponderA = createEventResponder({
@@ -666,7 +666,7 @@ describe('DOMEventResponderSystem', () => {
 
     ReactDOM.render(<Test />, container);
 
-    let buttonElement = buttonRef.current;
+    const buttonElement = buttonRef.current;
     dispatchClickEvent(buttonElement);
 
     expect(clickEventComponent1Fired).toBe(1);
@@ -698,7 +698,7 @@ describe('DOMEventResponderSystem', () => {
     });
 
     let handler;
-    let buttonRef = React.createRef();
+    const buttonRef = React.createRef();
     const Test = () => {
       const listener = React.DEPRECATED_useResponder(TestResponder, {
         onClick: handler,
@@ -811,7 +811,7 @@ describe('DOMEventResponderSystem', () => {
       );
     }
 
-    let root = ReactDOM.createRoot(container);
+    const root = ReactDOM.createRoot(container);
     root.render(<Test counter={0} />);
     expect(Scheduler).toFlushAndYield(__DEV__ ? ['Test', 'Test'] : ['Test']);
 
@@ -981,7 +981,7 @@ describe('DOMEventResponderSystem', () => {
     ReactDOM.render(<Test />, container);
     expect(container.innerHTML).toBe('<button>Click me!</button>');
 
-    let buttonElement = buttonRef.current;
+    const buttonElement = buttonRef.current;
     dispatchClickEvent(buttonElement);
     expect(eventResponderFiredCount).toBe(1);
     dispatchClickEvent(buttonElement);

packages/react-dom/src/events/__tests__/EnterLeaveEventPlugin-test.js

@@ -40,7 +40,7 @@ describe('EnterLeaveEventPlugin', () => {
     );
     iframeDocument.close();
 
-    let leaveEvents = [];
+    const leaveEvents = [];
     const node = ReactDOM.render(
       <div
         onMouseLeave={e => {
@@ -73,7 +73,7 @@ describe('EnterLeaveEventPlugin', () => {
     );
     iframeDocument.close();
 
-    let enterEvents = [];
+    const enterEvents = [];
     const node = ReactDOM.render(
       <div
         onMouseEnter={e => {