Frontend Talks to API for First Time, Handles Errors with Axios

🧠 Day 24 — Optional Chaining (?.) & Nullish Coalescing (??) Tired of errors like “Cannot read property of undefined”? 🤔 These two operators will save you 🚀 --- ⚡ 1. Optional Chaining ?. 👉 Safely access nested properties const user = { profile: { name: "John" } }; console.log(user.profile?.name); // John console.log(user.address?.city); // undefined (no error) 👉 Stops execution if value is null or undefined --- ⚡ 2. Nullish Coalescing ?? 👉 Provides a default value only if value is null or undefined const name = null; console.log(name ?? "Guest"); // Guest --- ⚠️ Difference from || console.log(0 || "Default"); // "Default" ❌ console.log(0 ?? "Default"); // 0 ✅ 👉 || treats falsy values (0, "", false) as false 👉 ?? only checks null or undefined --- 🚀 Why it matters ✔ Prevents runtime errors ✔ Cleaner and safer code ✔ Widely used in APIs & React apps --- 💡 One-line takeaway: 👉 “Use ?. to safely access, ?? to safely default.” --- Once you start using these, your code becomes much more robust. #JavaScript #ES6 #OptionalChaining #WebDevelopment #Frontend #100DaysOfCode 🚀

I spent 3 hours fixing a React bug yesterday. The issue wasn’t complex. My approach was. Earlier, whenever something broke in my app, I used to: ❌ randomly change code ❌ refresh again and again ❌ search Stack Overflow immediately Now I follow a simple process: ✅ check component re-renders ✅ inspect props and state flow ✅ verify API response structure ✅ use console logs step-by-step And honestly, debugging became much faster. One thing I’m learning as a developer: Writing code is important. But understanding why code breaks is what actually improves your skills. Curious to know — what’s the toughest bug you fixed recently? #ReactJS #WebDevelopment #JavaScript #FrontendDevelopment #CodingJourney #FullStackDeveloper #MERN

Spent hours chasing a bug that turned out to be a typo? We've all been there. My latest debugging saga involved a React component rendering incorrect data. The state was updating, but the UI wasn't reflecting the 𝐥𝐚𝐭𝐞𝐬𝐭 𝐯𝐚𝐥𝐮𝐞𝐬 immediately. 💡 I was pulling my hair out inspecting network requests and reducer logic. Turns out, the issue was a classic `useEffect` pitfall. My dependency array was missing a key variable, causing the effect to run with a 𝐬𝐭𝐚𝐥𝐞 𝐜𝐥𝐨𝐬𝐮𝐫𝐞. 🧠 A simple addition to `[dependency]` fixed hours of frustration. This reinforces how much 𝐜𝐨𝐧𝐭𝐞𝐱𝐭 𝐦𝐚𝐭𝐭𝐞𝐫𝐬 in component lifecycles. Always double-check your `useEffect` dependencies; they're often the silent culprits behind subtle React bugs. What's your go-to strategy when `useEffect` dependencies bite you? #ReactJS #FrontendDevelopment #DeveloperTips

I just wanted to see localhost:3000. 😭 Clone repo → run app Simple, right? Nope. Now it’s: • Install Node 22.11.0 • Actually use Bun 🥖 • But only for local • Use pnpm, not npm • Run Docker 🐳 • Add 14 env vars • Clear cache • Delete node_modules • Pray 🙏 And after all that… The app still crashes because one package changed from 4.2.1 → 4.2.2 💀 2010: <script src="app.js"></script> 2026: bun run turbo dev --filter=web Which somehow starts: ⚡ Vite 📦 Next.js 🎨 Tailwind 🧠 TypeScript 🐶 Husky 🐳 Docker …and 7 background processes eating 6GB RAM for spiritual reasons 👻 The worst part? All these tools exist for a reason: • TypeScript catches bugs • Bun is faster • Docker fixes “works on my machine” • Monorepos help big teams We didn’t build a website. We built a tiny operating system wearing a login page. 🤡 And no matter how advanced the stack gets, the final fix is still: rm -rf node_modules Bun is generally faster, Node still has the biggest ecosystem, and Deno focuses on security-by-default — which is exactly why teams now juggle multiple runtimes instead of one. #WebDevelopment #Frontend #NextJS #JavaScript #SvelteKit #RemixRun #NuxtJS #SoftwareEngineering #DevCommunity #FullStack #TechTrends #ProgrammerHumor #OpenSource #ReactJS #ServerSideRendering

I keep running into the same issue when building forms with React Hook Form + MUI. At the beginning everything feels clean. Then you start adding: - conditional fields - validation rules - async data …and suddenly: - Controller everywhere - watch() scattered across the component - manual error wiring - logic split between JSX and form config It works, but it doesn’t feel right anymore. After working on several enterprise projects, I noticed this pattern keeps repeating. Forms are simple… until they aren’t. Curious how others are dealing with this. Do you keep scaling with RHF + MUI as-is, or do you introduce some abstraction at some point? #reactjs #frontend

Here's a leak for you, Anthropic. I used Claude Code to refactor and upgrade my personal website in Typescript, NodeJS and NextJS. Maybe the output was a good prank. It failed to comprehend a very basic and straightforward package.json. It completely butchered the application structure. Nothing fancy: props, default states and some basic UI. I spent more time fighting with it to make a simple change to some tsx components and it still generated so much unnecessary code and completely missed the point of component hierarchies. If any developer in my org generated code like that, I would reject their PR, rewrite the git history to remove their stain from the repository and then immediately fire them. You succeeded at one thing, at least, you managed to be worse than Copilot. Bravo. 🤮 I wouldn't let any vibe coder near a dependency chain until they upgraded NextJs, React and all the requisite eslint dependencies. You might be able to generate code, but it takes more than a mark down file to build architecture.

🧠 The bug wasn’t in my code… It was in my assumption. I spent 2 hours debugging a UI issue where a list wasn’t updating correctly. The logic looked fine. The API response was correct. State was updating. So what was wrong? 👇 👉 I was using the array index as the key in a dynamic list. At first, everything worked. But the moment I added/removes items… things broke in weird ways. 💥 Items re-rendered incorrectly 💥 State got mixed up between components 💥 UI started behaving unpredictably 💡 Lesson learned: Keys in React are not just for removing warnings. They are how React tracks identity. Using index as a key = telling React: "Yeah, these items might change… but pretend they didn’t." 🛠️ Better approach: Always use a unique and stable id from your data. 🧠 Simple way to think: React uses keys like names in a classroom. If everyone has the same name (or changing names), things get chaotic. 🔥 Takeaways: • Avoid index as key (especially in dynamic lists) • Stable identity = predictable UI • Many “random bugs” come from small decisions like this 💬 Have you ever faced a weird UI bug that turned out to be something small? #ReactJS #FrontendDevelopment #JavaScript #WebDev #CodingMistakes

Mastering React State with Hooks Ever felt like your React components are getting cluttered with too much state logic? Here’s a simple idea that can seriously clean things up: Custom Hooks What’s the big deal? Custom hooks let you extract and reuse stateful logic across components. Instead of repeating the same `useState` and `useEffect` logic everywhere, you write it once—and reuse it. Can they really halve your code? In many cases… YES. Imagine this: Instead of writing the same logic in 5 components, you move it into a custom hook like `useFetchData()` or `useFormHandler()`. Now you: Reduce duplication Make components cleaner Improve readability Make debugging easier Simple Example Before: Each component handles its own API call logic After: One custom hook handles everything Components just use it Why you should start using them Keeps your code DRY (Don’t Repeat Yourself) Makes scaling your app easier Encourages better structure Pro Tip Start small. Pick one repeated logic (like form handling or API calls) and convert it into a custom hook. #React #WebDevelopment #Frontend #JavaScript #Coding #SoftwareDevelopment

Most React tutorials are still teaching 2020 patterns. In 2026, the ecosystem has shifted dramatically: React 19 is stable, the compiler handles most memoization automatically, and useEffect should be a last resort — not your go-to for data fetching, derived state, or event responses. This guide walks you from project setup to production-ready patterns, with a cheat sheet you can bookmark. #react #web #frontend #next #frontend #performance #javascript #tips #typescript #nextjs

2 posts ago: a 9,200-line React codebase from 2019. Today: migration done. The numbers: 📊 Codebase - 77 files → 142 focused modules - 0% → 100% TypeScript strict - 11 runtime deps → 3 🛡️ Removed entirely - jQuery - moment.js - axios 0.19 (known CVEs) - Redux + react-redux + redux-thunk - create-react-app 3.4 (abandoned) - Console.log interceptors leaking tokens ⚡ Tooling - HMR: ~8s → <1s (CRA → Vite 8) - react-router v5 → v7 - tsc --strict: 0 errors - ESLint flat config: 0 warnings 🕐 Time - Manual rewrite: weeks, team - My pipeline: days, solo Note: LOC actually *went up* (9.2k → 12.4k). That's what a real migration looks like — types, split files, typed API layer. The win isn't shrinkage. It's 8 dependencies gone, zero CVEs, every file type-checked. Full case study: https://lnkd.in/gsw29EEd --- Here's the thing nobody talks about: Most companies don't rewrite legacy code because it's too expensive and too risky. So they keep patching. Adding duct tape on top of duct tape. Until one day the entire thing breaks and they're stuck. What if the rewrite took days instead of months? What if it cost a fraction of what agencies charge? What if the risk was near zero because the business logic is preserved automatically? That's what I built. If your startup or agency is sitting on a codebase that slows down every sprint — DM me. I'll show you what the modernized version looks like before you commit to anything. --- #react #typescript #vite #javascript #ai #webdevelopment #legacycode #codemodernization #softwaredevelopment