Search for a command to run...
Troubleshooting Invalid Hook Calls (React Minified Error #321)
I am a developer from North Carolina. I have always been fascinated by the internet, and scince high school I have been trying to understand the magic behind it all. ECU Computer Science Graduate
No comments yet. Be the first to comment.
As a technical person, it’s always been easy for me to focus on hard skills, numbers, and statistics. This worked well through school, personal projects and smaller teams; environments where I could accomplish a ton on my own. But now I’m working in ...
I recently wrote an article detailing how to embed Yotpo’s loyalty widgets on a headless site. As I was writing it, I thought “there is no way that the reviews widget will be this troublesome”. I was wrong, it was just as troublesome. For 2 primary r...
Currently, I am working on turning a Liquid-based Shopify store into a headless Hydrogen-based store. Part of this was transferring Yotpo embedded forms to the new headless site. As for the loyalty and referrals portion of Yotpo, you can embed these ...
Within Shopify, store owners are restricted from having full control of their store’s checkout page. This is a safety feature on Shopify’s end, protectecting store owners and customers from accidentally (or purposely) exposing private information. Th...
HSTS is HTTPS Strict-Transport-Security. It enforces that only HTTPS is used across your web application, preventing unencrypted traffic being monitored and collected by unwanted entities. HSTS in Hydrogen It can be enabled in your Hydrogen app via r...
The infamous "Invalid Hook Call" error can be a massive headache, especially in complex applications using large JavaScript files. The reason this error is obnoxious is that it is found in runtime, so you will not know it exists until you run your application.
In this article, we dive into common causes for this error, some examples, and fixes.
Error Code in Development:
Invalid hook call. Hooks can only be called inside of the body of a function component.
Error Code in Production (Minified):
Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321
This is likely one of the errors you saw in your console that led you to this article.
These errors often stem from breaking one of React’s Hook Rules, or mismanaging your React setup.
Breaking the Rules of Hooks (most common):
Mismatching React Versions:
Duplicate React Copies:
Calling Hooks Outside React Contexts:
Check Your Hook Placement: Ensure hooks are only used in:
React function components
Custom hooks
See bottom of article for all hook rules
Validate React Versions: Run npm list react react-dom to confirm versions match.
Inspect for Duplicate React Copies: Run npm ls react to ensure only one React version is installed.
Examine the Stack Trace: The browser console often points to the file and line number (roughly) causing the issue.
Here’s an example of my code that was violating the Rules of Hooks by calling useLocation() in a regular function, which is not a React component:
export function links() {
const location = useLocation(); // ❌ Invalid Hook Call
return [{ rel: 'canonical', href: `https://example.com${location.pathname}` }];
}
Why This Fails:
useLocation() can only be called in a React function component or a custom hook, not in regular functions.Move the useLocation() call to a valid React component and pass its value down:
// Corrected links function
export function links(pathname) {
return [{ rel: 'canonical', href: `https://example.com${pathname}` }];
}
// Valid React component
export default function App() {
const location = useLocation(); // ✅ Valid Hook Call
return (
<head>
<Links pathname={location.pathname} />
</head>
);
}
Why This Works:
useLocation hook is now called within a valid React component (App), and its result is passed to the links function.If you are getting this error, usually it is because you are breaking one of the below rules.
Hooks should not be placed in conditionals or loops.
// ❌ Wrong
// Hook is placed within conditional, loop, helper function etc
if (someCondition) {
useEffect(() => { /* logic here */ }, []);
}
// ✅ Correct
useEffect(() => {
if (someCondition) {
/* logic here */
}
}, []);
Hooks cannot be used in regular JavaScript functions.
Include all variables used inside useEffect or other hooks as dependencies.
// ❌ Wrong
useEffect(() => {
console.log(count); // count is missing in dependencies
}, []);
// ✅ Correct
useEffect(() => {
console.log(count);
}, [count]);
Extract shared logic into custom hooks.
// ✅ Custom Hook
function useFetchData(url) {
const [data, setData] = useState();
useEffect(() => {
fetch(url).then(response => response.json()).then(setData);
}, [url]);
return data;
}
This is more so advice than a rule, but it will massively clean up your code if you understand how to abstract reused logic into your React hooks.
The order of hooks must be consistent. Here are some ways hooks can remain inconsistent:
Using hooks in conditionals, loops or functions
Dynamically loading components that contain hooks (based on screen size, variables etc)
Returning from a function before a potential hook call
// Hook usage inside a conditional (WRONG)
// ❌ Hook skips when `isMobile` is false
if (isMobile) {
useEffect(() => {
console.log("This runs only if isMobile is true.");
}, [isMobile]);
}
// Hook usage inside a loop (WRONG)
// ❌ Hook order depends on the array length and iteration
items.forEach((item) => {
useState(item);
});
// Hook usage inside a nested function (WRONG)
// ❌ Hook order breaks because it's inside a function
function handleNested() {
useState('nested');
}
if (items.length > 3) {
handleNested();
}
// Dynamically loaded components based on screen size or conditions (WRONG)
// ❌ Hook order changes dynamically
if (isMobile) {
useEffect(() => {
console.log("Conditional rendering logic with hooks");
}, []);
}
// Returning early from the component before a hook call (WRONG)
// ❌ Skips subsequent hooks
if (!items || items.length === 0) {
return <div>No items</div>;
// hook would be in function under this conditional
}
// Correct usage
// ✅ Conditional logic inside the hook
useEffect(() => {
if (isMobile) {
console.log("Do something when isMobile is true.");
}
}, [isMobile]);
use Prefix for Custom HooksThis helps distinguish hooks from regular functions.
// ✅ Custom Hook
function useCustomHook() {
return useState();
}
Avoid using hooks in unrelated files or external utilities.
Hooks cannot be called within asynchronous code directly.
// ❌ Wrong
useEffect(async () => {
const data = await fetchData();
}, []);
// ✅ Correct
useEffect(() => {
fetchData().then(data => setData(data));
}, []);
Hooks like useContext require a valid context provider.
// ✅ Correct
const MyContext = React.createContext();
function MyComponent() {
const value = useContext(MyContext); // Valid
}
React state must be updated using the setState function.
// ❌ Wrong
state.value = 42;
// ✅ Correct
setState({ value: 42 });
When debugging an "Invalid Hook Call" error:
Check your hook usage against React’s Hook Rules.
Validate your project setup for version mismatches or duplicate React copies.
Review stack traces and error messages for insights.
By following this guide, you can avoid this error, and ensure smooth development in your React projects.