Vasim Shaikh’s Post

Day 20/60 ✅: React, Logic, and 4:30 AM Starts. ☕ Up at 4:30 for the Arsenal game, then straight into the code. Today was a recovery day after yesterday's struggle, so I kept it focused: 1. React Deep Dive: Understanding the component flow (top to bottom). 2. JS Logic: Revisiting If/Else statements. 3. Application: Crushing a few JS Challenge tests. A pretty good, productive day. Consistency is key. #JavaScript #ReactJS #Coding #WebDev #60daysofcode

Demystifying Array Destructuring! 🌀 Ever wanted to simplify your code while handling arrays? Meet array destructuring! 🎉 This nifty feature allows you to unpack values from arrays into distinct variables in a clean and readable way. For instance, in a web project, you can easily extract user data from responses without the clutter. Let’s make your code elegant! 💪 Have you tried destructuring arrays before? Share your thoughts or experiences below! 👇 #WebDev #JavaScript #Coding #FrontendDevelopment #ArrayDestructuring

𝗘𝘃𝗲𝗿𝘆 𝗱𝗲𝘃𝗲𝗹𝗼𝗽𝗲𝗿 𝗵𝗮𝘀 𝘁𝗵𝗼𝘀𝗲 𝘁𝘄𝗼 𝗹𝗼𝘆𝗮𝗹 𝗳𝗿𝗶𝗲𝗻𝗱𝘀. 𝘤𝘰𝘯𝘴𝘰𝘭𝘦.𝘭𝘰𝘨() and 𝘣𝘰𝘳𝘥𝘦𝘳: 1𝘱𝘹 𝘴𝘰𝘭𝘪𝘥 𝘳𝘦𝘥; One helps you understand what’s happening in the code. The other helps you understand what’s happening on the screen. Not fancy. Not complex. But somehow… they solve 80% of the problems. Developers know the feeling. "I love you guys so much." #DeveloperLife #Debugging #JavaScript #Frontend #CodingHumor

The React State "Snapshot" In React, calling a state setter function doesn't update the variable in your current line of code. Instead, it schedules a re-render with a new value. When you call setAge(age + 1) multiple times in one function, each call uses the same value from the current render's snapshot (e.g., 42 + 1). To fix this, you use an updater function like setAge(a => a + 1). This tells React to use the "pending" state from the queue rather than the stale value from the current render, ensuring each increment builds on the last. #Frontend #ReactJS #Programming #TechCommunity #CleanCode #Javascript #CareerGrowth #NextJS #MERNStack #TypeScript #React19 #AI #FullStack #WebDevelopment #Redux #SoftwareEngineering #PropTech

We often scare ourselves thinking writing custom code or polyfills is too complex. So we avoid it. Instead of overthinking the complexity, we can create a simple blueprint and move one step at a time. That’s exactly what I tried today. I picked something that usually feels intimidating . Built Redux from scratch . 🛠️ Not the real one - a tiny version with just three functions: getState, dispatch, and subscribe. That's it. That's Redux at its core. Just understanding: - how state is stored - how actions are dispatched - how listeners react to changes Sometimes, the best way to understand a tool is to rebuild it yourself. 👉 Checkout the repo for full code. https://lnkd.in/g_gHB_5S #javascript #redux #webdevelopment #frontend #learninginpublic #codingjourney

😵 This one line in JavaScript can trick you! let a = 10; let b = a++; console.log("Addition", a + b, "a = ", a, "b = ", b) At first glance, you might expect both values to be the same… right? 🤔 But JavaScript has its own way of handling this. 👉 Why does b get 10 instead of 11? 👉 When exactly does the increment happen? 👉 And how is this different from ++a? This small concept can lead to big bugs if you misunderstand it. I’ve broken it down clearly in my latest video 🎥 Watch it once — you’ll never get confused again. #JavaScript #Frontend #WebDevelopment #Coding #LearnJavaScript

JavaScript Brain Teaser: The this Trap... Looks simple… but there’s a catch hiding in plain sight const obj = { name: "Deepak", first: function () { console.log("First:", this.name); }, second: () => { console.log("Second:", this.name); } }; obj.first(); obj.second(); Drop your answers in the comments Let’s see who truly understands what’s happening under the hood #JavaScript #CodingChallenge #Frontend #InterviewPrep #WebDevelopment

Two lines. Same numbers. Completely different outputs 🤯 👉 "console.log(1 + 2 + "3");" 👉 "console.log("1" + 2 + 3);" Looks simple… but JavaScript has its own way of thinking 👀 Are you sure you know what the output will be? I made a quick video breaking this down — and trust me, it’s NOT what most people expect 🚀 Watch till the end to understand how JavaScript actually evaluates expressions and why order matters more than you think! #JavaScript #WebDevelopment #Coding #Frontend #Developers #JSBasics

🌀 Recursion in JavaScript Recursion is a technique where a function calls itself to solve a problem. 👉 It works by breaking a problem into smaller parts 👉 Each call handles a smaller input 👉 It stops when it reaches a base case 💡 Key Concepts: • Base Case → Stops the recursion • Recursive Case → Calls the function again ⚠️ Important: Without a base case, recursion will cause infinite calls and crash the program. 🔥 Key Takeaway: Solve a small part and let recursion handle the rest. #javascript #webdevelopment #frontend #coding #100DaysOfCode

Understanding Event Delegation, Event Propagation, and Event Bubbling in JavaScript These concepts confused me at first, but here’s a simple breakdown: 1. Event Propagation It’s the complete flow of an event: Capturing ➝ Target ➝ Bubbling 2. Event Bubbling: The event starts from the target element and moves upwards to its parents. 3. Event Delegation: Instead of adding listeners to multiple child elements, we add one listener to the parent and handle everything using bubbling. a. Cleaner code b. Better performance c. Easier to manage dynamic elements Simple idea, but super powerful when building real apps. #javascript #webdevelopment #frontend #reactjs #coding #developers