The "React Hook is called conditionally" error occurs when you call a React Hook inside a conditional statement, loop, or nested function. React requires that Hooks are always called in the same order on every render "” this is one of the fundamental Rules of Hooks.
// ❌ Problem "” Hook inside condition
function App({ isLoggedIn }) {
if (isLoggedIn) {
const [user, setUser] = useState(null); // Error!
}
}
// ✅ Solution "” always call Hook at top level
function App({ isLoggedIn }) {
const [user, setUser] = useState(null); // Always called
if (!isLoggedIn) return null; // Condition after hooks
}function UserProfile({ showDetails }) {
if (showDetails) {
const [details, setDetails] = useState({}); // ❌ Conditional hook!
useEffect(() => { fetchDetails(); }, []); // ❌ Conditional hook!
}
return <div>Profile</div>;
}function UserProfile({ showDetails }) {
// ✅ Always call hooks at the top level
const [details, setDetails] = useState({});
useEffect(() => {
if (showDetails) { // ✅ Condition inside the hook
fetchDetails().then(setDetails);
}
}, [showDetails]);
return <div>{showDetails && <p>{details.bio}</p>}</div>;
}function Dashboard({ user }) {
if (!user) return <p>Please log in</p>; // Early return
const [data, setData] = useState([]); // ❌ Hook after return!
useEffect(() => { fetchData(); }, []); // ❌ Hook after return!
return <div>{data.map(item => <p>{item}</p>)}</div>;
}function Dashboard({ user }) {
// ✅ All hooks BEFORE any return
const [data, setData] = useState([]);
useEffect(() => {
if (user) fetchData().then(setData); // Condition inside effect
}, [user]);
if (!user) return <p>Please log in</p>; // Return AFTER hooks
return <div>{data.map(item => <p>{item}</p>)}</div>;
}function ItemList({ items }) {
return items.map(item => {
const [selected, setSelected] = useState(false); // ❌ Hook in loop!
return <div onClick={() => setSelected(!selected)}>{item}</div>;
});
}// ✅ Extract to a separate component
function Item({ item }) {
const [selected, setSelected] = useState(false); // ✅ Top level
return (
<div onClick={() => setSelected(!selected)}>
{item} {selected ? '✓' : ''}
</div>
);
}
function ItemList({ items }) {
return items.map(item => <Item key={item.id} item={item} />);
}function App({ isAdmin }) {
if (isAdmin) {
const adminData = useAdminData(); // ❌ Conditional custom hook!
}
}// ✅ Always call the hook, pass condition as parameter
function App({ isAdmin }) {
const adminData = useAdminData(isAdmin); // Hook decides internally
}
// Inside useAdminData:
function useAdminData(isAdmin) {
const [data, setData] = useState(null);
useEffect(() => {
if (isAdmin) fetchAdminData().then(setData); // Condition inside
}, [isAdmin]);
return data;
}React relies on the order of Hook calls to associate state with the correct Hook. If Hooks are called conditionally, the order can change between renders, causing React to mix up which state belongs to which Hook.
Always call the Hook, but put the condition inside it. For useEffect, add the condition inside the callback. For custom hooks, pass the condition as a parameter.
No. Instead, extract the loop body into a separate component and use Hooks inside that component. Each component instance has its own Hook state.
It's an ESLint plugin that enforces the Rules of Hooks. It catches conditional hooks, missing dependencies in useEffect, and other common Hook mistakes before runtime.
No. All Hook calls must come before any return statement. Move your early returns to after all Hook declarations.
Explore 500+ free tutorials across 20+ languages and frameworks.