Ahmed Sohail’s Post

5 React patterns that are silently killing your codebase. not bugs. not performance issues. just habits most devs never unlearn. in this carousel i break down: 🔴 useEffect for derived state — you don't need it 🟠 useMemo & useCallback everywhere — it's costing you more ⚡ re-renders — what actually triggers them (it's not what you think) 🟣 prop drilling 4 levels deep — there's a cleaner way 🔵 copy-pasting the same hook logic — extract it once swipe through ↓ (it's faster to learn this now than debug it at 5pm on a friday) which of these do you see most in codebases you've worked on? 👇 #react #javascript #webdev #frontend #softwareengineering

💻 5 React mistakes I stopped making (and it improved my code a lot) When I started with React, I used to write code that worked… But not code that was clean, scalable, and maintainable. Here are 5 mistakes I fixed: ❌ 1. Writing everything in one component 👉 Now I break UI into small reusable components ❌ 2. Ignoring proper state management 👉 Learned when to use useState vs useEffect vs lifting state ❌ 3. Not handling performance 👉 Started using memoization (useMemo, useCallback) ❌ 4. Poor folder structure 👉 Now I follow a clean project structure ❌ 5. Debugging randomly 👉 Now I debug step-by-step with proper logs Small changes… but huge difference in code quality 🚀 Still learning every day 👨💻 Which mistake did you make the most? 😅 #ReactJS #FrontendDevelopment #JavaScript #CleanCode #WebDevelopment #SoftwareEngineer

#One_real_production_lesson_frontend_dev_taught_me: We had a bug in production where an API was getting called twice. At first, it looked like a backend issue. But the backend logs were clean. So I started digging into the frontend 👇 The culprit? 👉 React 18 Strict Mode. In development, React intentionally runs components twice to detect side effects. But our code wasn’t written with that in mind. Here’s what we had: ❌ API call inside "useEffect" without proper safeguards ❌ No cleanup / idempotent logic ❌ Assumption: "useEffect runs only once" Result: Duplicate API calls → inconsistent data → confused users. --- ✅ Fix: - Made API calls idempotent - Added proper checks before firing requests - Avoided unnecessary side effects inside "useEffect" --- 💡 Lesson: Writing code that works is easy. Writing code that works in real-world scenarios is the real skill. React doesn’t cause bugs. Our assumptions do. --- Since then, I always ask: 👉 “What happens if this runs twice?” 👉 “Is this safe in concurrent rendering?” --- Still learning something new every day 🚀 #FrontendDevelopment #ReactJS #JavaScript #CleanCode #WebDevelopment #Debugging

Async/Await vs Promises — When to Use What? Both handle async operations, but here's my rule: Use Promises when: You need to run multiple operations in parallel Using .all() or .race() Use Async/Await when: You need sequential execution Readability matters (and it always does!) Error handling with try/catch is cleaner Example: // Clean sequential flow async function getData() { try { const user = await getUser(); const posts = await getPosts(user.id); return posts; } catch (error) { console.error(error); } } What's your preference? Async/await or Promises? #JavaScript #NodeJS #AsyncProgramming #CodingTips #WebDev

𝗥𝗲𝗮𝗰𝘁 𝗖𝗼𝗻𝘁𝗲𝘅𝘁 𝗜𝘀 𝗣𝗼𝘄𝗲𝗿𝗳𝘂𝗹 — 𝗕𝘂𝘁 𝗜𝘁’𝘀 𝗡𝗼𝘁 𝗔𝗹𝘄𝗮𝘆𝘀 𝘁𝗵𝗲 𝗥𝗶𝗴𝗵𝘁 𝗧𝗼𝗼𝗹 When developers first learn about React Context, it often feels like the perfect solution to avoid prop drilling. So the instinct becomes: “Just put it in Context.” But using Context everywhere can introduce new problems. When a Context value changes, all components consuming that context re-render. In large applications, this can affect performance and make debugging harder. Context works best when data is truly global or widely shared across many parts of the application. For smaller scopes, passing props or keeping state closer to where it’s needed can often be simpler and more predictable. Like most things in React, the goal isn’t to use a feature everywhere — it’s to use it intentionally. 👇 Example comparison below Day 16/100 — sharing practical frontend engineering lessons. When do you usually decide to introduce React Context? #ReactJS #FrontendArchitecture #JavaScript #SoftwareEngineering #WebDevelopment

React Hooks changed how we write React applications. Before hooks, we had to use class components for state and lifecycle methods. It made code harder to read and manage. Now with hooks, everything becomes simpler and cleaner. useState helps manage state useEffect handles side effects like API calls useRef gives direct access to DOM useContext helps avoid prop drilling Hooks make code more reusable, readable, and maintainable. If you are learning React today, mastering hooks is not optional. It is the foundation of modern React development. #ReactJS #FrontendDevelopment #WebDevelopment #JavaScript #Coding #SoftwareDevelopment #SolGuruz #ReactHooks

Mastering the Node.js Event Loop is essential for anyone working with this technology. Understanding the Event Loop can be a game changer. The Event Loop is what makes Node.js non-blocking and highly scalable. It handles operations in several phases: - Timers: Executes setTimeout and setInterval - Pending Callbacks: Handles I/O callbacks - Idle/Prepare: For internal use - Poll: Fetches new I/O events - Check: Executes setImmediate - Close Callbacks: Manages cleanup operations A key insight to remember is that Node.js doesn’t run everything at once; it smartly queues tasks and executes them phase by phase, ensuring efficient performance. As a bonus tip, understanding the difference between setTimeout, setImmediate, and process.nextTick can significantly enhance your debugging and optimization skills. #NodeJS #JavaScript #BackendDevelopment #EventLoop #WebDevelopment #CodingTips

Async JavaScript — what actually matters beyond the basics. 🚀 📌 Promises have 3 states — and they're irreversible. Once settled, a Promise can never go back to pending. That's by design. 📌 .catch covers the entire chain above it. Any error thrown anywhere flows down automatically. Not just the last step. The whole chain. 📌 fetch doesn't throw on 404 or 500. It only throws on network failure. Always check res.ok explicitly — try/catch alone won't save you here. 📌 Four combinators. Four different jobs. ✅ Promise.all → all required, fail fast ✅ Promise.allSettled → independent optionals, handle each separately ✅ Promise.race → timeout enforcement ✅ Promise.any → multiple sources, first success wins 📌 Sequential awaits are a hidden performance trap. If two calls don't depend on each other — they should run in parallel. Every unnecessary sequential await is wasted time. 📌 Retrying immediately under failure makes things worse. All instances retrying at the same moment hammer a struggling API further. Exponential backoff + jitter staggers retries — giving the API room to recover. Small decisions in async code have large consequences at scale. 💡 #JavaScript #AsyncJS #WebPerformance #FrontendEngineering #PlatformEngineering

Late post, but no skipped week.  Week 3 of my full stack journey was a lot: → React Part I - JSX, Virtual DOM, first components → Async JS - Promises, async/await, Fetch API, built a Film Finder with a live API → JavaScript Testing - Mocha, TDD, writing tests before writing code → JS Classes, Modules & Error Handling - the building blocks of real, organized codebases The shift this week wasn't just new syntax. It was starting to see how production code is actually structured: modular, tested, asynchronous, component-driven. React in particular hit different. Going from "here's a webpage" to "here's a component" rewires how you think about building UIs. Week 4 is already underway. More soon. If you're on a similar path, let's connect! #React #JavaScript #AsyncJS #TDD #FullStackDevelopment #WebDevelopment #LearningInPublic #SoftwareEngineering #CareerChange

When React first introduced Hooks, it completely transformed how developers write and manage components. Instead of relying heavily on class components, we can now handle state, side effects, and complex logic using simple functions. Here are a few Hooks that every React developer should master: >> useState – Manage local state in functional components. >> useEffect – Handle side effects like API calls, subscriptions, and DOM updates. >> useContext – Access global data without prop drilling. >> useRef – Persist values and directly interact with the DOM. >> useMemo & useCallback – Optimize performance by memoizing values and functions. Why Hooks matter: Cleaner and more readable code Better logic reuse through custom hooks Easier state management in functional components Improved component composition In modern React development, Hooks are not just a feature — they are the foundation of scalable and maintainable applications. If you're learning React today, mastering Hooks is a must. Which React Hook do you use the most in your projects? #React #ReactJS #WebDevelopment #FrontendDevelopment #JavaScript #Programming #SoftwareDevelopment #Reacthooks #IT #ITtalks