chore(effect): add eslint plugin to reduce rerenders (#35223)

Author: msyavuz

superset-frontend/.eslintrc.js

@@ -83,6 +83,7 @@ module.exports = {
     'plugin:react-hooks/recommended',
     'plugin:react-prefer-function-component/recommended',
     'plugin:storybook/recommended',
+    'plugin:react-you-might-not-need-an-effect/legacy-recommended',
   ],
   parser: '@babel/eslint-parser',
   parserOptions: {

superset-frontend/package-lock.json

@@ -305,6 +305,7 @@
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-prefer-function-component": "^3.3.0",
+    "eslint-plugin-react-you-might-not-need-an-effect": "^0.5.1",
     "eslint-plugin-storybook": "^0.8.0",
     "eslint-plugin-testing-library": "^6.4.0",
     "eslint-plugin-theme-colors": "file:eslint-rules/eslint-plugin-theme-colors",

superset-frontend/package.json

@@ -127,25 +127,21 @@ const Select = forwardRef(
     const shouldShowSearch = allowNewOptions ? true : showSearch;
     const [selectValue, setSelectValue] = useState(value);
     const [inputValue, setInputValue] = useState('');
-    const [isLoading, setIsLoading] = useState(loading);
     const [isDropdownVisible, setIsDropdownVisible] = useState(false);
     const [isSearching, setIsSearching] = useState(false);
     const [visibleOptions, setVisibleOptions] = useState<SelectOptionsType>([]);
-    const [maxTagCount, setMaxTagCount] = useState(
-      propsMaxTagCount ?? MAX_TAG_COUNT,
-    );
     const [onChangeCount, setOnChangeCount] = useState(0);
     const previousChangeCount = usePrevious(onChangeCount, 0);
     const fireOnChange = useCallback(
       () => setOnChangeCount(onChangeCount + 1),
       [onChangeCount],
     );
 
-    useEffect(() => {
-      if (oneLine) {
-        setMaxTagCount(isDropdownVisible ? 0 : 1);
-      }
-    }, [isDropdownVisible, oneLine]);
+    const maxTagCount = oneLine
+      ? isDropdownVisible
+        ? 0
+        : 1
+      : (propsMaxTagCount ?? MAX_TAG_COUNT);
 
     const mappedMode = isSingleMode ? undefined : 'multiple';
 
@@ -510,6 +506,8 @@ const Select = forwardRef(
       ],
     );
 
+    const isLoading = loading ?? false;
+
     const popupRender = (
       originNode: ReactElement & { ref?: RefObject<HTMLElement> },
     ) =>
@@ -536,12 +534,6 @@ const Select = forwardRef(
       setVisibleOptions(initialOptions);
     }, [initialOptions]);
 
-    useEffect(() => {
-      if (loading !== undefined && loading !== isLoading) {
-        setIsLoading(loading);
-      }
-    }, [isLoading, loading]);
-
     useEffect(() => {
       setSelectValue(value);
     }, [value]);