Gelio / Gelio/tslint-react-hooks
Wrong message for anonymous functions
- Dominant language
- TypeScript
- Stars
- 221
- Forks
- 7
- PR merge metrics
- No merged PRs in 30d
Description
Consider the following scenario:
```ts
const Component = observer(function (props: IProps)) { /* Note that this is, in fact, an anonymous function */
const { useHook } = props;
const { myState } = useHook(); /* A hook cannot be used inside of another function */
return
})
const WrappedComponent = function() {
const [state, setState] = React.useState();
React.useEffect((
expensiveState.lazyImport().then(s => setState(s));
), []);
const Wrapper = React.useCallback(() => state ? /> : , [state])
return
}
ReactDOM.render(, ...)
```
It is in fact a wrong function React component declaration, as React component functions [must be named](https://github.com/facebook/react/blob/51947a14bb24bd151f76f6fc0acdbbc404de13f7/packages/eslint-plugin-react-hooks/src/RulesOfHooks.js#L48). However, I'm arguing that we should provide a meaningful and relevant error message, [analogous to the eslint plugin's](https://github.com/facebook/react/blob/51947a14bb24bd151f76f6fc0acdbbc404de13f7/packages/eslint-plugin-react-hooks/src/RulesOfHooks.js#L479).
Contributor guide
Research direction
Locate the TSLint rule that reports invalid React Hook usage and reproduce the anonymous-function example from the issue. Compare its diagnostic with the linked React ESLint rule, then verify that the reported message identifies the anonymous function and explains the invalid component declaration.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- tooling
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100