Cleanup Function in useEffect using Typescript

Question

I'm using React Typescript and I have the following warning:

warning Missing return type on function

This is my code:

 useEffect(() => {
    window.addEventListener('scroll', fetchAllFriends, { once: true })

    return () => {
      window.removeEventListener('scroll', fetchAllFriends)
    }
  }, [fetchAllFriends])

Does that mean that we need a return (): void on every cleanup function inside useEffect?

It means that your linter has a rule that you disagree with. As I likewise disagree with that rule, I would turn the rule off, but it is your call. — Aluan Haddad
– Aluan Haddad, Commented May 22, 2020 at 4:30

wentjun · Accepted Answer · 2020-05-22 04:46:05Z

2

The reason why the above warning is happening is probably because you have activated following ESLint rule:

@typescript-eslint/explicit-function-return-type

To answer your question, you can set the return type as void.

Alternatively, you can turn the above rule off, as you don't always have to explicitly set the return type of all of your methods as TypeScript can usually infer the return types based on what is returned on the method. Personally, I turn it off for most of my projects.

getUser() {
  return service.getUser();
}

For instance, with the above scenario, TypeScript should be able to infer the return type without the need the specify the return type.

EDIT: as mentioned by @paolostyle in the comments, if you wish to keep the rule, but disable the rule for your scenario, you can toggle the allowExpressions option and set it to true.

"@typescript-eslint/explicit-function-return-type": ["error", {
  "allowExpressions": true,
}]

edited May 22, 2020 at 4:46

answered May 22, 2020 at 4:35

wentjun

42.8k10 gold badges108 silver badges116 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

paolostyle Over a year ago

Alternatively you could also add allowExpressions: true to that rule config. That will disable this rule for inline anonymous functions, like the cleanup function in useEffect. However I'm personally not a fan of this rule and I'd suggest disabling it altogether.

wentjun Over a year ago

Ahh..! Good tip. I have never explored that option as I always turn off that rule 🤣

Collectives™ on Stack Overflow

Cleanup Function in useEffect using Typescript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related