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

// ❌ WRONG - useState inside conditional
function MyComponent({ isLoggedIn }) {
  if (isLoggedIn) {
    const [user, setUser] = useState(null); // Error!
  }
  // ...
}

// ✅ CORRECT - useState at top level
function MyComponent({ isLoggedIn }) {
  const [user, setUser] = useState(null);

  if (isLoggedIn) {
    // Use the state here
  }
  // ...
}

// ❌ WRONG
function UserProfile({ showGreeting }) {
  if (showGreeting) {
    const [greeting, setGreeting] = useState('Hello'); // Error!
  }
  return <div>Profile</div>;
}

// ✅ CORRECT - Hook always called, usage is conditional
function UserProfile({ showGreeting }) {
  const [greeting, setGreeting] = useState('Hello');

  return (
    <div>
      {showGreeting && <h1>{greeting}</h1>}
      <div>Profile</div>
    </div>
  );
}

// ❌ WRONG
function Dashboard({ userType }) {
  if (userType === 'admin') {
    const [adminData, setAdminData] = useState([]); // Error!
  }
  return <div>Dashboard</div>;
}

// ✅ CORRECT - Separate component
function AdminPanel() {
  const [adminData, setAdminData] = useState([]);
  // Admin-specific logic
  return <div>Admin Panel: {adminData.length} items</div>;
}

function Dashboard({ userType }) {
  return (
    <div>
      <h1>Dashboard</h1>
      {userType === 'admin' && <AdminPanel />}
    </div>
  );
}

// ❌ WRONG
function DataLoader({ shouldLoad }) {
  if (shouldLoad) {
    const [data, setData] = useState(null); // Error!
    const [loading, setLoading] = useState(false); // Error!
  }
  return null;
}

// ✅ CORRECT - Always call hooks with appropriate defaults
function DataLoader({ shouldLoad }) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (!shouldLoad) return; // Conditional logic inside useEffect

    setLoading(true);
    fetchData().then(result => {
      setData(result);
      setLoading(false);
    });
  }, [shouldLoad]);

  if (!shouldLoad) return null;
  if (loading) return <div>Loading...</div>;
  return <div>{data}</div>;
}

// ❌ WRONG - Hook after early return
function ErrorBoundary({ error, children }) {
  if (error) {
    return <div>Error: {error.message}</div>;
  }

  const [retryCount, setRetryCount] = useState(0); // Error! Never reached if error exists
  return children;
}

// ✅ CORRECT - All hooks before any returns
function ErrorBoundary({ error, children }) {
  const [retryCount, setRetryCount] = useState(0);

  if (error) {
    return (
      <div>
        Error: {error.message}
        <button onClick={() => setRetryCount(c => c + 1)}>
          Retry ({retryCount})
        </button>
      </div>
    );
  }

  return children;
}