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

[nervestaple]

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()

[Gelio]

Good point 👍 Thanks for pointing that out. I will try to fix it in the nearest future.

In the meantime, you can either disable the rule for a specific line or split the declaration of the inner component and the wrapped component into two.

For example,

const WrappedComponent = React.memo((props) => (<div>Hello World</div>));

would become:

const InnerComponent = (props) => (<div>Hello World</div>);
const WrappedComponent = React.memo(InnerComponent);

Then, the hooks should be verified correctly.

[nervestaple]

Nice! Good idea.

[Gelio]

Yesterday I released tslint-react-hooks@1.1.0 which should fix this problem 😄

@nervestaple Could you take a look and verify that the new release solves it for you? If so, then this issue could be closed

[nervestaple]

looks good! thanks!