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.

Sign up for GitHub

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

Jump to bottom

Allow void operator as a statement for React Hooks #56

Merged
merged 1 commit into from
Apr 14, 2021
Merged

Allow void operator as a statement for React Hooks #56

merged 1 commit into from
Apr 14, 2021

Conversation

arcticicestudio
Copy link
Contributor

Resolves #55

@arcticicestudio
Allow void operator as a statement for React Hooks
cce394d 
To run `async` code in a React `useEffect` Hook [1] the official React
Hook FAQ section about how to fetch data [2] recommends and shows in a
demo [3] how to define a scoped fat arrow function and run it
immediately. Unfortunately this collided with the
`@typescript/no-floating-promises` [4] rule because the returned
`Promise` of the called function must not be handled anymore.

```tsx
useEffect(() => {
  const init = async () => {
    try {
      const data = await fetchData();
      setInitialized(isInit);
      if (data) initStores(data);
    } catch (err) {
      handleError(err);
    }
  };
  // This will trigger the "@typescript/no-floating-promises" rule because the returned "Promise" is not handled.
  init();
}, [fetchData, handleError, initStores, setInitialized]);
```

Explicitly disabling the rule for these specific code lines would have
been an option, but it is recommended to use the `void` operator
instead [5].

```tsx
// ...
// This will trigger the "no-void" rule because the "void" operator is currently not allowed as a statement.
void init();
// ...
```

However, the `no-void` [6] rule di not allow the `void` operator to be
used as statement which resulted in this rule to also throw an error.
To resolve both problems, the `allowAsStatement` option [7] of the
`no-void` rule has been enabled.

Also see typescript-eslint/typescript-eslint#1184 [8] where this
solution is also recommended by one of the
`@typescript-eslint` package maintainers.

[1]: https://reactjs.org/docs/hooks-reference.html#useeffect
[2]: https://reactjs.org/docs/hooks-faq.html#how-can-i-do-data-fetching-with-hooks
[3]: https://codesandbox.io/s/jvvkoo8pq3
[4]: https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/no-floating-promises.md
[5]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/void
[6]: https://eslint.org/docs/rules/no-void
[7]: https://eslint.org/docs/rules/no-void#allowasstatement
[8]: typescript-eslint/typescript-eslint#1184

Co-authored-by: Sven Greb <[email protected]>

GH-55
@arcticicestudio arcticicestudio added this to the 0.11.0 milestone Apr 14, 2021
@arcticicestudio arcticicestudio merged commit af9c38b into main Apr 14, 2021
@arcticicestudio arcticicestudio deleted the improvement/gh-55-allow-void-operator-as-statement branch April 14, 2021 07:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@svengreb svengreb svengreb approved these changes

Assignees
No one assigned
Labels
scope-compatibility scope-dx target-pkg-eslint-base type-improvement
Projects
None yet
Milestone
0.11.0
Development

Successfully merging this pull request may close these issues.

Allow void operator as a statement for React Hooks
2 participants
@arcticicestudio @svengreb