From a7606901f3d0cdf1b23c9ec22bda1c6f0b08bf88 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 16 Aug 2023 12:31:33 +1000
Subject: [PATCH] feat(ui): add eslint rules

- `curly` requires conditionals to use curly braces
- `react/jsx-curly-brace-presence` requires string props to *not* have curly braces
- `react-memo/require-memo` requires function components to be wrapped in `memo`
- `react-memo/require-usememo` requires all complex props (objects, functions) to be wrapped in `useMemo` or `useCallback`
---
 invokeai/frontend/web/.eslintrc.js | 9 ++++++++-
 invokeai/frontend/web/package.json | 1 +
 invokeai/frontend/web/yarn.lock    | 5 +++++
 3 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/invokeai/frontend/web/.eslintrc.js b/invokeai/frontend/web/.eslintrc.js
index c48e08d45e..f4c282a7c5 100644
--- a/invokeai/frontend/web/.eslintrc.js
+++ b/invokeai/frontend/web/.eslintrc.js
@@ -20,9 +20,16 @@ module.exports = {
     ecmaVersion: 2018,
     sourceType: 'module',
   },
-  plugins: ['react', '@typescript-eslint', 'eslint-plugin-react-hooks'],
+  plugins: ['react', '@typescript-eslint', 'react-hooks', 'react-memo'],
   root: true,
   rules: {
+    curly: 'error',
+    'react-memo/require-memo': 'error',
+    'react-memo/require-usememo': 'error',
+    'react/jsx-curly-brace-presence': [
+      'error',
+      { props: 'never', children: 'never' },
+    ],
     'react-hooks/exhaustive-deps': 'error',
     'no-var': 'error',
     'brace-style': 'error',
diff --git a/invokeai/frontend/web/package.json b/invokeai/frontend/web/package.json
index 6c9db74bbc..643f91a376 100644
--- a/invokeai/frontend/web/package.json
+++ b/invokeai/frontend/web/package.json
@@ -76,6 +76,7 @@
     "chakra-ui-contextmenu": "^1.0.5",
     "dateformat": "^5.0.3",
     "downshift": "^7.6.0",
+    "eslint-plugin-react-memo": "^0.0.3",
     "formik": "^2.4.2",
     "framer-motion": "^10.12.17",
     "fuse.js": "^6.6.2",
diff --git a/invokeai/frontend/web/yarn.lock b/invokeai/frontend/web/yarn.lock
index 834e6368c4..6cf83f5f81 100644
--- a/invokeai/frontend/web/yarn.lock
+++ b/invokeai/frontend/web/yarn.lock
@@ -3557,6 +3557,11 @@ eslint-plugin-react-hooks@^4.6.0:
   resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz#4c3e697ad95b77e93f8646aaa1630c1ba607edd3"
   integrity sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==
 
+eslint-plugin-react-memo@^0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-memo/-/eslint-plugin-react-memo-0.0.3.tgz#26542aa2eeabed37f354c64c6b4eabc07051cf78"
+  integrity sha512-IZzLDZJF4V84XL9+v74ypDSts/hAQtNeYFZGc3wvdX+YgIw4pkn4GiXPJ6MNUccNTPYJqr89Nnvqo3rcesEBOQ==
+
 eslint-plugin-react@^7.32.2:
   version "7.32.2"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.32.2.tgz#e71f21c7c265ebce01bcbc9d0955170c55571f10"