useHookAtTopLevel
Este conteúdo não está disponível em sua língua ainda.
Diagnostic Category: lint/correctness/useHookAtTopLevel
Since: v1.0.0
Sources:
- Same as:
react-hooks/rules-of-hooks
Enforce that all React hooks are being called from the Top Level component functions.
This rule should be used only in React projects.
To understand why this required see https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level
Examples
Section titled ExamplesInvalid
Section titled Invalidfunction Component1({ a }) { if (a == 1) { useEffect(); }}code-block.js:3:9 lint/correctness/useHookAtTopLevel ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⚠ This hook is being called conditionally, but all hooks must be called in the exact same order in every component render.
1 │ function Component1({ a }) {
2 │ if (a == 1) {
> 3 │ useEffect();
│ ^^^^^^^^^
4 │ }
5 │ }
ℹ For React to preserve state between calls, hooks needs to be called unconditionally and always in the same order.
ℹ See https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level
function Component1({ a }) { if (a != 1) { return; }
useEffect();}code-block.js:6:5 lint/correctness/useHookAtTopLevel ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⚠ This hook is being called conditionally, but all hooks must be called in the exact same order in every component render.
4 │ }
5 │
> 6 │ useEffect();
│ ^^^^^^^^^
7 │ }
8 │
ℹ Hooks should not be called after an early return.
1 │ function Component1({ a }) {
> 2 │ if (a != 1) {
│
> 3 │ return;
│ ^^^^^^^
4 │ }
5 │
ℹ For React to preserve state between calls, hooks needs to be called unconditionally and always in the same order.
ℹ See https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level
Valid
Section titled Validfunction Component1() { useEffect();}