Gelio / Gelio/tslint-react-hooks

Wrong message for anonymous functions

Open
#29 2 comments 0 reactions 0 assignees View on GitHub
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

{myState}

})

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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.