React is complaining about code below, saying it useEffect
is being called conditionally:
import React, { useEffect } from "react";
import ReactDOM from "react-dom";
function App() {
const documentCounts = {};
const invertedIndexes = {};
for (const term of []) {
if (!invertedIndexes[term]) continue;
// The offending code is the loop below
for (const arr of invertedIndexes[term]) {
const documentIndex = arr[0];
if (!documentCounts[documentIndex]) documentCounts[documentIndex] = 1;
else ++documentCounts[documentIndex];
}
}
useEffect(() => {});
return (
<div className="App">
<h1>Hello World</h1>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return? react-hooks/rules-of-hooks
But to me it seems like there is no conditional call to useEffect
– the loop just modifies local variables. Does anyone happen to know what the problem here is?
(the pointless variables are what I boiled down my original code down to to try to pinpoint the issue)
Check official documentation on the hooks: Always use Hooks at the top level of your React function.