How to fix React Hook "useState" is called conditionally in React

// ❌ WRONG - useState inside condition
function MyComponent({ isUser }) {
  if (isUser) {
    const [name, setName] = useState('');
  }
  return <div></div>;
}

// ✅ CORRECT - useState at top level
function MyComponent({ isUser }) {
  const [name, setName] = useState('');

  if (isUser) {
    return <div>{name}</div>;
  }
  return <div>Not logged in</div>;
}

// ❌ WRONG - conditional hook
function MyComponent({ shouldFetch }) {
  if (shouldFetch) {
    const [data, setData] = useState(null);
  }
}

// ✅ CORRECT - condition inside hook
function MyComponent({ shouldFetch }) {
  const [data, setData] = useState(null);

  useEffect(() => {
    if (shouldFetch) {
      // Fetch logic here
    }
  }, [shouldFetch]);
}

// Component with hooks for authenticated users
function UserProfile() {
  const [profile, setProfile] = useState(null);
  // ... user-specific hooks
  return <div>{profile.name}</div>;
}

// Component with hooks for guests
function GuestView() {
  const [guestData, setGuestData] = useState(null);
  // ... guest-specific hooks
  return <div>Welcome, guest!</div>;
}

// Main component - conditional rendering of components, not hooks
function MyComponent({ isUser }) {
  return isUser ? <UserProfile /> : <GuestView />;
}

npm install --save-dev eslint-plugin-react-hooks

{
  "plugins": ["react-hooks"],
  "rules": {
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn"
  }
}