use-async-effect icon indicating copy to clipboard operation
use-async-effect copied to clipboard

Add `useAsyncEffekt` alias for better linting support

Open davemecha opened this issue 7 months ago • 0 comments

When I wanted to add linting support to my useAsyncEffect hook as described in the README, I encountered the mentioned linting issue with the async callback. On my search for a solution, I came up with a simple workaround, at lease for the variant without teardown callback.

Since the async check is only done for hooks that have the term Effect in its name, it's easy to avoid, by effectively renaming the hook (by wrapping it).

export function useAsyncEffekt(effect: (isMounted: () => boolean) => unknown | Promise<unknown>, inputs?: any[]): void {
  return useAsyncEffect(effect, inputs);
}

With this it's possible to correctly configure react-hooks/exhaustive-deps with additionalHooks: "^(useAsyncEffekt)$".


Since additionalHooks would also not work for the variant with teardown, since for proper linting, the deps array must be the 2nd parameter, there is no point in using additionalHooks for useAsyncEffect at all. I want to suggest providing an alias useAsyncEffekt (feels natural for me as I'm German ;) ) or maybe another suitable name for just the variant of useAsyncEffect with the deps array as a 2nd argument. And also updating the readme accordingly.

See this react issue and my comment for this workaround there: https://github.com/facebook/react/issues/19034#issuecomment-2769818089

davemecha avatar Apr 02 '25 13:04 davemecha