Building a Smart Counter App with JavaScript Closures

🚀 Day 6/90 — Becoming a Job-Ready Frontend Engineer Today I studied one of the most powerful and interview-critical JavaScript concepts: 👉 Closures At first, closures felt abstract. But once I understood lexical scope deeply, everything started making sense. Here’s the core idea: A closure is created when a function remembers and accesses variables from its outer lexical scope — even after the outer function has finished execution. This means: ✔ Functions can “remember” data ✔ Variables can stay alive in memory ✔ We can create private state in JavaScript Example insight: When a function returns another function, the inner function still has access to the outer function’s variables. This concept is heavily used in: • React hooks • Event listeners • setTimeout / async callbacks • Data privacy patterns • Functional programming One powerful realization: JavaScript does not garbage collect variables if they are still being referenced by a closure. Understanding closures completely changed how I see function execution and memory behavior. Strong fundamentals today → advanced React tomorrow. Next: Building a mini project using closures + DOM. #FrontendDevelopment #JavaScript #WebDevelopment #Closures #SoftwareEngineering #ReactJS #NextJS #100DaysOfCode #ProgrammingJourney #RemoteDeveloper.

🚀 Day 16 — React Fundamentals Started ⚛️ Continuing my full stack journey, today I stepped into Step 2: Frontend (React Focused) after building a strong JavaScript foundation 💻🔥 Started with React Core Concepts — not just using React, but understanding how it actually works internally 👇 🔹 Covered topics: - What is React & why it’s used - Single Page Application (SPA) concept - Virtual DOM & how React updates UI efficiently - Component-based architecture - JSX & how it converts into JavaScript internally 💡 Key Learning: React is not just about building UI — it’s about efficient rendering, reusable architecture, and understanding how updates happen behind the scenes. 👉 Always remember: - React is a library, not a framework - Virtual DOM helps update only required parts (performance boost ⚡) - Components make code reusable & scalable - JSX is converted into React.createElement (not directly understood by browser) 📌 Step 2 officially started — diving deeper into frontend engineering ⚛️ 📌 Day by day, getting closer to being job-ready 🚀 #ReactJS #FrontendDevelopment #FullStackDeveloper #MERNStack #InterviewPreparation #LearnInPublic #CodingJourney #Developers #Consistency #100DaysOfCode #WebDevelopment #NextJS #Programming #TechJourney #LinkedIn #Growth #Connections

🚀 ReactJS Deep Dive: What is Batching & Why It Matters? As a Frontend Engineer, performance is everything. One powerful concept in that often goes unnoticed is Batching. 💡 What is Batching? Batching is when React groups multiple state updates together and performs a single re-render instead of multiple renders. --- 🔍 Why should you care? Without batching: ❌ Every state update → separate re-render (performance hit) With batching: ✅ Multiple updates → single re-render (optimized UI) --- ⚡ Real Example setCount(count + 1); setCount(count + 1); 👉 You might expect "+2", but you’ll get "+1" 👉 Because React batches updates using the same state snapshot ✔️ Correct Approach setCount(prev => prev + 1); setCount(prev => prev + 1); 👉 Now it works as expected ✅ --- 🔥 What changed in React 18? Before React 18: Batching worked only inside event handlers After React 18: 👉 Automatic batching everywhere - setTimeout - Promises - API calls - Async functions --- 🧠 Pro Tip (Senior Level Insight) Always use functional updates when your next state depends on previous state — avoids bugs caused by stale values. --- 🎯 Analogy Without batching → Paying bill after every item 🧾 With batching → Add everything → Pay once 🛒 --- 💬 Have you ever faced bugs due to batching or stale state? Let’s discuss 👇 #ReactJS #FrontendDevelopment #JavaScript #PerformanceOptimization #WebDevelopment #SoftwareEngineering

🚀 Day 17 — React Components Deep Dive ⚛️ Continuing my journey into Step 2: Frontend (React Focused), today I explored one of the most important foundations of React — Components 💻🔥 Not just creating components, but understanding how to make them reusable, scalable, and interview-ready 👇 🔹 Covered topics: - Functional Components (modern standard) - JSX basics & rules - Props (data passing between components) - Component reusability - Children prop - Conditional rendering - List rendering & keys 💡 Key Learning: Components are the heart of React. The real power comes when you design them reusable and dynamic using props instead of hardcoding UI. 👉 Important takeaways: - Functional components are the industry standard (hooks-based) - Props are read-only and help pass data parent → child - Reusability makes code scalable and maintainable - Keys help React efficiently update UI (reconciliation) - Clean component structure = better performance + readability 📌 Today’s focus was not just “how to write components” but “how to design them like a frontend engineer” 📌 Step by step, moving from React user → React engineer ⚛️🚀 #ReactJS #FrontendDevelopment #FullStackDeveloper #MERNStack #InterviewPreparation #LearnInPublic #CodingJourney #Developers #Consistency #100DaysOfCode #WebDevelopment #NextJS #Programming #TechJourney #LinkedIn #Growth #Connections

5 React Best Practices Every Frontend Developer Should Follow in 2026 👇 As React applications grow in complexity, writing clean and maintainable code becomes more critical than ever. Here are 5 practices I consistently apply: 1. Keep components small and focused Each component should do one thing well. If a component handles too much logic, it's a signal to split it. 2. Use custom hooks to share logic Extract reusable stateful logic into custom hooks. It keeps your components clean and your logic testable. 3. Avoid prop drilling — use Context or state managers wisely Passing props through multiple layers creates tight coupling. Lift state up thoughtfully, or reach for Context and Zustand/Redux when appropriate. 4. Memoize only when necessary useMemo and useCallback are tools, not defaults. Profile first, optimize second — premature memoization adds complexity without real gains. 5. Colocate your files Keep styles, tests, and logic close to the component they belong to. It improves discoverability and reduces cognitive overhead. The best React codebases aren't the most clever — they're the most readable. Which of these do you already follow? Drop your thoughts below. 👇 #ReactJS #FrontendDevelopment #WebDevelopment #JavaScript #SoftwareEngineering

🚀 Day 3/90 — Becoming a Job-Ready Frontend Engineer Today’s focus was one of the most misunderstood topics in JavaScript: 👉 Type Coercion & the difference between == and === At first glance, both look similar. But internally, they behave very differently. Here’s what I deeply understood today: 🔹 JavaScript performs automatic type conversion (Implicit Coercion) 🔹 The + operator triggers string conversion when one operand is a string 🔹 Other operators like -, *, / force numeric conversion Example: "5" + 2 → "52" "5" - 2 → 3 Big difference. Then the important part: == (Loose Equality) • Compares value • Converts types if needed 5 == "5" → true === (Strict Equality) • Compares value • Compares type • No conversion 5 === "5" → false I also explored: ✔ Truthy & Falsy values ✔ Why false == 0 is true ✔ Why null == undefined is true but null === undefined is false ✔ Why relying on implicit coercion can create real production bugs Key takeaway: As a frontend engineer, never rely on JavaScript’s “magic conversions.” Be explicit. Be predictable. Strong fundamentals today = fewer bugs tomorrow. Next: Functions & Execution Flow. #FrontendDevelopment #JavaScript #WebDevelopment #ReactJS #NextJS #SoftwareEngineering #100DaysOfCode #ProgrammingJourney #RemoteDeveloper #TechLearning

🚀 Day 4/90 — Becoming a Job-Ready Frontend Engineer. Today I focused on one of the most fundamental building blocks of JavaScript: 👉 Functions & Execution Flow At first, functions look simple — just reusable blocks of code. But today I went deeper into how they actually behave inside the JavaScript engine. Here’s what I explored: 🔹 Function Declaration vs Function Expression 🔹 Why function declarations are fully hoisted 🔹 Why function expressions are NOT callable before initialization 🔹 Arrow functions and modern ES6 syntax 🔹 Parameters vs Arguments 🔹 The importance of the return keyword One important realization: If a function does not explicitly return a value, it automatically returns undefined. Understanding execution flow was even more powerful. When a function is called: • A new Execution Context is created • It gets pushed into the Call Stack • JavaScript executes it line by line • Then it gets removed (LIFO principle) This deeper understanding is crucial for: ✔ Debugging real-world applications ✔ Avoiding unexpected undefined values ✔ Understanding closures and async behavior ✔ Writing predictable React components Strong fundamentals today = clean architecture tomorrow. Next: Scope & Hoisting (one of the most important JS concepts). #FrontendDevelopment #JavaScript #WebDevelopment #ReactJS #NextJS #SoftwareEngineering #100DaysOfCode #ProgrammingJourney #RemoteDeveloper #TechLearning

https://lnkd.in/dhXuQdTD — I used to think a Length Converter was the "Hello World" of apps. As a Senior Frontend Engineer working with TypeScript, I quickly realized that "simple" tools are where the devil is in the details. Building this for my platform, calculator-all.com, taught me a hard lesson about floating-point math and user trust. 📏 I was using React 19 and Tailwind CSS for the UI, keeping things snappy and responsive. ⚡ But a few users pointed out tiny precision errors when converting between obscure units. I had to dive deep into decimal logic to ensure a carpenter and a physicist could both trust the output. 💻 I used Cursor to iterate through edge cases and Vitest to write a suite of tests for over 20 different units. 🤖 Running everything on Bun and Vite made the development cycle incredibly fast, but the real work was in the logic. 🚀 I even had to account for how different locales format their numbers—something many basic tutorials skip. 🛠️ It’s funny how the tools we take for granted often require the most care behind the scenes. ✨ What’s the most "basic" feature you've built that turned out to be surprisingly complex? 📐 #LengthConverter #FrontendEngineer #TypeScript #ReactJS #WebDevelopment #SoftwareEngineering #Bun #Vite #TailwindCSS #React19 #Testing #Coding #JavaScript #UnitTesting #CalculatorAll

Day 13 - Frontend Diaries 👉 I thought state updates happen instantly While working with state, my understanding was simple update the state and the new value should be available immediately So I would update state and then try to use that updated value in the next line But things mostly don't behave the way I expected Sometimes the value was still the old one sometimes multiple updates didn’t reflect correctly That’s when I realized state updates are not applied instantly They are scheduled and sometimes batched together React waits and processes them in a way that keeps things efficient Which means you can’t always rely on state being updated right after setting it You have to think in terms of the next render not the current line of code That small shift in understanding explains a lot of unexpected behavior #frontenddevelopment #reactjs #webdevelopment #fullstackdeveloper #softwareengineering #buildinpublic #developers

The biggest mistake I made in frontend development… I focused too much on design and ignored the fundamentals. I was busy making things “look good” but didn’t really understand how things worked behind the scenes. Result? Code was messy Reusability was zero Debugging became a nightmare Then I realized… Frontend is not just about UI. It’s about structure, logic, and clean code. So I changed my approach: Focused on JavaScript fundamentals Learned component-based thinking in React Started writing cleaner, reusable code And everything started making sense. Good UI impresses users, but good code saves developers If you're learning frontend, don’t skip the basics. #frontend #webdevelopment #reactjs #developers #codingjourney #coding #code #DSA #javascript