🔧 Error Fixes

Mar 16, 2026 · 1 min read

React: Rendered Fewer Hooks Than Expected — How to Fix It

Rendered fewer hooks than expected. This may be caused by an accidental early return statement.

You have a conditional return before some hooks.

Fix 1: Move hooks before any returns

// ❌ Early return before hook
function Profile({ userId }) {
  if (!userId) return <p>No user</p>;
  const [user, setUser] = useState(null);  // Error!
}

// ✅ All hooks first, then conditionals
function Profile({ userId }) {
  const [user, setUser] = useState(null);
  if (!userId) return <p>No user</p>;
}

Fix 2: Don’t put hooks in conditions

// ❌ Conditional hook
if (showExtra) {
  const [extra, setExtra] = useState(null);
}

// ✅ Always call the hook
const [extra, setExtra] = useState(null);