How to fix Rendered fewer hooks than expected. This may be caused by an accidental early return statement. in React

function MyComponent({ user }) {
  // Early return happens first
  if (!user) {
    return <div>Loading...</div>;
  }

  // Hook is called conditionally - this will cause the error
  const [count, setCount] = useState(0);

  return <div>{count}</div>;
}

function MyComponent({ user }) {
  // All hooks called first, unconditionally
  const [count, setCount] = useState(0);

  // Early return comes after hooks
  if (!user) {
    return <div>Loading...</div>;
  }

  return <div>{count}</div>;
}

function MyComponent({ isEnabled }) {
  const [data, setData] = useState(null);

  // Conditional hook call - violates Rules of Hooks
  if (isEnabled) {
    useEffect(() => {
      fetchData().then(setData);
    }, []);
  }

  return <div>{data}</div>;
}

function MyComponent({ isEnabled }) {
  const [data, setData] = useState(null);

  // Hook called unconditionally, logic is conditional
  useEffect(() => {
    if (!isEnabled) {
      return; // Early return inside the effect
    }

    fetchData().then(setData);
  }, [isEnabled]);

  return <div>{data}</div>;
}

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

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

function Dashboard({ user, isAdmin }) {
  if (!user) {
    return <Login />;
  }

  // This hook is only called when user exists
  const [settings, setSettings] = useState({});

  if (!isAdmin) {
    return <RegularUserView settings={settings} />;
  }

  // This hook is only called for admins
  const [adminData, setAdminData] = useState(null);

  return <AdminView data={adminData} />;
}

function Dashboard({ user, isAdmin }) {
  // All hooks called every render
  const [settings, setSettings] = useState({});
  const [adminData, setAdminData] = useState(null);

  // Conditional rendering happens after hooks
  if (!user) {
    return <Login />;
  }

  if (!isAdmin) {
    return <RegularUserView settings={settings} />;
  }

  return <AdminView data={adminData} settings={settings} />;
}

function Dashboard({ user, isAdmin }) {
  if (!user) return <Login />;
  if (!isAdmin) return <RegularUserDashboard />;
  return <AdminDashboard />;
}

function RegularUserDashboard() {
  const [settings, setSettings] = useState({});
  return <RegularUserView settings={settings} />;
}

function AdminDashboard() {
  const [settings, setSettings] = useState({});
  const [adminData, setAdminData] = useState(null);
  return <AdminView data={adminData} settings={settings} />;
}