Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[@types/react] useEffect(async () => ...) does not account for async #30551

Closed
IljaDaderko opened this issue Nov 15, 2018 · 10 comments

Comments

Projects
None yet
8 participants
@IljaDaderko
Copy link

commented Nov 15, 2018

If you know how to fix the issue, make a pull request instead.

Right now I am unable to make function that useEffect takes in as async, since it returns following error:

[ts]
Argument of type '() => Promise' is not assignable to parameter of type 'EffectCallback'.
Type 'Promise' is not assignable to type 'void | (() => void)'.
Type 'Promise' is not assignable to type '() => void'.
Type 'Promise' provides no match for the signature '(): void'. [2345]

Example

useEffect(async () => {
  await ...
})

Judging by what I've googled async function inside useEffect is a valid option?

@rauldeheer

This comment has been minimized.

Copy link

commented Nov 27, 2018

Hi! You can now easily use the async await syntax with the React useEffect hook with this package. I hope this will help you, and others.

Cheers 🎉 !

@alfonmga

This comment has been minimized.

Copy link

commented Nov 28, 2018

@rauldeheer thanks for the package but I think it would be better if we could use async without add extra dependencies. Anyways I'll use your package for now.

@daryl

This comment has been minimized.

Copy link

commented Dec 17, 2018

Why is this closed? Having issues with this too.

@IljaDaderko

This comment has been minimized.

Copy link
Author

commented Dec 17, 2018

@daryl function within useEffect should not be async by design in react. You either need to implement this logic or use package mentioned by @rauldeheer.

So there are no issues with types, they are actually helping you to catch this incorrect use case.

@mlg87

This comment has been minimized.

Copy link

commented Feb 8, 2019

for anyone else finding themselves here:

const [thing, setThing] = useState(null);

useEffect(() => {
  Api.makeRequest()
    .then(res => {
      // do what you need to do with res here
      setThing(res);
    });
});
@ferdaber

This comment has been minimized.

Copy link
Contributor

commented Feb 8, 2019

A very useful custom hook:

function useAsyncEffect(effect: () => Promise<void | (() => void)>, dependencies?: any[]) {
  return useEffect(() => {
    const cleanupPromise = effect()
    return () => { cleanupPromise.then(cleanup => cleanup && cleanup()) }
  }, dependencies)
}
@yfain

This comment has been minimized.

Copy link

commented May 7, 2019

Instead of this

const doStuff = async () => {...}

useEffect( () => doStuff())

try this:

const doStuff = async () => {...}
useEffect( () => { doStuff() } )

I had the same issue and it helped.

@SanthoshRaju91

This comment has been minimized.

Copy link

commented May 9, 2019

Instead of this

useEffect(async () => {
  await ...
})

try this:

useEffect( {async () => {
  await ...
}} )

I had the same issue and it helped.

This is like your providing object to the useEffect function, BTW I think this is wrong. Objects I think are not represented in this way.

@yfain

This comment has been minimized.

Copy link

commented May 9, 2019

@SanthoshRaju91 I've updated my post. Initially, I put the curly braces in the wrong place. Thanks for noticing.

@SanthoshRaju91

This comment has been minimized.

Copy link

commented May 9, 2019

Let me try this to fix my issue. Thank you for helping us understand the usage of useEffect

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.