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)