S — Single Responsibility Principle

“Una función, archivo o clase debe tener una sola razón para cambiar.”

Si un archivo hace demasiadas cosas, cuando pidan un cambio en una de ellas, corres el riesgo de romper las otras sin darte cuenta.

❌ Mal

// Un botón que renderiza, valida Y guarda en BD
function BotonGuardar() {
  // renderiza UI
  // valida formulario
  // guarda usuario en BD  ← 3 responsabilidades
}

✅ Bien

// Cada cosa en su sitio
function BotonGuardar() { /* solo UI */ }
function validarFormulario() { /* solo validación */ }
function guardarUsuario() { /* solo base de datos */ }

⚠️ La trampa típica

Un useEffect que hace fetch a una API, actualiza estado, parsea datos y se suscribe a un WebSocket. Son 4 responsabilidades. Sepáralas en hooks y funciones puras.