Confused with rules
BenevidesLecontes opened this issue · comments
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?
Hooks can only be used inside function components and custom hooks. There are 2 heuristics in place for detecting those entities:
- If a function starts with a capital letter (as components are usually named, e.g.
MyComponent) then the rule assumes that the function is a function component. - If a function starts with
useand then a capital letter (as custom hooks are usually named and as the React team suggests to name custom hooks, e.g.useCustomHook) then the rule assumes that the function is a custom hook.
If those two rules above do not apply, then a rule violation is reported as TSLint assumes that a hook is used inside a regular function, which is not allowed.
Both screenshots contain functions that look like custom hooks, as they are composed of other hooks and do not render anything. If you name them as custom hooks are suggested to be named (e.g. useLastBordereaus). For more information on building custom hooks, take a look at the hooks documentation.
This TSLint rule closely matches the logic that the ESLint rule from the React team enforces:
https://reactjs.org/docs/hooks-faq.html#what-exactly-do-the-lint-rules-enforce
Let me know if you have any other questions 🙂
Your component is named dashboard - starts with a lowercase letter 🙂 To follow the convention, please use Dashboard 🙂
@Gelio I saw that in the last minute that I reopened the issue, that's why i closed the issue and deleted the message. 🙂
No worries 🙂 I did not notice you removed the comment before posting mine