Violation of React Hooks rules?

[filipjnc]

I like this library a lot because of its simplicity. However it seems that it breaks the most important React Hooks rule: never use outside React Function or React Custom Hook. Currently I get a linter error like this when using const [var, setVar] = useState(false);

React Hook "useLocalStorage" is called in function "store" which is neither a React function component or a custom React Hook function.eslint(react-hooks/rules-of-hooks)

I reckon in one of the next React versions this will even prevent you from building the project.

[yamalight]

The store hooks are only used within React components later on. Linter is just not "smart" enough to trace it down.

[filipjnc]

Thanks for the reassurance, it makes sence.

An workaround would be to rename the store function into useStore to make the linter think it's a custom hook.

[jmcudd]

This seems to still be an issue in the latest version of Create React App. Are there any clear workarounds to this for CRA? It seems like the only way to fix it is to disable that rule.

/* eslint react-hooks/rules-of-hooks: 0 */

[yamalight]

@jmcudd I'm not aware of any workarounds that'd work with eslint, sorry. disabling the rule is the only option 🤔

[filipjnc]

An workaround is to name the store starting with “use”. Then the linter thinks it’s a custom hook, where hooks are allowed.

[jmcudd]

ah, that works! Thanks for the clarification.