Common JavaScript Mistakes You Are Probably Making

JavaScript is a beautiful, chaotic mess. It’s flexible enough to build anything, and permissive enough to let you shoot yourself in the foot without realizing it until production.

After reviewing countless pull requests, I’ve noticed a pattern. The same mistakes keep popping up, disguised as clean code.

1. The useEffect Dependency Lie

We have all done it. You have a useEffect hook, and the linter yells at you to add a function or object to the dependency array. You add it to shut the linter up.

Suddenly, your component is re-rendering in an infinite loop.

The Fix: If you are passing objects or arrays into useEffect, ensure they are memoized with useMemo or stable references. JavaScript compares objects by reference, not value. A new object {} created on every render is technically "different" every time.

2. Floating Point Math

Quick, what is 0.1 + 0.2? If you said 0.3, I have bad news for you. In JavaScript (and many other languages), the answer is 0.30000000000000004.

Never use plain JS numbers for financial calculations. You will lose cents, and your accountant will lose their mind. Use libraries like decimal.js or work with integers (cents instead of dollars) whenever possible.

3. Misunderstanding await in Loops

// Don't do this!
array.forEach(async (item) => {
  await db.save(item);
});

forEach does not wait for promises. This code will fire off all save requests almost simultaneously and the function will finish before they are done.

The Fix: Use a for...of loop if you need sequential execution, or Promise.all if you want them to run in parallel but wait for completion.

Final Thoughts

JavaScript tries to be helpful. It coerces types, handles missing parameters, and generally tries to keep running no matter what. But that "friendliness" is exactly why we need to be strict with ourselves.