Cathrine
TTCTheo's Typesafe Cult
•Created by Cathrine on 8/14/2023 in #questions
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?9 replies