'React' was used before it was defined

From the official documentation.

"rules": {  // note you must disable the base rule as it can report incorrect errors  "no-use-before-define": "off",  "@typescript-eslint/no-use-before-define": ["error"]}

The bug occurs due to mismatch of @typescript-eslint versions in react-scripts and your local package.json - GitHub issue

You can downgrade the packages until react-scripts updates their version.

    "@typescript-eslint/eslint-plugin": "4.0.1",    "@typescript-eslint/parser": "4.0.1",

EDIT 2020-09-14

It seems the bug is not related to react-scripts version of @typescript-eslint since multiple people reported the same bug without using react-scripts.

Anyway, the workaround remains the same - downgrade to the working version of @typescript-eslint until the fix is available.

EDIT 2020-10-24

react-scripts@4.0.0 has been published with updated @typescript-eslint. Using the newest version should solve the issue.

EDIT 2020-11-04

If after upgrading the packages the error is still there, most probably your eslint config uses the wrong rule. Check out Igor's answer to fix it.

If you are only getting this error for .js files, make sure @typescript-eslint/parser is being used exclusively on Typescript files.

.eslintrc.json (abbreviated)

{  "overrides": [    {      "files": ["**/*.ts", "**/*.tsx"],      "plugins": ["@typescript-eslint"],      "rules": {        "no-use-before-define": "off",        "@typescript-eslint/no-use-before-define": ["error"],      },    }  ],  // WRONG: Do not use @typescript-eslint/parser on JS files  // "parser": "@typescript-eslint/parser",  "plugins": [    "react",    // "@typescript-eslint"  ],}