50 lines
1.6 KiB
Plaintext
50 lines
1.6 KiB
Plaintext
== Why is this an issue?
|
|
|
|
React relies on the order in which Hooks are called to correctly preserve the state of Hooks between multiple `useState` and `useEffect` calls. This means React Hooks should be called in the same order each time a component renders and should not be called inside loops, conditions, or nested functions.
|
|
|
|
Additionally, this rule ensures that the Hooks are called only from React function components or custom Hooks.
|
|
|
|
[source,javascript,diff-id=1,diff-type=noncompliant]
|
|
----
|
|
function Profile() {
|
|
const [ordersCount, setOrdersCount] = useState(0);
|
|
if (ordersCount !== 0) {
|
|
useEffect(function() { // Noncompliant: Hook is called conditionally
|
|
localStorage.setItem('ordersData', ordersCount);
|
|
});
|
|
}
|
|
|
|
return <div>{ getName() }</div>
|
|
}
|
|
|
|
function getName() {
|
|
const [name] = useState('John'); // Noncompliant: Hook is called from a JavaScript function, not a React component
|
|
return name;
|
|
}
|
|
|
|
----
|
|
|
|
Instead, always use Hooks at the top of your React function, before any early returns.
|
|
|
|
[source,javascript,diff-id=1,diff-type=compliant]
|
|
----
|
|
function Profile() {
|
|
const [ordersCount, setOrdersCount] = useState(0);
|
|
useEffect(function() {
|
|
if (ordersCount !== 0) {
|
|
localStorage.setItem('ordersData', ordersCount);
|
|
}
|
|
});
|
|
|
|
const [name] = useState('John');
|
|
return <div>{ name }</div>
|
|
}
|
|
----
|
|
|
|
== Resources
|
|
|
|
=== Documentation
|
|
|
|
* React Documentation - https://react.dev/warnings/invalid-hook-call-warning#breaking-rules-of-hooks[Breaking Rules of Hooks]
|
|
* React Documentation - https://legacy.reactjs.org/docs/hooks-rules.html[Rules of Hooks]
|