React Hook called conditionally - Rules of Hooks Fix (2026) | Tutorials Logic

What is This Error?

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.

Error Message:

React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render.

Common Causes

Calling a Hook inside an if/else statement
Calling a Hook inside a for or while loop
Calling a Hook inside a nested function
Calling a Hook after an early return statement
Calling a Hook inside a try/catch block

Quick Fix (TL;DR)

Quick Solution

// ❌ 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
}

Common Scenarios & Solutions

Scenario 1: Hook Inside if Statement

Problem

function UserProfile({ showDetails }) {
  if (showDetails) {
    const [details, setDetails] = useState({}); // ❌ Conditional hook!
    useEffect(() => { fetchDetails(); }, []); // ❌ Conditional hook!
  }
  return Profile;
}

Solution

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 {showDetails && {details.bio}
};
}

Scenario 2: Hook After Early Return

Problem

function Dashboard({ user }) {
  if (!user) return Please log in; // Early return
  
  const [data, setData] = useState([]); // ❌ Hook after return!
  useEffect(() => { fetchData(); }, []); // ❌ Hook after return!
  
  return {data.map(item => {item}
)};
}

Solution

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 Please log in; // Return AFTER hooks
  
  return {data.map(item => {item}
)};
}

Scenario 3: Hook Inside a Loop

Problem

function ItemList({ items }) {
  return items.map(item => {
    const [selected, setSelected] = useState(false); // ❌ Hook in loop!
    return  setSelected(!selected)}>{item};
  });
}

Solution

// ✅ Extract to a separate component
function Item({ item }) {
  const [selected, setSelected] = useState(false); // ✅ Top level
  return (
     setSelected(!selected)}>
      {item} {selected ? '✓' : ''}
    
  );
}

function ItemList({ items }) {
  return items.map(item => );
}

Scenario 4: Conditional Custom Hook

Problem

function App({ isAdmin }) {
  if (isAdmin) {
    const adminData = useAdminData(); // ❌ Conditional custom hook!
  }
}

Solution

// ✅ 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;
}

Best Practices to Avoid This Error

Always call Hooks at the top level - Before any conditions, loops, or returns
Put conditions inside Hooks - Not the other way around
Extract components for loops - Each list item should be its own component
Move early returns after all Hooks - All hooks must run before any return
Use eslint-plugin-react-hooks - Automatically catches Rules of Hooks violations
Pass conditions as parameters - Let custom hooks handle conditions internally
Only call Hooks in React functions - Not in regular JS functions or class components