Cleanup Function in useEffect using Typescript

user_7557079 0
Viewed 1688

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?

react-hooks typescript reactjs
1 Answers

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,
}]
user_109599400
Related