gelio/tslint-react-hooks

TSLint rule for detecting invalid uses of React Hooks

TSLint Rules of Hooks

A TSLint rule that enforces the Rules of Hooks for React hooks.

The rule is based on an ESLint plugin for react hooks.

Features

• detects using React hooks inside potentially-conditional branches:
  • if statements
  • short-circuit conditional expressions (&&, ||)
  • ternary expressions
  • loops (while, for, do ... while)
  • functions that themselves are not custom hooks or components
• detects using React hooks in spite of an early return
• support for detecting hooks from namespaces other than React (e.g. MyHooks.useHook) (optional)

Installation

First, install the rule:

npm install tslint-react-hooks --save-dev

Then, enable the rule by modifying tslint.json:

{
  "extends": [
    // your other plugins...
    "tslint-react-hooks"
  ],
  "rules": {
    // your other rules...
    "react-hooks-nesting": "error"
  }
}

To use report rule violations as warnings intead of errors, set it to "warning".

Options

While the rule works fine out-of-the-box, it can be customized. To specify options, use the following syntax when modifying tslint.json:

{
  "extends": [
    // your other plugins...
    "tslint-react-hooks"
  ],
  "rules": {
    // your other rules...
    "react-hooks-nesting": {
      "severity": "error", // "error", "warning", "default" or "off"
      "options": {
        // options go here
      }
    }
  }
}

Available options

• "detect-hooks-from-non-react-namespace" - when set to true, violations will be also reported hooks accessed from sources other than the React namespace (e.g. MyHooks.useHook will be treated as a hook).

  By default, only direct calls (e.g. useHook) or calls from React namespace (e.g. React.useState) are treated as hooks.

Have an idea for an option? Create a new issue.

Workarounds

For some arrow functions/function expressions, the rule has no way to determine whether those are a component, a hook, both of which could contain hook calls, or a regular function that should not contain hook calls.

const withHoc = <TProps extends object>(Component: ComponentType<TProps>) => (
  props: TProps,
) => {
  const [state] = useState();
  return <Component {...props} />;
};

The workaround in those cases is to use a named function expression:

const withHoc = <TProps extends object>(Component: ComponentType<TProps>) =>
  function WrappedComponent(props: TProps) {
    const [state] = useState();
    return <Component {...props} />;
  };

Naming the function like a component (in PascalCase) unambiguously lets the rule treat the function as a component.

False positives and not-covered cases

There are some cases that seem hard to analyze and may result in false positives or false negatives.

In such cases, disable the rule for a specific line using the following comment:

// tslint:disable:react-hooks-nesting
useEffect(() => {});

Looping over static arrays

The rule may report false positives, for example in:

function MyComponent() {
  const array = [1, 2, 3];

  array.forEach(value => {
    React.useEffect(() => console.log(value));
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ [A hook cannot be used inside of another function]
  });
}

The useEffect hook will be called unconditionally and the call-order will be the same between renders.

Using renamed hooks (that do not start with use)

The rule only treats functions that start with use as hooks. Therefore, renaming the hook will result in avoiding the rule:

const renamedUseState = React.useState;

function MyComponent() {
  const [state, setState] = renamedUseState(0);
}

Unconditional nesting

Unconditional nesting, for example:

function MyComponent() {
  if (true) {
    const variableThatCannotBeLeaked = useContext(SomeContext);
    useEffect(() => {
      console.log(variableThatCannotBeLeaked);
    });
  }

  return <div>Text</div>;
}

is treated as conditional nesting. It seems hard to verify if the condition is in fact a constant, therefore such a situation will always result in a rule violation.

In situations where such an if statement was used to create an additional block scope, use the block scope directly:

function MyComponent() {
  {
    const variableThatCannotBeLeaked = useContext(SomeContext);
    useEffect(() => {
      console.log(variableThatCannotBeLeaked);
    });
  }

  return <div>Text</div>;
}

Development

After pulling the repository, make sure to run

npm install

The source code for the rule is located in the src directory.

For more information about the developing custom TSLint rules, take a look at TSLint's documentation.

Testing the rule

Run

npm run test

to compile the rule and run automatic TSLint tests.

They are located in the test directory.

Author

The author of this rule is Grzegorz Rozdzialik.

tslint-react-hooks's Issues

Confused with rules

Hi, thank you for your work. I'm confused with some rules.
My IDE report errors for some files and not on others, I have the same idea in two files, in the first file i don't have any errors, but in the second i have errors. My code is wrong or not?

Wrong message for anonymous functions

Consider the following scenario:

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 <div>{myState}</div>
})

const WrappedComponent = function() {
    const [state, setState] = React.useState();
    React.useEffect((
        expensiveState.lazyImport().then(s => setState(s));
    ), []);
    
    const Wrapper = React.useCallback(() => state ? <Component {...state}>/> : <Loading/>, [state])
    return <Wrapper/>
}

ReactDOM.render(<WrappedComponent />, ...)

It is in fact a wrong function React component declaration, as React component functions must be named. However, I'm arguing that we should provide a meaningful and relevant error message, analogous to the eslint plugin's.

Rule reports false positive for anonymous component returned from a function

const createMyComponent = () => {
  return () => {
    const [myState] = React.useState(() => 42);
    return <>something</>
  };
};

reports a tslint error but the hook is actually used in the root scope.

(Thanks a lot for your work on this project!)

[Bug] Unable to enable "warning" mode

Hi,

I've introduced this library to one of my projects. However, I'm having an issue with my config` file. It successfully shows errors, but it does not warn. Therefore I am unable to successfully run my app with "warning" mode enabled, because it continues showing errors in warning mode.

In my tslint.json, I have the following:

  "extends": [
    "tslint-react-hooks",
  ],
   ...
  "rules": {
    "react-hooks-nesting": "warning",
   }

package versions:
"tslint-react-hooks": "2.1.1",
"react": "16.8.4",
"typescript": "3.1.5",

Any help would be greatly appreciated!

Detect use of useState inside useEffect

This will cause lots of rerender, without warning.

Support globbing import style

For commonly used utilities, I often use this style:

import * as A from '../animate';
// ...later
if (something) { return null; }
// ...later
const [sceneRef, sceneFade] = A.useAnim({
    anims: [A.anims.fadeOut, A.anim.slow],
});

In this case, A.useAnim is not recognized as a hook. Changing the import style to import { useAnim } from '../animate'; works, but I would prefer not to use this style everywhere, and wouldn't be able to guarantee that all other project members remember that hooks need to be imported in this way.

extend supported component decorators

Currently only React.forwardRef and React.memo are supported. If using Mobx-React, the observer HOC triggers this error and requires overrides in the file. It would be good if we could add observer to the allowed list.

Report error in nextjs file

This is a file in nextjs's pages folder,
paegs/index.tsx:

import Header from '../../components/header';
import axios from 'axios';
import { useEffect, useState } from 'react';

function main() {
  const [data, setData] = useState(null as any); // error here

  useEffect(() => { // error here 
    async function fetchData() {
      try {
        const resp = await axios.post('/xxx', { xxx });
        setData(resp.data);
      } catch (e) {
        console.error(e);
        setData({ error: e && e.toString() });
      }
    }

    fetchData();
  }, []);

  function renderData() {
    if (!data) {
      return 'no data';
    }
    const dataStr = JSON.stringify(data);
    return dataStr;
  }

  return (
    <main>
      <Header />
      {renderData()}
    </main>
  );
}

export default main;

Got an error: A hook cannot be used inside of another function (react-hooks-nesting)

Integrate this to tslint-react

Hey! 👋

Thank you for great work, what do you think about to contribute this to tslint-react? palantir/tslint-react#186

Not warning about custom hooks as properties

This should warn

if (cond) {
    MyHooks.useHook();
}

like this does

if (cond) {
    React.useEffect();
}

independently-controllable rules

I'd like to disable A hook cannot be used inside of another function, but keep all the others (e.g. A hook cannot appear inside an if statement), but they seem to be all fall under the rule react-hooks-nesting.

Can rules be independently controlled?

[Feature Request] Exhaustive deps lint rule integration in tslint react hook

Recently Dan published the new rule for react hooks...is it possible to add that feature in the tslint hook?
facebook/react#14920

tslint-react-hooks rules not working in my atom

package.json

test.tsx

tslint.json

What's wrong with that

from palantir/tslint-react#186

shows as warning regardless of rules declaration

I have setup my tslint.json like this:

{
  "defaultSeverity": "error",
  "extends": ["tslint-config-airbnb", "tslint-react-hooks"],
  "jsRules": {},
  "rules": {
    "align": false,
    "import-name": false,
    "no-boolean-literal-compare": false,
    "no-this-assignment": false,
    "react-hooks-nesting": "error",
    "variable-name": false,
    "ter-indent": false,
    "ter-arrow-parens": false,
    "semicolon": false,
    "strict-boolean-expressions": false,
    "space-before-function-paren": false,
    "trailing-comma": [
      true,
      {
        "multiline": {
          "objects": "always",
          "arrays": "always"
        },
        "esSpecCompliant": true
      }
    ]
  },
  "rulesDirectory": []
}

but when I use hooks improperly it shows as a warning.

I would expect this to be underlined in red as an error.

Early return?

This should be error right?

    if (thing) {
        return;
    }

    const [state, setState] = useState(null);

Provide support for .tsx files

I'm using create-react-app with typescript, I have installed the tsling plugin and made all related stuff but it doesn't work with .tsx files.
If I change the file name to .ts it will identify the errors though.

Doesn't work with React.memo or React.forwardRef (maybe others)

I'm getting A hook cannot be used inside of another function [react-hooks-nesting] triggered on components wrapped in React.memo() and React.forwardRef()

Supporting option to whitelist non-hook functions