fix(use-controllable): call onChange only if value changed

chakra-ui · Feb 17, 2021 · 623e782 · 623e782
1 parent 11ac4f9
commit 623e782
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git a/.changeset/dirty-radios-flash.md b/.changeset/dirty-radios-flash.md
@@ -0,0 +1,6 @@
+---
+"@chakra-ui/hooks": patch
+---
+
+`useControllableState`: The `onChange` callback will be called only if the new
+value isn't equal to the current one.
diff --git a/packages/hooks/src/use-controllable.ts b/packages/hooks/src/use-controllable.ts
@@ -43,9 +43,15 @@ export function useControllableState<T>(props: UseControllableStateProps<T>) {
   const updateValue = React.useCallback(
     (next: React.SetStateAction<T>) => {
       const nextValue = runIfFn(next, value)
+
+      if (nextValue === value) {
+        return
+      }
+
       if (!isControlled) {
         setValue(nextValue)
       }
+
       handleChange(nextValue)
     },
     [isControlled, handleChange, value],