Merge pull request #12 from felipehimself/refactor/improving-performance

Refactor

Author: felipehimself

README.md

@@ -143,7 +143,7 @@ const App = () => {
 
 ## ⚡Performance Tips
 
-The `AutocompleteCheckbox` component is memoized using React.memo. Although it's not mandatory, to benefit from this, make sure to wrap the `options` prop in a useMemo to prevent unnecessary re-renders.
+The `AutocompleteCheckbox` component is memoized using React.memo. Although it's not mandatory, to benefit from this, you would have to wrap the `options` prop in a useMemo to prevent unnecessary re-renders.
 
 
 ## ♻️ Reusability

src/package/checkbox/autocomplete-checkbox.tsx

@@ -14,11 +14,7 @@ import { Clear as ClearIcon } from "@mui/icons-material";
 
 import { checkedIcon, icon } from "./constants";
 import { filterFalsy, sortOptions } from "../utils";
-import {
-  TAutocompleteCheckboxProps,
-  TColumnType,
-  TRenderOptions,
-} from "../types";
+import { TAutocompleteCheckboxProps, TRenderOption } from "../types";
 import { CUSTOM_EVENT_CLEAN_AUTOCOMPLETE } from "../constants";
 
 const AutocompleteCheckboxInner = <T extends Record<string, any>>(
@@ -27,7 +23,7 @@ const AutocompleteCheckboxInner = <T extends Record<string, any>>(
   const {
     placeHolder = "",
     filterButtonText = "Filter",
-    cleanButtonText = "Clear",
+    cleanButtonText = "Clean",
     noOptionsText = "No options",
     textFieldProps = {},
     checkboxProps = {},
@@ -43,14 +39,13 @@ const AutocompleteCheckboxInner = <T extends Record<string, any>>(
 
   const [filters, setFilters] = useState<string[]>([]);
   const [autocompleteOpen, setAutocompleteOpen] = useState(false);
-  const [columnType, setColumnType] = useState<TColumnType>(null);
 
-  const autocompleteOptions = useMemo(() => {
+  const autocompleteOptionsAndType = useMemo(() => {
     const rowsObject = header?.getContext()?.table.getFilteredRowModel();
 
     const noFalsyValues = filterFalsy(options);
 
-    setColumnType(typeof noFalsyValues[0]);
+    const optionType = typeof noFalsyValues[0];
 
     const uniqueOptions = [
       ...new Set(noFalsyValues.map((option) => String(option))),
@@ -79,7 +74,7 @@ const AutocompleteCheckboxInner = <T extends Record<string, any>>(
       });
     });
 
-    return optionsMapped;
+    return { options: optionsMapped, optionsType: optionType };
   }, [options, header, sortAscending, sortDescending]);
 
   useEffect(() => {
@@ -119,7 +114,6 @@ const AutocompleteCheckboxInner = <T extends Record<string, any>>(
       if (customEvent.detail.message === CUSTOM_EVENT_CLEAN_AUTOCOMPLETE) {
         setFilters([]);
         setAutocompleteOpen(false);
-        setColumnType(null);
       }
     };
 
@@ -157,12 +151,12 @@ const AutocompleteCheckboxInner = <T extends Record<string, any>>(
   const handleApplyFilter = <T extends Record<string, any>>(
     header: MRT_Header<T>
   ) => {
-    const handlingNumberValue = filters.map((x) => {
-      const isNumber = columnType === "number";
+    const handlingNumberValue = filters.map((filter) => {
+      const isNumber = autocompleteOptionsAndType.optionsType === "number";
 
-      if (isNumber) return Number(x);
+      if (isNumber) return Number(filter);
 
-      return x;
+      return filter;
     });
 
     const newFilterValueState =
@@ -183,7 +177,7 @@ const AutocompleteCheckboxInner = <T extends Record<string, any>>(
     });
   };
 
-  const handleClearColumn = () => {
+  const handleCleanColumn = () => {
     header.column.setFilterValue(undefined);
     setFilters([]);
     setAutocompleteOpen(false);
@@ -195,7 +189,7 @@ const AutocompleteCheckboxInner = <T extends Record<string, any>>(
     }
   };
 
-  const handleClearCheckBoxesSelection = () => {
+  const handleCleanCheckBoxesSelection = () => {
     setFilters([]);
   };
 
@@ -241,21 +235,21 @@ const AutocompleteCheckboxInner = <T extends Record<string, any>>(
       multiple
       value={filters}
       disableCloseOnSelect
-      options={autocompleteOptions}
+      options={autocompleteOptionsAndType.options}
       open={autocompleteOpen}
       onOpen={handleOpenAutocomplete}
       onClose={handleCloseAutoComplete}
       onChange={(_e, _newValue, reason, details) => {
         if (reason === "removeOption") return removeFromFilter(details!.option);
-        if (reason === "clear") return handleClearColumn();
+        if (reason === "clear") return handleCleanColumn();
         if (reason === "selectOption")
           return handleSelectOptions(details!.option);
       }}
       getOptionLabel={(option) => option}
       renderOption={(props, option, { selected: _selected }) => {
         const { key: _key, ...rest } = props;
 
-        const curentIdx = (props as TRenderOptions)["data-option-index"];
+        const currentIndex = (props as TRenderOption)["data-option-index"];
 
         return (
           <>
@@ -268,7 +262,7 @@ const AutocompleteCheckboxInner = <T extends Record<string, any>>(
               />
               {option}
             </li>
-            {curentIdx === autocompleteOptions.length - 1 && (
+            {currentIndex === autocompleteOptionsAndType.options.length - 1 && (
               <>
                 <Divider />
                 <Stack
@@ -280,7 +274,7 @@ const AutocompleteCheckboxInner = <T extends Record<string, any>>(
                 >
                   <Button
                     {...cleanButtonProps}
-                    onClick={handleClearCheckBoxesSelection}
+                    onClick={handleCleanCheckBoxesSelection}
                     variant={cleanButtonProps?.variant || "text"}
                     color={cleanButtonProps?.color || "warning"}
                     size={cleanButtonProps?.size || "small"}
@@ -318,7 +312,7 @@ const AutocompleteCheckboxInner = <T extends Record<string, any>>(
                 endAdornment: (
                   <IconButton
                     sx={{ mr: "-1.875rem", mt: "-0.281rem" }}
-                    onClick={handleClearColumn}
+                    onClick={handleCleanColumn}
                   >
                     <ClearIcon fontSize="small" />
                   </IconButton>

src/package/types/column-type.ts

@@ -1,4 +1,3 @@
 export * from "./autocomplete-checkbox-props";
 export * from "./render-options";
 export * from "./sort-exclusive";
-export * from "./column-type";

src/package/types/index.ts

@@ -1,4 +1,4 @@
-export type TRenderOptions = {
+export type TRenderOption = {
   key: string;
   tabIndex: number;
   role: string;