fix(components): suppress unnecessary re-renders of Checkbox and Radi…

…o component (#8349) * fix(components): suppress unnecessary re-renders of Checkbox and Radio component * fix(components): ensure global event listeners are set up
chakra-ui · Mar 11, 2024 · bb3ce66 · bb3ce66
1 parent 4f5c273
commit bb3ce66
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 6 deletions.
diff --git a/.changeset/metal-mangos-judge.md b/.changeset/metal-mangos-judge.md
@@ -0,0 +1,5 @@
+---
+"@chakra-ui/react": minor
+---
+
+Suppress unnecessary re-renders of Checkbox and Radio component
diff --git a/packages/components/src/checkbox/use-checkbox.ts b/packages/components/src/checkbox/use-checkbox.ts
@@ -55,8 +55,8 @@ export function useCheckbox(props: UseCheckboxProps = {}) {
   const [isActive, setActive] = useState(false)
 
   useEffect(() => {
-    return trackFocusVisible(setIsFocusVisible)
-  }, [])
+    return trackFocusVisible((value) => setIsFocusVisible(value && isFocused))
+  }, [isFocused])
 
   const inputRef = useRef<HTMLInputElement>(null)
   const [rootIsLabelElement, setRootIsLabelElement] = useState(true)
@@ -175,7 +175,7 @@ export function useCheckbox(props: UseCheckboxProps = {}) {
         "data-hover": dataAttr(isHovered),
         "data-checked": dataAttr(isChecked),
         "data-focus": dataAttr(isFocused),
-        "data-focus-visible": dataAttr(isFocused && isFocusVisible),
+        "data-focus-visible": dataAttr(isFocusVisible),
         "data-indeterminate": dataAttr(isIndeterminate),
         "data-disabled": dataAttr(isDisabled),
         "data-invalid": dataAttr(isInvalid),

diff --git a/packages/components/src/radio-group/use-radio.ts b/packages/components/src/radio-group/use-radio.ts
@@ -140,8 +140,8 @@ export function useRadio(props: UseRadioProps = {}) {
   const isChecked = isControlled ? isCheckedProp : isCheckedState
 
   useEffect(() => {
-    return trackFocusVisible(setIsFocusVisible)
-  }, [])
+    return trackFocusVisible((value) => setIsFocusVisible(value && isFocused))
+  }, [isFocused])
 
   const handleChange = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -187,7 +187,7 @@ export function useRadio(props: UseRadioProps = {}) {
       "data-invalid": dataAttr(isInvalid),
       "data-checked": dataAttr(isChecked),
       "data-focus": dataAttr(isFocused),
-      "data-focus-visible": dataAttr(isFocused && isFocusVisible),
+      "data-focus-visible": dataAttr(isFocusVisible),
       "data-readonly": dataAttr(isReadOnly),
       "aria-hidden": true,
       onMouseDown: callAllHandlers(props.onMouseDown, () => setActive(true)),