DEV Community

Cover image for 10 Subtle React Mistakes I Made – and What They Taught Me
Samir Tahiri
Samir Tahiri

Posted on

10 Subtle React Mistakes I Made – and What They Taught Me

1️⃣ Overusing useEffect Instead of Thinking in React

🔧 What I did: Triggered effects for logic that could’ve been derived from props or state.

💡 What I learned: If you think you need useEffect, ask yourself: Can I compute this directly from props or state?


2️⃣ Forgetting the key Prop in List Rendering

🐞 What it caused: UI glitches, especially with dynamic lists.

Fix: Always use a stable, unique key. Avoid using indexes if the list can change.


3️⃣ Treating State as Synchronous

📉 The mistake: Logging console.log(state) right after setState.

🧠 Reminder: State updates are asynchronous. Use effects or callbacks to react to changes.


4️⃣ Using Too Many useState Calls

🎢 What happened: State spaghetti everywhere.

🔀 Better approach: When state becomes complex or dependent, reach for useReducer.


5️⃣ Not Memoizing Expensive Calculations

🐌 Issue: Slow re-renders.

Fix: Wrap expensive operations in useMemo or functions in useCallback where necessary.


6️⃣ Writing Logic Directly in JSX

🤯 What I did: Conditionals, array filtering, and more directly inside the return block.

🧹 Fix: Extract complex logic before the return. JSX should stay clean and declarative.


7️⃣ Not Extracting Components Early Enough

😩 Result: Giant files, hard to reuse or test.

🔧 Lesson: If a part of the UI feels reusable or has its own logic—split it into its own component.


8️⃣ Using Context for All Shared State

🌍 What happened: Context bloat, unnecessary re-renders.

🛠️ Alternative: Use lightweight state libraries like Zustand, Jotai, or Redux Toolkit when scaling up.


9️⃣ Not Handling Async States Properly

Mistake: Ignored loading/error states in fetch requests.

Fix: Always build in loading, error, and success states for better UX and debugging.


🔟 Ignoring Accessibility (a11y)

🧩 Examples: Using <div> instead of <button>, no keyboard support.

👀 Reminder: Accessibility matters! Use semantic HTML and test with a keyboard/screen reader.


🔚 Final Thoughts

React is an amazing tool, but small mistakes can snowball. These are just a few lessons I’ve learned the hard way—and I hope they help you write cleaner, faster, and more scalable React apps.


💬 Your Turn!

Have you made any of these mistakes in React?

Which one tripped you up the most?

Let me know in the comments—I’d love to hear your experience! 👇


📌 Follow me for more posts on React, frontend architecture, and web development tips.

Top comments (0)