onPress handler on Button component has a return type of void only

[mounis-bhat]

📝 Feedback

The onPress handler on Button component has a return type of void however many tasks done using buttons can be asynchronous and the expect the type of promise returning function.

🔦 Context

Faced this issue when calling an API with a function and es-lint was throwing the following error:

Promise-returning function provided to attribute where a void return was expected.eslint@typescript-eslint/no-misused-promises

💻 Code Sample

async function loginWithGoogle() {
    setIsLoading(true)
    try {
      await signIn()
    } catch (e) {
      toast.error("Something went wrong")
    } finally {
      setIsLoading(false)
    }
  }
<Button
  className="mx-auto w-full max-w-sm"
  onPress={loginWithGoogle}
  isDisabled={isLoading}
>
  {isLoading ? (
    <Loader2 className="mr-2 h-5 w-5 animate-spin " />
  ) : (
    <GoogleSvg />
  )}
  <span>Google</span>
</Button>

🌍 Your Environment

| react-aria-components |
| Edge Chromium |
| Windows 11 |

🧢 Your Company/Team

Independent Developer

[LFDanLu]

I tried broadening the the onPress return type to void | Promise<void> but this seems to have some known issues that would make it a no go it seems. Perhaps changing the return type to unknown?

[snowystinger]

I don't think we necessarily need to change anything, this is apparent in React as well. typescript-eslint/typescript-eslint#4619 The recommendation is that when using React, make use of the options to turn off certain checks. Specifically checksVoidReturn. Going to close with the official recommendation. We can reopent if that changes down the road.