The "Invalid hook call" warning occurs when React Hooks are called in an invalid context. This typically happens due to mismatched React versions, duplicate React installations, calling Hooks outside React components, or breaking the Rules of Hooks.
# Check for duplicate React
npm ls react
# Fix duplicate React
npm dedupe
# or
rm -rf node_modules package-lock.json
npm install
# Ensure matching versions
npm install react@latest react-dom@latestThe most common cause "” having multiple copies of React in your project.
# Check for multiple React versions
npm ls react
# or
yarn why react
# You might see:
# ├── react@18.2.0
# └─┬ some-library@1.0.0
# └── react@17.0.2 ← Duplicate!# Solution 1: Dedupe
npm dedupe
# Solution 2: Clean install
rm -rf node_modules package-lock.json
npm install
# Solution 3: Use resolutions (package.json)
{
"resolutions": {
"react": "18.2.0",
"react-dom": "18.2.0"
}
}
# Solution 4: Use overrides (npm 8.3+)
{
"overrides": {
"react": "18.2.0",
"react-dom": "18.2.0"
}
}// package.json
{
"dependencies": {
"react": "18.2.0",
"react-dom": "17.0.2" // ❌ Mismatched version!
}
}# Install matching versions
npm install react@18.2.0 react-dom@18.2.0
# Or use latest for both
npm install react@latest react-dom@latest// ❌ Regular function, not a component
function fetchData() {
const [data, setData] = useState(null); // Invalid hook call!
// ...
}
// ❌ Called outside component
const data = useState(null); // Invalid hook call!
function App() {
return <div>{data}</div>;
}// ✅ Create a custom hook (starts with "use")
function useFetchData() {
const [data, setData] = useState(null);
// ...
return data;
}
// ✅ Call hooks inside component
function App() {
const [data, setData] = useState(null); // ✅ Inside component
return <div>{data}</div>;
}# When developing a library with npm link
cd my-library
npm link
cd ../my-app
npm link my-library # Creates duplicate React!# Link React from the app to the library
cd my-app/node_modules/react
npm link
cd ../react-dom
npm link
cd ../../../my-library
npm link react react-dom
# Or use peerDependencies in library
{
"peerDependencies": {
"react": ">=16.8.0",
"react-dom": ">=16.8.0"
}
}The most common causes are: duplicate React installations in node_modules, mismatched React and React-DOM versions, calling Hooks outside React components, or breaking the Rules of Hooks.
Run npm ls react or yarn why react in your terminal. If you see multiple versions listed, you have duplicate React installations that need to be resolved.
Try npm dedupe first. If that doesn't work, delete node_modules and package-lock.json, then run npm install. You can also use resolutions or overrides in package.json to force a single React version.
No. Hooks can only be called inside React function components or custom hooks (functions starting with "use"). Regular utility functions cannot use Hooks.
npm link can create duplicate React installations because the linked library has its own node_modules with React. Link React from your app to your library to share the same React instance.
Explore 500+ free tutorials across 20+ languages and frameworks.