[core] Remove unnecessary usages of useEventCallback (#28910)

mui · Oct 20, 2021 · 6ff9e79 · 6ff9e79
1 parent 1ee62a6
commit 6ff9e79
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 82 deletions.
diff --git a/packages/mui-core/src/ButtonUnstyled/useButton.ts b/packages/mui-core/src/ButtonUnstyled/useButton.ts
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import {
   unstable_setRef as setRef,
-  unstable_useEventCallback as useEventCallback,
   unstable_useForkRef as useForkRef,
   unstable_useIsFocusVisible as useIsFocusVisible,
 } from '@mui/utils';
@@ -31,7 +30,7 @@ export default function useButton(props: UseButtonProps) {
     isFocusVisibleRef.current = focusVisible;
   }, [focusVisible, isFocusVisibleRef]);
 
-  const handleMouseLeave =
+  const createHandleMouseLeave =
     (otherHandlers: Record<string, React.EventHandler<any>>) => (event: React.MouseEvent) => {
       if (focusVisible) {
         event.preventDefault();
@@ -40,7 +39,7 @@ export default function useButton(props: UseButtonProps) {
       otherHandlers.onMouseLeave?.(event);
     };
 
-  const handleBlur =
+  const createHandleBlur =
     (otherHandlers: Record<string, React.EventHandler<any>>) => (event: React.FocusEvent) => {
       handleBlurVisible(event);
 
@@ -51,23 +50,22 @@ export default function useButton(props: UseButtonProps) {
       otherHandlers.onBlur?.(event);
     };
 
-  const handleFocus = useEventCallback(
+  const createHandleFocus =
     (otherHandlers: Record<string, React.EventHandler<any>>) =>
-      (event: React.FocusEvent<HTMLButtonElement>) => {
-        // Fix for https://github.com/facebook/react/issues/7769
-        if (!buttonRef.current) {
-          buttonRef.current = event.currentTarget;
-        }
-
-        handleFocusVisible(event);
-        if (isFocusVisibleRef.current === true) {
-          setFocusVisible(true);
-          otherHandlers.onFocusVisible?.(event);
-        }
-
-        otherHandlers.onFocus?.(event);
-      },
-  );
+    (event: React.FocusEvent<HTMLButtonElement>) => {
+      // Fix for https://github.com/facebook/react/issues/7769
+      if (!buttonRef.current) {
+        buttonRef.current = event.currentTarget;
+      }
+
+      handleFocusVisible(event);
+      if (isFocusVisibleRef.current === true) {
+        setFocusVisible(true);
+        otherHandlers.onFocusVisible?.(event);
+      }
+
+      otherHandlers.onFocus?.(event);
+    };
 
   const elementType = component ?? components.Root ?? 'button';
 
@@ -78,7 +76,7 @@ export default function useButton(props: UseButtonProps) {
     );
   };
 
-  const handleMouseDown =
+  const createHandleMouseDown =
     (otherHandlers: Record<string, React.EventHandler<any>>) =>
     (event: React.MouseEvent<HTMLButtonElement>) => {
       if (event.target === event.currentTarget && !disabled) {
@@ -88,7 +86,7 @@ export default function useButton(props: UseButtonProps) {
       otherHandlers.onMouseDown?.(event);
     };
 
-  const handleMouseUp =
+  const createHandleMouseUp =
     (otherHandlers: Record<string, React.EventHandler<any>>) =>
     (event: React.MouseEvent<HTMLButtonElement>) => {
       if (event.target === event.currentTarget) {
@@ -98,7 +96,7 @@ export default function useButton(props: UseButtonProps) {
       otherHandlers.onMouseUp?.(event);
     };
 
-  const handleKeyDown = useEventCallback(
+  const createHandleKeyDown =
     (otherHandlers: Record<string, React.EventHandler<any>>) => (event: React.KeyboardEvent) => {
       if (event.target === event.currentTarget && isNonNativeButton() && event.key === ' ') {
         event.preventDefault();
@@ -120,10 +118,9 @@ export default function useButton(props: UseButtonProps) {
         event.preventDefault();
         otherHandlers.onClick?.(event);
       }
-    },
-  );
+    };
 
-  const handleKeyUp = useEventCallback(
+  const createHandleKeyUp =
     (otherHandlers: Record<string, React.EventHandler<any>>) => (event: React.KeyboardEvent) => {
       // calling preventDefault in keyUp on a <button> will not dispatch a click event if Space is pressed
       // https://codesandbox.io/s/button-keyup-preventdefault-dn7f0
@@ -143,8 +140,7 @@ export default function useButton(props: UseButtonProps) {
       ) {
         otherHandlers.onClick?.(event);
       }
-    },
-  );
+    };
 
   const handleOwnRef = useForkRef(focusVisibleRef, buttonRef);
   const handleRef = useForkRef(ref, handleOwnRef);
@@ -174,13 +170,13 @@ export default function useButton(props: UseButtonProps) {
     const externalEventHandlers = { ...propsEventHandlers, ...otherHandlers };
 
     const ownEventHandlers = {
-      onBlur: handleBlur(externalEventHandlers),
-      onFocus: handleFocus(externalEventHandlers),
-      onKeyDown: handleKeyDown(externalEventHandlers),
-      onKeyUp: handleKeyUp(externalEventHandlers),
-      onMouseDown: handleMouseDown(externalEventHandlers),
-      onMouseLeave: handleMouseLeave(externalEventHandlers),
-      onMouseUp: handleMouseUp(externalEventHandlers),
+      onBlur: createHandleBlur(externalEventHandlers),
+      onFocus: createHandleFocus(externalEventHandlers),
+      onKeyDown: createHandleKeyDown(externalEventHandlers),
+      onKeyUp: createHandleKeyUp(externalEventHandlers),
+      onMouseDown: createHandleMouseDown(externalEventHandlers),
+      onMouseLeave: createHandleMouseLeave(externalEventHandlers),
+      onMouseUp: createHandleMouseUp(externalEventHandlers),
     };
 
     const mergedEventHandlers: Record<string, React.EventHandler<any>> = {

diff --git a/packages/mui-core/src/SliderUnstyled/SliderUnstyled.js b/packages/mui-core/src/SliderUnstyled/SliderUnstyled.js
@@ -271,21 +271,21 @@ const SliderUnstyled = React.forwardRef(function SliderUnstyled(props, ref) {
   const handleFocusRef = useForkRef(focusVisibleRef, sliderRef);
   const handleRef = useForkRef(ref, handleFocusRef);
 
-  const handleFocus = useEventCallback((event) => {
+  const handleFocus = (event) => {
     const index = Number(event.currentTarget.getAttribute('data-index'));
     handleFocusVisible(event);
     if (isFocusVisibleRef.current === true) {
       setFocusVisible(index);
     }
     setOpen(index);
-  });
-  const handleBlur = useEventCallback((event) => {
+  };
+  const handleBlur = (event) => {
     handleBlurVisible(event);
     if (isFocusVisibleRef.current === false) {
       setFocusVisible(-1);
     }
     setOpen(-1);
-  });
+  };
   const handleMouseOver = useEventCallback((event) => {
     const index = Number(event.currentTarget.getAttribute('data-index'));
     setOpen(index);
@@ -310,7 +310,7 @@ const SliderUnstyled = React.forwardRef(function SliderUnstyled(props, ref) {
     setFocusVisible(-1);
   }
 
-  const handleHiddenInputChange = useEventCallback((event) => {
+  const handleHiddenInputChange = (event) => {
     const index = Number(event.currentTarget.getAttribute('data-index'));
     const value = values[index];
     const marksValues = marks.map((mark) => mark.value);
@@ -367,7 +367,7 @@ const SliderUnstyled = React.forwardRef(function SliderUnstyled(props, ref) {
     if (onChangeCommitted) {
       onChangeCommitted(event, newValue);
     }
-  });
+  };
 
   const previousIndex = React.useRef();
   let axis = orientation;

diff --git a/packages/mui-core/src/SwitchUnstyled/useSwitch.ts b/packages/mui-core/src/SwitchUnstyled/useSwitch.ts
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import {
   unstable_useControlled as useControlled,
-  unstable_useEventCallback as useEventCallback,
   unstable_useForkRef as useForkRef,
   unstable_useIsFocusVisible as useIsFocusVisible,
 } from '@mui/utils';
@@ -96,18 +95,19 @@ export default function useSwitch(props: UseSwitchProps) {
     state: 'checked',
   });
 
-  const handleInputChange = useEventCallback(
-    (event: React.ChangeEvent<HTMLInputElement>, otherHandler?: React.FormEventHandler) => {
-      // Workaround for https://github.com/facebook/react/issues/9023
-      if (event.nativeEvent.defaultPrevented) {
-        return;
-      }
+  const handleInputChange = (
+    event: React.ChangeEvent<HTMLInputElement>,
+    otherHandler?: React.FormEventHandler,
+  ) => {
+    // Workaround for https://github.com/facebook/react/issues/9023
+    if (event.nativeEvent.defaultPrevented) {
+      return;
+    }
 
-      setCheckedState(event.target.checked);
-      onChange?.(event);
-      otherHandler?.(event);
-    },
-  );
+    setCheckedState(event.target.checked);
+    onChange?.(event);
+    otherHandler?.(event);
+  };
 
   const {
     isFocusVisibleRef,
@@ -127,36 +127,32 @@ export default function useSwitch(props: UseSwitchProps) {
 
   const inputRef = React.useRef<any>(null);
 
-  const handleFocus = useEventCallback(
-    (event: React.FocusEvent, otherHandler?: React.FocusEventHandler) => {
-      // Fix for https://github.com/facebook/react/issues/7769
-      if (!inputRef.current) {
-        inputRef.current = event.currentTarget;
-      }
-
-      handleFocusVisible(event);
-      if (isFocusVisibleRef.current === true) {
-        setFocusVisible(true);
-        onFocusVisible?.(event);
-      }
-
-      onFocus?.(event);
-      otherHandler?.(event);
-    },
-  );
-
-  const handleBlur = useEventCallback(
-    (event: React.FocusEvent, otherHandler?: React.FocusEventHandler) => {
-      handleBlurVisible(event);
-
-      if (isFocusVisibleRef.current === false) {
-        setFocusVisible(false);
-      }
-
-      onBlur?.(event);
-      otherHandler?.(event);
-    },
-  );
+  const handleFocus = (event: React.FocusEvent, otherHandler?: React.FocusEventHandler) => {
+    // Fix for https://github.com/facebook/react/issues/7769
+    if (!inputRef.current) {
+      inputRef.current = event.currentTarget;
+    }
+
+    handleFocusVisible(event);
+    if (isFocusVisibleRef.current === true) {
+      setFocusVisible(true);
+      onFocusVisible?.(event);
+    }
+
+    onFocus?.(event);
+    otherHandler?.(event);
+  };
+
+  const handleBlur = (event: React.FocusEvent, otherHandler?: React.FocusEventHandler) => {
+    handleBlurVisible(event);
+
+    if (isFocusVisibleRef.current === false) {
+      setFocusVisible(false);
+    }
+
+    onBlur?.(event);
+    otherHandler?.(event);
+  };
 
   const handleRefChange = useForkRef(focusVisibleRef, inputRef);