Better debounce mecanism

Author: garronej

package.json

@@ -98,7 +98,7 @@
         "next": "12.3.1",
         "oppa": "^0.4.0",
         "parse-numeric-range": "^1.3.0",
-        "powerhooks": "^0.21.0",
+        "powerhooks": "^0.22.0",
         "prettier": "^2.3.0",
         "react": "18.2.0",
         "react-dom": "18.2.0",

stories/ColorHelper/ColorHelper.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useTransition } from "react";
 import { CallOut } from "../../dist/CallOut";
 import { colorDecisionAndCorrespondingOption } from "../../dist/fr/generatedFromCss/colorDecisionAndCorrespondingOptions";
 import type { ColorDecisionAndCorrespondingOption } from "../../src/scripts/build/cssToTs/colorDecisionAndCorrespondingOptions";
@@ -12,6 +12,7 @@ import { Evt } from "evt";
 import { useStyles } from "./makeStyles";
 import { ColorDecisionCard } from "./ColorDecisionCard";
 import type { Props as SearchProps } from "./Search";
+import { useEffectOnValueChange } from "powerhooks/useEffectOnValueChange";
 
 const colors = Array.from(
     new Set(
@@ -69,27 +70,33 @@ export function ColorHelper() {
     const [color, setColor] = useState<SearchProps["color"]>(undefined);
     const [usage, setUsage] = useState<SearchProps["usage"]>(undefined);
 
-    useDebounce({
-        "query": search + (context ?? "") + (color ?? "") + (usage ?? ""),
-        "onDebounced": () =>
-            setFilteredColorDecisionAndCorrespondingOption(
-                fzf
-                    .find(search)
-                    .map(
-                        ({ item: colorDecisionAndCorrespondingOption }) =>
-                            colorDecisionAndCorrespondingOption
-                    )
-                    .filter(({ parsedColorDecisionName }) =>
-                        context === undefined ? true : parsedColorDecisionName.context === context
-                    )
-                    .filter(({ parsedColorDecisionName }) =>
-                        color === undefined ? true : parsedColorDecisionName.colorName === color
-                    )
-                    .filter(({ parsedColorDecisionName }) =>
-                        usage === undefined ? true : parsedColorDecisionName.usage === usage
-                    )
-            )
-    });
+    const [, startTransition] = useTransition();
+
+    const updateSearch = () => {
+        setFilteredColorDecisionAndCorrespondingOption(
+            fzf
+                .find(search)
+                .map(
+                    ({ item: colorDecisionAndCorrespondingOption }) =>
+                        colorDecisionAndCorrespondingOption
+                )
+                .filter(({ parsedColorDecisionName }) =>
+                    context === undefined ? true : parsedColorDecisionName.context === context
+                )
+                .filter(({ parsedColorDecisionName }) =>
+                    color === undefined ? true : parsedColorDecisionName.colorName === color
+                )
+                .filter(({ parsedColorDecisionName }) =>
+                    usage === undefined ? true : parsedColorDecisionName.usage === usage
+                )
+        );
+    };
+
+    useEffectOnValueChange(() => {
+        startTransition(() => updateSearch());
+    }, [context, color, usage]);
+
+    useDebounce(updateSearch, [search]);
 
     const { css } = useStyles();
 

stories/ColorHelper/Search.tsx

@@ -102,7 +102,8 @@ export function Search(props: Props) {
                 className={classes.filtersWrapper}
             >
                 <Select
-                    label="Filter by context"
+                    label={`Filter by context (${contextes.length})`}
+                    disabled={contextes.length === 0}
                     nativeSelectProps={{
                         "onChange": event =>
                             onContextChange(event.target.value || (undefined as any)),
@@ -116,7 +117,8 @@ export function Search(props: Props) {
                     ))}
                 </Select>
                 <Select
-                    label="Filter by color name"
+                    label={`Filter by color name (${colors.length})`}
+                    disabled={colors.length === 0}
                     nativeSelectProps={{
                         "onChange": event =>
                             onColorChange(event.target.value || (undefined as any)),
@@ -130,7 +132,8 @@ export function Search(props: Props) {
                     ))}
                 </Select>
                 <Select
-                    label="Filter by usage"
+                    label={`Filter by usage (${usages.length})`}
+                    disabled={usages.length === 0}
                     nativeSelectProps={{
                         "onChange": event =>
                             onUsageChange(event.target.value || (undefined as any)),

yarn.lock

@@ -9191,10 +9191,10 @@ postcss@^8.2.15, postcss@^8.4.18:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
-powerhooks@^0.21.0:
-  version "0.21.0"
-  resolved "https://registry.yarnpkg.com/powerhooks/-/powerhooks-0.21.0.tgz#bafe67c2ce8c4c38cd26dec08de27fdf0d81da70"
-  integrity sha512-O9JG79YKv3yJ6Tkcx+eNWUC/rUKPCFUBkDIDbnoKM29P0+8VAx9pjp/C9eE2qnKNXr5azgnGtEoyLzGB/UKorQ==
+powerhooks@^0.22.0:
+  version "0.22.0"
+  resolved "https://registry.yarnpkg.com/powerhooks/-/powerhooks-0.22.0.tgz#501cbdd28fd5427dd54e1796cd1089a02a101543"
+  integrity sha512-3HTG7MA9i8rE9Pk25TTO9bXAY12WWi+bypO5ZWGUN03MlqM1gWQDtxrTPJjx2zR3e6DbO+0jaunTdHv22fYNbg==
   dependencies:
     evt "^2.4.13"
     memoizee "^0.4.15"