add react hooks eslint plugin (#3059)

* add eslint react hooks * fix code breaking the rules-of-hooks eslint rule * fix spinnerWhileRendering for tests Co-authored-by: Wyatt Johnson <wyattjoh@gmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
2026-06-27 17:50:42 +08:00 · 2020-08-05 10:42:50 -04:00
parent 9d02391062
commit 0f1dd7d707
16 changed files with 152 additions and 117 deletions
@@ -21,6 +21,7 @@ const typescriptOverrides = {
    "@typescript-eslint/tslint",
    "react",
    "jsx-a11y",
+    "react-hooks",
  ],
  settings: {
    react: {
@@ -236,5 +237,7 @@ module.exports = {
    "sort-imports": "off",
    "use-isnan": "error",
    "valid-typeof": "off",
+    "react-hooks/rules-of-hooks": "warn",
+    "react-hooks/exhaustive-deps": "warn",
  },
 };
@@ -20249,9 +20249,9 @@
      }
    },
    "eslint-plugin-react-hooks": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-1.7.0.tgz",
-      "integrity": "sha512-iXTCFcOmlWvw4+TOE8CLWj6yX1GwzT0Y6cUfHHZqWnSk144VmVIRcVGtUAzrLES7C798lmvnt02C7rxaOX1HNA==",
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.0.8.tgz",
+      "integrity": "sha512-6SSb5AiMCPd8FDJrzah+Z4F44P2CdOaK026cXFV+o/xSRzfOiV1FNFeLl2z6xm3yqWOQEZ5OfVgiec90qV2xrQ==",
      "dev": true
    },
    "eslint-scope": {
@@ -22020,28 +22020,28 @@
      "dependencies": {
        "abbrev": {
          "version": "1.1.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
          "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
          "dev": true,
          "optional": true
        },
        "ansi-regex": {
          "version": "2.1.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
          "dev": true,
          "optional": true
        },
        "aproba": {
          "version": "1.2.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
          "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==",
          "dev": true,
          "optional": true
        },
        "are-we-there-yet": {
          "version": "1.1.5",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz",
          "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==",
          "dev": true,
          "optional": true,
@@ -22052,14 +22052,14 @@
        },
        "balanced-match": {
          "version": "1.0.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
          "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
          "dev": true,
          "optional": true
        },
        "brace-expansion": {
          "version": "1.1.11",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
          "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
          "dev": true,
          "optional": true,
@@ -22077,35 +22077,35 @@
        },
        "code-point-at": {
          "version": "1.1.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
          "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
          "dev": true,
          "optional": true
        },
        "concat-map": {
          "version": "0.0.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
          "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
          "dev": true,
          "optional": true
        },
        "console-control-strings": {
          "version": "1.1.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
          "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
          "dev": true,
          "optional": true
        },
        "core-util-is": {
          "version": "1.0.2",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
          "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
          "dev": true,
          "optional": true
        },
        "debug": {
          "version": "4.1.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
          "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
          "dev": true,
          "optional": true,
@@ -22115,21 +22115,21 @@
        },
        "deep-extend": {
          "version": "0.6.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
          "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
          "dev": true,
          "optional": true
        },
        "delegates": {
          "version": "1.0.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
          "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
          "dev": true,
          "optional": true
        },
        "detect-libc": {
          "version": "1.0.3",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
          "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=",
          "dev": true,
          "optional": true
@@ -22159,7 +22159,7 @@
        },
        "gauge": {
          "version": "2.7.4",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
          "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
          "dev": true,
          "optional": true,
@@ -22176,7 +22176,7 @@
        },
        "glob": {
          "version": "7.1.3",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.3.tgz",
          "integrity": "sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==",
          "dev": true,
          "optional": true,
@@ -22191,14 +22191,14 @@
        },
        "has-unicode": {
          "version": "2.0.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
          "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
          "dev": true,
          "optional": true
        },
        "iconv-lite": {
          "version": "0.4.24",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
          "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
          "dev": true,
          "optional": true,
@@ -22208,7 +22208,7 @@
        },
        "ignore-walk": {
          "version": "3.0.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.1.tgz",
          "integrity": "sha512-DTVlMx3IYPe0/JJcYP7Gxg7ttZZu3IInhuEhbchuqneY9wWe5Ojy2mXLBaQFUQmo0AW2r3qG7m1mg86js+gnlQ==",
          "dev": true,
          "optional": true,
@@ -22218,7 +22218,7 @@
        },
        "inflight": {
          "version": "1.0.6",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
          "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
          "dev": true,
          "optional": true,
@@ -22229,21 +22229,21 @@
        },
        "inherits": {
          "version": "2.0.3",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
          "dev": true,
          "optional": true
        },
        "ini": {
          "version": "1.3.5",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
          "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==",
          "dev": true,
          "optional": true
        },
        "is-fullwidth-code-point": {
          "version": "1.0.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
          "dev": true,
          "optional": true,
@@ -22253,14 +22253,14 @@
        },
        "isarray": {
          "version": "1.0.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
          "dev": true,
          "optional": true
        },
        "minimatch": {
          "version": "3.0.4",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
          "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
          "dev": true,
          "optional": true,
@@ -22308,7 +22308,7 @@
        },
        "ms": {
          "version": "2.1.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
          "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==",
          "dev": true,
          "optional": true
@@ -22322,7 +22322,7 @@
        },
        "needle": {
          "version": "2.3.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/needle/-/needle-2.3.0.tgz",
          "integrity": "sha512-QBZu7aAFR0522EyaXZM0FZ9GLpq6lvQ3uq8gteiDUp7wKdy0lSd2hPlgFwVuW1CBkfEs9PfDQsQzZghLs/psdg==",
          "dev": true,
          "optional": true,
@@ -22334,7 +22334,7 @@
        },
        "node-pre-gyp": {
          "version": "0.12.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/node-pre-gyp/-/node-pre-gyp-0.12.0.tgz",
          "integrity": "sha512-4KghwV8vH5k+g2ylT+sLTjy5wmUOb9vPhnM8NHvRf9dHmnW/CndrFXy2aRPaPST6dugXSdHXfeaHQm77PIz/1A==",
          "dev": true,
          "optional": true,
@@ -22353,7 +22353,7 @@
        },
        "nopt": {
          "version": "4.0.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.1.tgz",
          "integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=",
          "dev": true,
          "optional": true,
@@ -22364,14 +22364,14 @@
        },
        "npm-bundled": {
          "version": "1.0.6",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-1.0.6.tgz",
          "integrity": "sha512-8/JCaftHwbd//k6y2rEWp6k1wxVfpFzB6t1p825+cUb7Ym2XQfhwIC5KwhrvzZRJu+LtDE585zVaS32+CGtf0g==",
          "dev": true,
          "optional": true
        },
        "npm-packlist": {
          "version": "1.4.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.4.1.tgz",
          "integrity": "sha512-+TcdO7HJJ8peiiYhvPxsEDhF3PJFGUGRcFsGve3vxvxdcpO2Z4Z7rkosRM0kWj6LfbK/P0gu3dzk5RU1ffvFcw==",
          "dev": true,
          "optional": true,
@@ -22382,7 +22382,7 @@
        },
        "npmlog": {
          "version": "4.1.2",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
          "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
          "dev": true,
          "optional": true,
@@ -22395,21 +22395,21 @@
        },
        "number-is-nan": {
          "version": "1.0.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
          "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
          "dev": true,
          "optional": true
        },
        "object-assign": {
          "version": "4.1.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
          "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
          "dev": true,
          "optional": true
        },
        "once": {
          "version": "1.4.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
          "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
          "dev": true,
          "optional": true,
@@ -22419,21 +22419,21 @@
        },
        "os-homedir": {
          "version": "1.0.2",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
          "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
          "dev": true,
          "optional": true
        },
        "os-tmpdir": {
          "version": "1.0.2",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
          "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
          "dev": true,
          "optional": true
        },
        "osenv": {
          "version": "0.1.5",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz",
          "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==",
          "dev": true,
          "optional": true,
@@ -22444,21 +22444,21 @@
        },
        "path-is-absolute": {
          "version": "1.0.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
          "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
          "dev": true,
          "optional": true
        },
        "process-nextick-args": {
          "version": "2.0.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz",
          "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==",
          "dev": true,
          "optional": true
        },
        "rc": {
          "version": "1.2.8",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
          "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
          "dev": true,
          "optional": true,
@@ -22480,7 +22480,7 @@
        },
        "readable-stream": {
          "version": "2.3.6",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
          "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
          "dev": true,
          "optional": true,
@@ -22496,7 +22496,7 @@
        },
        "rimraf": {
          "version": "2.6.3",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz",
          "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==",
          "dev": true,
          "optional": true,
@@ -22506,49 +22506,49 @@
        },
        "safe-buffer": {
          "version": "5.1.2",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
          "dev": true,
          "optional": true
        },
        "safer-buffer": {
          "version": "2.1.2",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
          "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
          "dev": true,
          "optional": true
        },
        "sax": {
          "version": "1.2.4",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
          "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
          "dev": true,
          "optional": true
        },
        "semver": {
          "version": "5.7.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.0.tgz",
          "integrity": "sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA==",
          "dev": true,
          "optional": true
        },
        "set-blocking": {
          "version": "2.0.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
          "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
          "dev": true,
          "optional": true
        },
        "signal-exit": {
          "version": "3.0.2",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
          "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
          "dev": true,
          "optional": true
        },
        "string-width": {
          "version": "1.0.2",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
          "dev": true,
          "optional": true,
@@ -22560,7 +22560,7 @@
        },
        "string_decoder": {
          "version": "1.1.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
          "dev": true,
          "optional": true,
@@ -22570,7 +22570,7 @@
        },
        "strip-ansi": {
          "version": "3.0.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
          "dev": true,
          "optional": true,
@@ -22580,7 +22580,7 @@
        },
        "strip-json-comments": {
          "version": "2.0.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
          "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
          "dev": true,
          "optional": true
@@ -22603,14 +22603,14 @@
        },
        "util-deprecate": {
          "version": "1.0.2",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
          "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
          "dev": true,
          "optional": true
        },
        "wide-align": {
          "version": "1.1.3",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
          "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
          "dev": true,
          "optional": true,
@@ -22620,7 +22620,7 @@
        },
        "wrappy": {
          "version": "1.0.2",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
          "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
          "dev": true,
          "optional": true
@@ -24051,6 +24051,12 @@
            }
          }
        },
+        "eslint-plugin-react-hooks": {
+          "version": "1.7.0",
+          "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-1.7.0.tgz",
+          "integrity": "sha512-iXTCFcOmlWvw4+TOE8CLWj6yX1GwzT0Y6cUfHHZqWnSk144VmVIRcVGtUAzrLES7C798lmvnt02C7rxaOX1HNA==",
+          "dev": true
+        },
        "event-source-polyfill": {
          "version": "1.0.15",
          "resolved": "https://registry.npmjs.org/event-source-polyfill/-/event-source-polyfill-1.0.15.tgz",
@@ -279,6 +279,7 @@
    "eslint-plugin-jsx-a11y": "^6.3.1",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-react": "^7.20.0",
+    "eslint-plugin-react-hooks": "^4.0.8",
    "eventemitter2": "^6.3.1",
    "farce": "^0.2.8",
    "final-form": "4.18.6",
@@ -21,10 +21,6 @@ interface Props {
 }

 const UserStatusDetailsContainer: FunctionComponent<Props> = ({ user }) => {
-  if (!user.status.ban.active && !user.status.suspension.active) {
-    return null;
-  }
-
  const activeBan = useMemo(() => {
    return user.status.ban.history.find((item) => item.active);
  }, [user]);
@@ -41,6 +37,10 @@ const UserStatusDetailsContainer: FunctionComponent<Props> = ({ user }) => {
    minute: "2-digit",
  });

+  if (!user.status.ban.active && !user.status.suspension.active) {
+    return null;
+  }
+
  return (
    <div>
      <Popover
@@ -17,20 +17,23 @@ interface Props {
 }

 const AddSiteRoute: FunctionComponent<Props> = ({ data }) => {
+  const { setMessage, clearMessage } = useNotification();
+  const onSiteEdit = useCallback(
+    (name: string) => {
+      setMessage(
+        <Localized id="configure-sites-edit-success" $site={name}>
+          <AppNotification icon="check_circle_outline" onClose={clearMessage}>
+            Changes to {name} have been saved
+          </AppNotification>
+        </Localized>
+      );
+    },
+    [setMessage, clearMessage]
+  );
  if (!data || !data.site) {
    return null;
  }
  const { site } = data;
-  const { setMessage, clearMessage } = useNotification();
-  const onSiteEdit = useCallback((name: string) => {
-    setMessage(
-      <Localized id="configure-sites-edit-success" $site={name}>
-        <AppNotification icon="check_circle_outline" onClose={clearMessage}>
-          Changes to {name} have been saved
-        </AppNotification>
-      </Localized>
-    );
-  }, []);
  return (
    <ConfigBox
      title={
@@ -38,13 +38,6 @@ interface Props {
  site?: Site | null;
 }
 const DashboardContainer: React.FunctionComponent<Props> = (props) => {
-  if (!props.site) {
-    return null;
-  }
-  const sites = props.query
-    ? props.query.sites.edges.map((edge) => edge.node)
-    : [];
-
  const [lastUpdated, setLastUpdated] = useState<string>(new Date().toString());
  const [loadMore, isLoadingMore] = useLoadMore(props.relay, 10);
  const [, isRefetching] = useRefetch<
@@ -53,6 +46,12 @@ const DashboardContainer: React.FunctionComponent<Props> = (props) => {
  const onRefetch = useCallback(() => {
    setLastUpdated(new Date().toString());
  }, []);
+  if (!props.site) {
+    return null;
+  }
+  const sites = props.query
+    ? props.query.sites.edges.map((edge) => edge.node)
+    : [];
  return (
    <MainLayout className={styles.root}>
      <Popover
@@ -23,7 +23,7 @@ function calculateBottomPadding(width: number, height: number) {
  return `${(height / width) * 100}%`;
 }

-const oEmbed: FunctionComponent<Props> = ({
+const OEmbed: FunctionComponent<Props> = ({
  url,
  type,
  className,
@@ -47,7 +47,7 @@ const oEmbed: FunctionComponent<Props> = ({
    if (containerRef.current) {
      setMaxWidth(containerRef.current.offsetWidth);
    }
-  }, [containerRef.current, maxWidth]);
+  }, [containerRef, maxWidth]);

  const onLoad = useCallback(() => {
    if (width && height && containerRef && containerRef.current) {
@@ -96,7 +96,7 @@ const oEmbed: FunctionComponent<Props> = ({
        );
      }
    }, 100);
-  }, [iframeRef, iframeRef.current, containerRef.current, width, height]);
+  }, [iframeRef, containerRef, width, height]);

  return (
    <div className={styles.container} ref={containerRef}>
@@ -117,4 +117,4 @@ const oEmbed: FunctionComponent<Props> = ({
  );
 };

-export default oEmbed;
+export default OEmbed;
@@ -19,13 +19,12 @@ const ReportFlowContainer: FunctionComponent<Props> = ({
  comment,
  onClose,
 }) => {
-  if (!viewer) {
-    return null;
-  }
-
  const onFormClose = useCallback(() => {
    onClose();
  }, [onClose]);
+  if (!viewer) {
+    return null;
+  }

  return <ReportCommentFormContainer comment={comment} onClose={onFormClose} />;
 };
@@ -33,20 +33,6 @@ const IgnoredTombstoneOrHideContainer: FunctionComponent<Props> = ({
 }) => {
  const deleted = Boolean(!comment.author);

-  if (deleted) {
-    return (
-      <>
-        <Tombstone className={CLASSES.deletedTombstone} fullWidth>
-          <Localized id="comments-tombstone-deleted">
-            This comment is no longer available. The commenter has deleted their
-            account.
-          </Localized>
-        </Tombstone>
-        {children}
-      </>
-    );
-  }
-
  const ignored = Boolean(
    comment.author &&
      viewer &&
@@ -66,11 +52,30 @@ const IgnoredTombstoneOrHideContainer: FunctionComponent<Props> = ({
    if (!tombstone && ignored === true && previouslyIgnored === false) {
      setTombstone(true);
    }
-  }, [ignored, previouslyIgnored, tombstone, setTombstone]);
+  }, [
+    ignored,
+    previouslyIgnored,
+    tombstone,
+    setTombstone,
+    singleConversationView,
+  ]);

  const onShowComment = useCallback(() => {
    setForceVisible(true);
  }, [setForceVisible]);
+  if (deleted) {
+    return (
+      <>
+        <Tombstone className={CLASSES.deletedTombstone} fullWidth>
+          <Localized id="comments-tombstone-deleted">
+            This comment is no longer available. The commenter has deleted their
+            account.
+          </Localized>
+        </Tombstone>
+        {children}
+      </>
+    );
+  }

  if (!ignored || forceVisible) {
    return <>{children}</>;
@@ -39,15 +39,15 @@ function callWhenReallyIdle(callback: () => void) {
 * Show spinner, wait for browser to idle and start rendering.
 */
 const SpinnerWhileRendering: FunctionComponent<Props> = (props) => {
-  // In our tests, we don't actually "render", so just skip this.
-  if (process.env.NODE_ENV === "test") {
-    return <>{props.children}</>;
-  }
  const [hidden, setHidden] = useState(true);
  useEffect(() => {
    // Ensure window has bee
    return callWhenReallyIdle(() => setHidden(false));
  }, [setHidden]);
+  // In our tests, we don't actually "render", so just skip this.
+  if (process.env.NODE_ENV === "test") {
+    return <>{props.children}</>;
+  }
  return (
    <>
      {hidden && (
@@ -0,0 +1,16 @@
+import React, { FunctionComponent } from "react";
+
+import SpinnerWhileRendering from "./SpinnerWhileRendering";
+
+interface Props {
+  children: React.ReactNode;
+}
+
+const SpinnerWhileRenderingWrapper: FunctionComponent<Props> = (props) => {
+  if (process.env.NODE_ENV === "test") {
+    return <>{props.children}</>;
+  }
+  return <SpinnerWhileRendering {...props} />;
+};
+
+export default SpinnerWhileRenderingWrapper;
@@ -0,0 +1,4 @@
+export {
+  default,
+  default as SpinnerWhileRendering,
+} from "./SpinnerWhileRenderingWrapper";
@@ -40,14 +40,14 @@ function callWhenReallyIdle(callback: () => void) {
 */
 const SpinnerWhileRendering: FunctionComponent<Props> = (props) => {
  // In our tests, we don't actually "render", so just skip this.
-  if (process.env.NODE_ENV === "test") {
-    return <>{props.children}</>;
-  }
  const [hidden, setHidden] = useState(true);
  useEffect(() => {
    // Ensure window has bee
    return callWhenReallyIdle(() => setHidden(false));
  }, [setHidden]);
+  if (process.env.NODE_ENV === "test") {
+    return <>{props.children}</>;
+  }
  return (
    <>
      {hidden && (
@@ -81,7 +81,7 @@ interface FormProps {
  password: string;
 }

-const changeEmailContainer: FunctionComponent<Props> = ({
+const ChangeEmailContainer: FunctionComponent<Props> = ({
  viewer,
  settings,
 }) => {
@@ -508,6 +508,6 @@ const enhanced = withFragmentContainer<Props>({
      }
    }
  `,
-})(changeEmailContainer);
+})(ChangeEmailContainer);

 export default enhanced;
@@ -31,7 +31,7 @@
  display: flex;
  flex-basis: calc(var(--spacing-2) + 14px);
  justify-content: center;
-  align-items: start;
+  align-items: flex-start;
 }

 .title {
@@ -46,10 +46,6 @@ const CallOut: FunctionComponent<Props> = ({
  visible = true,
  onClose,
 }) => {
-  if (!visible) {
-    return null;
-  }
-
  const rootClasses = cn(
    classes.root,
    {
@@ -86,6 +82,9 @@ const CallOut: FunctionComponent<Props> = ({

    onClose();
  }, [onClose]);
+  if (!visible) {
+    return null;
+  }

  return (
    <div className={rootClasses}>