Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[utils] Add function overload for useEventCallback #37827

Merged
merged 3 commits into from
Jul 11, 2023

Conversation

cherniavskii
Copy link
Member

In MUI X, we often type React.useCallback like this:

const callback = React.useCallback<(param1: number) => number>((param1) => param, []);

// Example: https://github.com/mui/mui-x/blob/b3939c9f83296e2958daf091f4788524616775c1/packages/grid/x-data-grid-pro/src/hooks/features/columnReorder/useGridColumnReorder.tsx#L86

useEventCallback doesn't support the same signature, so when we replace React.useCallback with useEventCallback we need to change the typing - here is an example: mui/mui-x#9394 (comment)

This PR adds a function overload to useEventCallback that is compatible with React.useCallback, so that it's easier to switch between React.useCallback and useEventCallback:

-const handleDragEnter = React.useCallback<
+const handleDragEnter = useEventCallback<
    GridEventListener<'cellDragEnter' | 'columnHeaderDragEnter'>
  >((params, event) => {

@cherniavskii cherniavskii added typescript package: utils Specific to the @mui/utils package labels Jul 5, 2023
@cherniavskii cherniavskii requested a review from michaldudak July 5, 2023 09:41
@mui-bot
Copy link

mui-bot commented Jul 5, 2023

Netlify deploy preview

https://deploy-preview-37827--material-ui.netlify.app/

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against d097a06

@@ -4,7 +4,13 @@ import useEnhancedEffect from '../useEnhancedEffect';
/**
* https://github.com/facebook/react/issues/14099#issuecomment-440013892
*/
export default function useEventCallback<Args extends unknown[], Return>(
function useEventCallback<T extends (...args: any[]) => any = (...args: unknown[]) => any>(
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you rename T to something like Func? We're trying to get away from one letter generic parameters.
Also, would it still work if the default return type was also unknown?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done!

@cherniavskii cherniavskii force-pushed the useEventCallback-type-overload branch from 9c812b1 to d097a06 Compare July 11, 2023 14:51
@cherniavskii cherniavskii merged commit f4f3fa4 into mui:master Jul 11, 2023
@cherniavskii cherniavskii deleted the useEventCallback-type-overload branch July 11, 2023 16:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package: utils Specific to the @mui/utils package typescript
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants