useBetterCallback (with type-safe, make sure props and arguments passed always be memoized callbacks)

useCallback.ts

import {useCallback as useCallbackBase} from 'react'

/*
 * Use this type to make sure that the callback passed will always be a memoized callback
 */
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export interface MemoizedCallback<T extends (...args: any[]) => any> {
  (...args: Parameters<T>): ReturnType<T>
  memoized: true
}

// eslint-disable-next-line @typescript-eslint/no-explicit-any
function memoizeCallback<T extends (...args: any[]) => any>(callback: T) {
  // @ts-expect-error Escape typescript
  callback.memoized = true
  return callback as unknown as MemoizedCallback<T>
}

/*
 * Use this hook to create a memoized callback instead of the original one
 */
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export function useCallback(callback: (...args: any[]) => any, deps: any[]) {
  return useCallbackBase(memoizeCallback(callback), deps)
}