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

.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>,