Lesson 45 — Common Mistakes in React (And How to Avoid Them)

by

🧭 Introduction

React is powerful, but many developers — especially beginners — make common mistakes that lead to:

  • Bugs
  • Poor performance
  • Confusing code
  • Hard-to-maintain projects

The good news?
Most of these mistakes are easy to avoid once you know them.

In this lesson, you will learn:

  • The most common React mistakes
  • Why these mistakes happen
  • How to fix and avoid them
  • Best practices used by professionals

❌ Mistake 1: Forgetting key in Lists

❌ Wrong

items.map(item => <li>{item.name}</li>);

✅ Correct

items.map(item => <li key={item.id}>{item.name}</li>);

🔹 Why it matters:
Keys help React identify which items changed, improving performance and correctness.

❌ Mistake 2: Mutating State Directly

❌ Wrong

state.count = state.count + 1;

✅ Correct

setCount(prev => prev + 1);

🔹 Why it matters:
React relies on immutability to detect changes.

❌ Mistake 3: Using useEffect Incorrectly

❌ Wrong (Missing dependency array)

useEffect(() => {
  fetchData();
});

✅ Correct

useEffect(() => {
  fetchData();
}, []);

🔹 Why it matters:
Missing dependencies cause infinite re-renders.

❌ Mistake 4: Too Many States for Forms

❌ Wrong

const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");

✅ Correct

const [formData, setFormData] = useState({
  name: "",
  email: "",
  password: "",
});

🔹 Why it matters:
Single state objects scale better for forms.

❌ Mistake 5: Not Handling Loading & Errors

❌ Wrong

{data.map(item => <p>{item.name}</p>)}

✅ Correct

if (loading) return <p>Loading...</p>;
if (error) return <p>Error occurred</p>;

🔹 Why it matters:
Users should always know what’s happening.

❌ Mistake 6: Overusing useEffect

❌ Wrong

Using useEffect for simple derived state.

✅ Correct

Use useEffect only for side effects:

  • API calls
  • Subscriptions
  • Timers

❌ Mistake 7: Passing Anonymous Functions Excessively

❌ Wrong

<Child onClick={() => handleClick()} />

✅ Better

<Child onClick={handleClick} />

🔹 Why it matters:
Anonymous functions create new references on each render.

❌ Mistake 8: Over-Optimizing Too Early

❌ Wrong

Using useMemo everywhere without profiling.

✅ Correct

  • Measure first
  • Optimize only slow parts

🔹 Why it matters:
Premature optimization increases complexity.

❌ Mistake 9: Mixing Business Logic with UI

❌ Wrong

API calls + UI logic in same component.

✅ Correct

  • UI components
  • Service files for API
  • Hooks for logic

❌ Mistake 10: Poor Folder Structure

❌ Wrong

components/
  Button.jsx
  Login.jsx
  authSlice.js

✅ Correct

features/
  auth/
    Login.jsx
    authSlice.js

🔹 Why it matters:
Clean structure = scalable app.

❌ Mistake 11: Ignoring Reusability

❌ Wrong

Creating the same button in multiple files.

✅ Correct

Create reusable components:

<Button text="Save" />

❌ Mistake 12: Forgetting preventDefault() in Forms

❌ Wrong

<form onSubmit={submitForm}>

✅ Correct

e.preventDefault();

🔹 Why it matters:
Prevents page reload.

❌ Mistake 13: Using Index as Key

❌ Wrong

items.map((item, index) => (
  <li key={index}>{item.name}</li>
))

✅ Correct

<li key={item.id}>{item.name}</li>

❌ Mistake 14: Hardcoding API URLs

❌ Wrong

fetch("https://api.example.com/users");

✅ Correct

process.env.REACT_APP_API_URL;

❌ Mistake 15: Not Reading Error Messages

Ignoring console warnings/errors.

✅ Always:

  • Read warnings
  • Fix errors early

🎯 Best Practices to Avoid These Mistakes

✅ Use ESLint
✅ Follow React conventions
✅ Keep components small
✅ Learn debugging tools
✅ Write readable code

❓ FAQs — Common React Mistakes

🔹 Are these mistakes common?

Yes. Almost every React developer makes them early.

🔹 Can these mistakes break apps?

Yes, especially in production.

🔹 How can I improve faster?

By building projects and reviewing code regularly.

🔹 Do senior developers still make mistakes?

Yes — but they catch and fix them quickly.

🧠 Quick Recap

✔ Avoid mutating state
✔ Use keys correctly
✔ Handle loading & errors
✔ Don’t over-optimize
✔ Write clean, reusable code

🎉 Conclusion

Avoiding common React mistakes is what separates a beginner from a professional developer. By understanding these pitfalls, you’ll write cleaner, faster, and more maintainable React applications.

🎯 With this lesson, you have successfully completed SECTION 9 — Best Practices 🚀

✅ Next Section Begins

SECTION 10 — Mini Projects

👉 Next Lesson:
Project 1 — Todo App

Leave a Comment