Enable no-use-before-define rule (#13606)

Author: gaearon

.eslintrc.js

@@ -37,6 +37,7 @@ module.exports = {
     'no-shadow': ERROR,
     'no-unused-expressions': ERROR,
     'no-unused-vars': [ERROR, {args: 'none'}],
+    'no-use-before-define': [ERROR, {functions: false, variables: false}],
     'no-useless-concat': OFF,
     'quotes': [ERROR, 'single', {avoidEscape: true, allowTemplateLiterals: true }],
     'space-before-blocks': ERROR,

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

@@ -126,6 +126,7 @@ if (__DEV__) {
 
 ReactControlledComponent.setRestoreImplementation(restoreControlledState);
 
+/* eslint-disable no-use-before-define */
 type DOMContainer =
   | (Element & {
       _reactRootContainer: ?Root,
@@ -150,6 +151,20 @@ type Batch = FiberRootBatch & {
   _didComplete: boolean,
 };
 
+type Root = {
+  render(children: ReactNodeList, callback: ?() => mixed): Work,
+  unmount(callback: ?() => mixed): Work,
+  legacy_renderSubtreeIntoContainer(
+    parentComponent: ?React$Component<any, any>,
+    children: ReactNodeList,
+    callback: ?() => mixed,
+  ): Work,
+  createBatch(): Batch,
+
+  _internalRoot: FiberRoot,
+};
+/* eslint-enable no-use-before-define */
+
 function ReactBatch(root: ReactRoot) {
   const expirationTime = DOMRenderer.computeUniqueAsyncExpiration();
   this._expirationTime = expirationTime;
@@ -317,19 +332,6 @@ ReactWork.prototype._onCommit = function(): void {
   }
 };
 
-type Root = {
-  render(children: ReactNodeList, callback: ?() => mixed): Work,
-  unmount(callback: ?() => mixed): Work,
-  legacy_renderSubtreeIntoContainer(
-    parentComponent: ?React$Component<any, any>,
-    children: ReactNodeList,
-    callback: ?() => mixed,
-  ): Work,
-  createBatch(): Batch,
-
-  _internalRoot: FiberRoot,
-};
-
 function ReactRoot(container: Container, isAsync: boolean, hydrate: boolean) {
   const root = DOMRenderer.createContainer(container, isAsync, hydrate);
   this._internalRoot = root;

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

@@ -50,6 +50,7 @@ import UIManager from 'UIManager';
 // This means that they never overlap.
 let nextReactTag = 2;
 
+/* eslint-disable no-use-before-define */
 type Node = Object;
 export type Type = string;
 export type Props = Object;
@@ -71,6 +72,7 @@ export type UpdatePayload = Object;
 
 export type TimeoutHandle = TimeoutID;
 export type NoTimeout = -1;
+/* eslint-enable no-use-before-define */
 
 // TODO: Remove this conditional once all changes have propagated.
 if (registerEventHandler) {

packages/react-noop-renderer/src/createReactNoop.js

@@ -21,6 +21,7 @@ import type {ReactNodeList} from 'shared/ReactTypes';
 import * as ReactPortal from 'shared/ReactPortal';
 import expect from 'expect';
 
+/* eslint-disable no-use-before-define */
 type Container = {rootID: string, children: Array<Instance | TextInstance>};
 type Props = {prop: any, hidden?: boolean, children?: mixed};
 type Instance = {|
@@ -30,6 +31,7 @@ type Instance = {|
   prop: any,
 |};
 type TextInstance = {|text: string, id: number|};
+/* eslint-enable no-use-before-define */
 
 const NO_CONTEXT = {};
 const UPDATE_SIGNAL = {};

packages/react-reconciler/src/ReactFiberRoot.js

@@ -18,6 +18,7 @@ import {NoWork} from './ReactFiberExpirationTime';
 import {enableSchedulerTracking} from 'shared/ReactFeatureFlags';
 import {unstable_getThreadID} from 'schedule/tracking';
 
+/* eslint-disable no-use-before-define */
 // TODO: This should be lifted into the renderer.
 export type Batch = {
   _defer: boolean,
@@ -98,6 +99,7 @@ export type FiberRoot = {
   ...BaseFiberRootProperties,
   ...ProfilingOnlyFiberRootProperties,
 };
+/* eslint-enable no-use-before-define */
 
 export function createFiberRoot(
   containerInfo: any,

packages/react-test-renderer/src/ReactShallowRenderer.js

@@ -19,6 +19,72 @@ if (__DEV__) {
   Object.freeze(emptyObject);
 }
 
+class Updater {
+  constructor(renderer) {
+    this._renderer = renderer;
+    this._callbacks = [];
+  }
+
+  _enqueueCallback(callback, publicInstance) {
+    if (typeof callback === 'function' && publicInstance) {
+      this._callbacks.push({
+        callback,
+        publicInstance,
+      });
+    }
+  }
+
+  _invokeCallbacks() {
+    const callbacks = this._callbacks;
+    this._callbacks = [];
+
+    callbacks.forEach(({callback, publicInstance}) => {
+      callback.call(publicInstance);
+    });
+  }
+
+  isMounted(publicInstance) {
+    return !!this._renderer._element;
+  }
+
+  enqueueForceUpdate(publicInstance, callback, callerName) {
+    this._enqueueCallback(callback, publicInstance);
+    this._renderer._forcedUpdate = true;
+    this._renderer.render(this._renderer._element, this._renderer._context);
+  }
+
+  enqueueReplaceState(publicInstance, completeState, callback, callerName) {
+    this._enqueueCallback(callback, publicInstance);
+    this._renderer._newState = completeState;
+    this._renderer.render(this._renderer._element, this._renderer._context);
+  }
+
+  enqueueSetState(publicInstance, partialState, callback, callerName) {
+    this._enqueueCallback(callback, publicInstance);
+    const currentState = this._renderer._newState || publicInstance.state;
+
+    if (typeof partialState === 'function') {
+      partialState = partialState.call(
+        publicInstance,
+        currentState,
+        publicInstance.props,
+      );
+    }
+
+    // Null and undefined are treated as no-ops.
+    if (partialState === null || partialState === undefined) {
+      return;
+    }
+
+    this._renderer._newState = {
+      ...currentState,
+      ...partialState,
+    };
+
+    this._renderer.render(this._renderer._element, this._renderer._context);
+  }
+}
+
 class ReactShallowRenderer {
   static createRenderer = function() {
     return new ReactShallowRenderer();
@@ -263,72 +329,6 @@ class ReactShallowRenderer {
   }
 }
 
-class Updater {
-  constructor(renderer) {
-    this._renderer = renderer;
-    this._callbacks = [];
-  }
-
-  _enqueueCallback(callback, publicInstance) {
-    if (typeof callback === 'function' && publicInstance) {
-      this._callbacks.push({
-        callback,
-        publicInstance,
-      });
-    }
-  }
-
-  _invokeCallbacks() {
-    const callbacks = this._callbacks;
-    this._callbacks = [];
-
-    callbacks.forEach(({callback, publicInstance}) => {
-      callback.call(publicInstance);
-    });
-  }
-
-  isMounted(publicInstance) {
-    return !!this._renderer._element;
-  }
-
-  enqueueForceUpdate(publicInstance, callback, callerName) {
-    this._enqueueCallback(callback, publicInstance);
-    this._renderer._forcedUpdate = true;
-    this._renderer.render(this._renderer._element, this._renderer._context);
-  }
-
-  enqueueReplaceState(publicInstance, completeState, callback, callerName) {
-    this._enqueueCallback(callback, publicInstance);
-    this._renderer._newState = completeState;
-    this._renderer.render(this._renderer._element, this._renderer._context);
-  }
-
-  enqueueSetState(publicInstance, partialState, callback, callerName) {
-    this._enqueueCallback(callback, publicInstance);
-    const currentState = this._renderer._newState || publicInstance.state;
-
-    if (typeof partialState === 'function') {
-      partialState = partialState.call(
-        publicInstance,
-        currentState,
-        publicInstance.props,
-      );
-    }
-
-    // Null and undefined are treated as no-ops.
-    if (partialState === null || partialState === undefined) {
-      return;
-    }
-
-    this._renderer._newState = {
-      ...currentState,
-      ...partialState,
-    };
-
-    this._renderer.render(this._renderer._element, this._renderer._context);
-  }
-}
-
 let currentlyValidatingElement = null;
 
 function getDisplayName(element) {

packages/react-test-renderer/src/ReactTestHostConfig.js

@@ -10,6 +10,7 @@
 import warning from 'shared/warning';
 import * as TestRendererScheduling from './ReactTestRendererScheduling';
 
+/* eslint-disable no-use-before-define */
 export type Type = string;
 export type Props = Object;
 export type Container = {|
@@ -35,6 +36,7 @@ export type UpdatePayload = Object;
 export type ChildSet = void; // Unused
 export type TimeoutHandle = TimeoutID;
 export type NoTimeout = -1;
+/* eslint-enable no-use-before-define */
 
 export * from 'shared/HostConfigWithNoPersistence';
 export * from 'shared/HostConfigWithNoHydration';

packages/react-test-renderer/src/ReactTestRenderer.js

@@ -37,6 +37,7 @@ import ReactVersion from 'shared/ReactVersion';
 import * as ReactTestHostConfig from './ReactTestHostConfig';
 import * as TestRendererScheduling from './ReactTestRendererScheduling';
 
+/* eslint-disable no-use-before-define */
 type TestRendererOptions = {
   createNodeMock: (element: React$Element<any>) => any,
   unstable_isAsync: boolean,
@@ -57,6 +58,7 @@ type FindOptions = $Shape<{
 }>;
 
 export type Predicate = (node: ReactTestInstance) => ?boolean;
+/* eslint-enable no-use-before-define */
 
 const defaultTestOptions = {
   createNodeMock: function() {
@@ -209,19 +211,6 @@ function toTree(node: ?Fiber) {
   }
 }
 
-const fiberToWrapper = new WeakMap();
-function wrapFiber(fiber: Fiber): ReactTestInstance {
-  let wrapper = fiberToWrapper.get(fiber);
-  if (wrapper === undefined && fiber.alternate !== null) {
-    wrapper = fiberToWrapper.get(fiber.alternate);
-  }
-  if (wrapper === undefined) {
-    wrapper = new ReactTestInstance(fiber);
-    fiberToWrapper.set(fiber, wrapper);
-  }
-  return wrapper;
-}
-
 const validWrapperTypes = new Set([
   FunctionalComponent,
   FunctionalComponentLazy,
@@ -543,6 +532,19 @@ const ReactTestRendererFiber = {
   unstable_setNowImplementation: TestRendererScheduling.setNowImplementation,
 };
 
+const fiberToWrapper = new WeakMap();
+function wrapFiber(fiber: Fiber): ReactTestInstance {
+  let wrapper = fiberToWrapper.get(fiber);
+  if (wrapper === undefined && fiber.alternate !== null) {
+    wrapper = fiberToWrapper.get(fiber.alternate);
+  }
+  if (wrapper === undefined) {
+    wrapper = new ReactTestInstance(fiber);
+    fiberToWrapper.set(fiber, wrapper);
+  }
+  return wrapper;
+}
+
 // Enable ReactTestRenderer to be used to test DevTools integration.
 TestRenderer.injectIntoDevTools({
   findFiberByHostInstance: (() => {

packages/shared/ReactTypes.js

@@ -7,22 +7,24 @@
  * @flow
  */
 
+/* eslint-disable no-use-before-define */
 export type ReactNode =
   | React$Element<any>
   | ReactPortal
   | ReactText
   | ReactFragment
   | ReactProvider<any>
   | ReactConsumer<any>;
+/* eslint-enable no-use-before-define */
+
+export type ReactEmpty = null | void | boolean;
 
 export type ReactFragment = ReactEmpty | Iterable<React$Node>;
 
 export type ReactNodeList = ReactEmpty | React$Node;
 
 export type ReactText = string | number;
 
-export type ReactEmpty = null | void | boolean;
-
 export type ReactProvider<T> = {
   $$typeof: Symbol | number,
   type: ReactProviderType<T>,