Theo's Typesafe Cult•17mo ago

Async event handlers

First off, I come from Vue. I've barely touched React before, but not much. This is my first time using t3, so my assumptions could be wildly wrong here. How are you supposed to do async operations in reaction to dom events? If I create an async handler function, and attaches it to an input's change event (onChange={handleChange}), ESLint fires off with

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

. If I change it to onChange={(event) => {handleChange(event)}}, it hits me with

ESLint: Promises must be awaited, end with a call to .catch, end with a call to .then with a rejection handler or be explicitly marked as ignored with the

void operator.(@typescript-eslint/no-floating-promises). When I then add void, onChange={(event) => {void handleChange(event)}}, there is no more complaining. Is this how you're supposed to do it? Am I supposed to not have async event handlers?

6 Replies

aryan1306•17mo ago

This might help https://github.com/typescript-eslint/typescript-eslint/issues/4619#issuecomment-1055614155

GitHub

[no-misused-promises] async react callback properties when void exp...

I have tried restarting my IDE and the issue persists. I have updated to the latest version of the packages. I have read the FAQ and my problem is not listed. Repro { "rules": { "no-...

Josh•17mo ago

Can you give a full example of where your getting an error? I have a feeling your not quite something the "react way"

CathrineOP•17mo ago

This showed me that you can disable the check for void promises

CathrineOP•17mo ago

That is not unlikely 😄 Here's a simplified version of my case. https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgQzMOBfOAzKERwBEAfgPQCuMwANgM6mrCEDcAUK6JLHAEoCmyAMbxc+OAHIoA4ePZ8AHl3gATPtmTlqI8gDthwCDrgAxGnwCqYahGTKAFAEpErOHEGHa8clZvKAKgowptR8ALKUyFSGcAC8KGgAdNhmCd7WtgHyQSnktGERUTqObC5uHvAAFsg6yiGW6crBfLEotACeenB2fABufDowAFy80jAJAMJVOgDmfACifQMAPAASfqEAMgCSOmCUcyEg-TAAfE4xJ86uru46njhmLb3HCTDIULNjySG0APwJwBgfBAdgADA4Stc4MBsF0AITfZoAHyRDxCrzaYGacJicUIQKypCsyGAOkITgQpShUhg5CgOjYUIw7ChaV8mWyIXCb0KCRABT4dmQAHcSSIUgSYI4IaUMJC4DS6UY7FS4EtSXsYKrXIZJtVZjEEN1FjBzpdKVCoT0IMBlHAprULD5bE1jccZZbMMzPTBMXwYoREYRtShBII+GAYAHJUTqCSyarSCdSg5WBggA I'm reacting to a file being selected in a file input, and then I'm doing async operations in the handler. This gives the eslint error about floating promises. While I've marked the question as solved, I'm interested to hear if there are better, more "react" ways of doing this.

TS Playground - An online editor for exploring TypeScript and JavaS...

The Playground lets you write TypeScript or JavaScript online in a safe and sharable way.

Josh•17mo ago

this actually looks fine tbh. One thing i would recomend to make the types easier on yourself is changing it to this

import { api } from "~/utils/api";

import React from 'react'

export default function FileUpload() {
  const uploadTextFileMutation = api.file.uploadTextFile.useMutation();

  const handleUploadFile = async (file: File) => {

    if (file.type !== "text/plain") {
      return;
    }

    uploadTextFileMutation.mutate(await file.text());
  };

  return (
    <input
      onChange={(e) => {
        const file = e.target.files?.item(0)
        file && handleUploadFile(file);
      }}
      type="file"
      accept="text/plain"
    />
  )
}

import { api } from "~/utils/api";

import React from 'react'

export default function FileUpload() {
  const uploadTextFileMutation = api.file.uploadTextFile.useMutation();

  const handleUploadFile = async (file: File) => {

    if (file.type !== "text/plain") {
      return;
    }

    uploadTextFileMutation.mutate(await file.text());
  };

  return (
    <input
      onChange={(e) => {
        const file = e.target.files?.item(0)
        file && handleUploadFile(file);
      }}
      type="file"
      accept="text/plain"
    />
  )
}

Mocha•17mo ago

Another way:

import { api } from '~/utils/api'

export default function FileUpload() {
  const { mutate: uploadTextFile } = api.file.uploadTextFile.useMutation()

  async function handleUploadFile(file: File) {
    if (file.type !== 'text/plain') return
    const text = await file.text().catch(() => undefined)
    if (!text?.length) return

    uploadTextFile(text)
  }

  return (
    <input
      type='file'
      accept='text/plain'
      onChange={event => {
        const file = event.currentTarget.files?.item(0)
        if (!file) return
        void handleUploadFile(file)
      }}
     />
   )
}

import { api } from '~/utils/api'

export default function FileUpload() {
  const { mutate: uploadTextFile } = api.file.uploadTextFile.useMutation()

  async function handleUploadFile(file: File) {
    if (file.type !== 'text/plain') return
    const text = await file.text().catch(() => undefined)
    if (!text?.length) return

    uploadTextFile(text)
  }

  return (
    <input
      type='file'
      accept='text/plain'
      onChange={event => {
        const file = event.currentTarget.files?.item(0)
        if (!file) return
        void handleUploadFile(file)
      }}
     />
   )
}

Gaming

Programming

Async event handlers