🍝 Spaghetti Code: Why Your App Breaks When You Touch One Line

#javascript #programming #nextjs #react

We’ve all been there.

You change one tiny line of code… and suddenly five other parts of your app explode. That’s not a feature. That’s spaghetti code.

But what exactly is spaghetti code, and how do we avoid writing it?

🍝 What is Spaghetti Code?

Spaghetti code is messy, tangled code where everything depends on everything else. Like a plate of spaghetti, it’s hard to know which strand leads where.

It often looks like this:

No clear structure or architecture
Functions doing too many things at once
Copy-pasted logic everywhere
Variables and state scattered across the codebase

🚨 Why It’s a Problem

Hard to debug: Change one function, break another.
Hard to scale: Adding new features feels like defusing a bomb.
Hard for teams: New developers get lost trying to understand the mess.

⚡ Real Examples

Example 1: Nested Conditionals

Spaghetti Version:

function processUser(user) {
  if (user.isAdmin) {
    if (user.isActive) {
      console.log("Admin active");
      // More logic...
    } else {
      console.log("Admin inactive");
    }
  } else {
    if (user.isActive) {
      console.log("User active");
    } else {
      console.log("User inactive");
    }
  }
}

Cleaner Version:

function processUser(user) {
  const role = user.isAdmin ? "Admin" : "User";
  const status = user.isActive ? "active" : "inactive";

  console.log(`${role} ${status}`);
}

Example 2: Inline Database Queries Everywhere

Spaghetti Version:

app.get("/users", (req, res) => {
  db.query("SELECT * FROM users", (err, users) => {
    if (err) throw err;
    res.send(users);
  });
});

app.post("/users", (req, res) => {
  db.query(
    `INSERT INTO users (name, email) VALUES ('${req.body.name}', '${req.body.email}')`,
    (err, result) => {
      if (err) throw err;
      res.send(result);
    }
  );
});

Business logic is mixed with DB logic — hard to test or maintain.

Cleaner Version (separating layers):

// services/userService.js
export function getUsers() {
  return db.query("SELECT * FROM users");
}
export function createUser(name, email) {
  return db.query("INSERT INTO users (name, email) VALUES (?, ?)", [name, email]);
}

// routes/userRoutes.js
app.get("/users", async (req, res) => {
  res.send(await getUsers());
});

app.post("/users", async (req, res) => {
  res.send(await createUser(req.body.name, req.body.email));
});

Example 3: React Components That Do Too Much

Spaghetti Version:

function Dashboard() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch("/api/users")
      .then(res => res.json())
      .then(setUsers);
  }, []);

  return (
    <div>
      <h1>Dashboard</h1>
      {users.map(u => (
        <div key={u.id}>{u.name}</div>
      ))}
    </div>
  );
}

Looks fine… until you add more features (loading states, error handling, pagination). It quickly becomes spaghetti.

Cleaner Version (separation of concerns):

function useUsers() {
  const [users, setUsers] = useState([]);
  useEffect(() => {
    fetch("/api/users").then(res => res.json()).then(setUsers);
  }, []);
  return users;
}

function UserList() {
  const users = useUsers();
  return users.map(u => <div key={u.id}>{u.name}</div>);
}

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <UserList />
    </div>
  );
}