mediumWrong PatternsReact

The god component

A developer asked an AI assistant to build a user settings page. The suggested component works, but it now owns form state, API calls, validation, toast notifications, and modal visibility all in one file, and every small change risks breaking something unrelated.

SettingsPage.jsx

function SettingsPage() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [errors, setErrors] = useState({});
  const [isSaving, setIsSaving] = useState(false);
  const [toast, setToast] = useState(null);
  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);

  const handleSave = async () => {
    const newErrors = {};
    if (!email.includes('@')) newErrors.email = 'Invalid email';
    if (password && password.length < 8) newErrors.password = 'Too short';
    setErrors(newErrors);
    if (Object.keys(newErrors).length) return;

    setIsSaving(true);
    try {
      await fetch('/api/user', { method: 'PATCH', body: JSON.stringify({ name, email, password }) });
      setToast({ type: 'success', message: 'Saved!' });
    } catch {
      setToast({ type: 'error', message: 'Failed to save' });
    } finally {
      setIsSaving(false);
    }
  };

  const handleDeleteAccount = async () => {
    await fetch('/api/user', { method: 'DELETE' });
    window.location.href = '/goodbye';
  };

  return <div>{/* ~150 more lines mixing form fields, validation, toast, and delete modal */}</div>;
}

What's the actual cost of putting all of this — form state, validation, API calls, toasts, and modal state — into one component?

Every unrelated change, like tweaking the delete modal, now risks breaking the form logic too, because nothing is isolated and the component has no single responsibility to reason about alone.

React limits components to 5 useState calls before performance degrades.

The component will fail to compile once it exceeds roughly 100 lines.

State variables declared with useState conflict with each other once there are more than 6 in one component.