If Javascript is single-threaded, how can 'await' wait? 🤔 If it actually waited, the whole app would freeze !! Actually, await pauses the function, not the thread. 1. In an async function, when 'await getSomePromise()' is encountered, the rest of the function is scheduled as a microtask (pausing for "awaited" promise) 2. The thread returns to the caller of async function. 3. Once the Promise resolves it enters the microtask queue, to get executed by javascript engine once the call stack becomes empty. 🧠 Mental model: Think of a function as a chapter in a book 📕, Within a chapter, 'await' simply places a bookmark, moves on to other chapters, and comes back later. 📝 I wrote a short blog explaining this step-by-step with code and execution flow here👇🏻 https://lnkd.in/g5q2CjWU #javascript #asyncawait #webdevelopment #promises #frontend #softwareengineering #eventloop #javascriptinternals #programming #coding #microtasks

🎯 JavaScript Learning Challenge – Day 4/20 🔢 Day 4 Project: Counter App Today I built a simple Counter Application using JavaScript. The app allows users to increase and decrease a number with button clicks, which helped me understand how state changes work in a basic JavaScript application. 💡 Concepts I practiced today: • Selecting elements using querySelector() • Handling user interactions with addEventListener() • Updating values dynamically in the DOM • Managing state using variables in JavaScript This project may look simple, but it’s one of the fundamental exercises for understanding event-driven programming in JavaScript. 📅 Day 4/20 completed — small projects, consistent progress. #JavaScript #WebDevelopment #FrontendDevelopment #CodingJourney #mernstack #20daysChallenge #consistency

While learning React, I recently explored what happens behind the scenes when the UI updates the concept of Reconciliation and the Diffing Algorithm. When a component’s state or props change, React does not immediately update the real DOM. Instead, it creates a new Virtual DOM tree and compares it with the previous one. This comparison process is called Diffing. React checks what actually changed between the two trees and then updates only those specific parts in the real DOM instead of re-rendering everything. This process of efficiently updating the UI is known as Reconciliation. For example, if only a text value changes inside a <p> tag, React updates just that node rather than rebuilding the entire DOM structure. This makes React applications fast and efficient. A couple of interesting things React assumes to make this process quicker: • Elements with different types create different trees • Keys help React track items in lists efficiently Understanding how React updates the DOM internally really helped me see why things like keys and component structure matter for performance. #React #JavaScript #WebDevelopment #FrontendDevelopment #ReactJS #Programming #LearningInPublic

JavaScript Number Guessing Game I just built a Number Guessing Game in JavaScript! 🎯 💡 Features: Random number generation (1-100) User input validation Hints: “Too high” / “Too low” Counts attempts Exit anytime This project helped me practice loops, conditionals, variables, and working with user input in JavaScript. Try it yourself! Code runs in the browser console or Node.js with prompt-sync. 💻 Skills practiced: JavaScript fundamentals, logic, problem-solving #JavaScript #Coding #WebDevelopment #LearningByDoing

🧠💻 Built a Small JavaScript Math Game As part of my JavaScript learning journey, I created a simple Sum Guessing Game. In this game: 🔹 Two random numbers are generated 🔹 The user has to guess the correct sum 🔹 If the answer is correct → “Congratulations! You got it right.” 🔹 If incorrect → “Please try again.” While building this project, I practiced JavaScript fundamentals like DOM manipulation, conditions (if-else), user input handling, and basic logic building. Small projects like this are helping me strengthen my problem-solving and JavaScript skills. More projects coming soon 🚀 #JavaScript #WebDevelopment #FrontendDevelopment #CodingJourney #BuildInPublic #LearningByBuilding #DeveloperLife #NxtWave #Poornimauniversity

💡 Handling Click Events in React In React, user interactions like button clicks are handled using onClick events. 👉 onClick triggers a function 👉 Function updates state or performs an action 👉 UI updates automatically 📌 Common Uses: • Button actions • Form submissions • Toggle features • Navigation triggers • Dynamic UI updates ⚡ React uses camelCase event naming Example → onClick (not onclick) Master event handling to build interactive React apps. Follow TFSC for practical frontend learning. #reactjs #reactevents #onclick #frontenddeveloper #javascript #webdevelopment #coding #learnreact #programming #tfsc

Built a simple To-Do List App using HTML and JavaScript. where users can add and delete tasks dynamically. While building this project, I practiced DOM manipulation, event handling, and dynamically creating elements in JavaScript. Small projects like this help strengthen the basics. 🚀 #javascript #webdevelopment #frontend #coding #learningbydoing

Nobody talks about the moment you finally understand the React rendering cycle. One day it just clicks. You stop fighting re-renders. You stop throwing useCallback at everything hoping something sticks. You stop questioning why your component is rendering three times on a single state update and start actually knowing why. That moment does not come from reading the docs. It comes from breaking something badly enough in production that you had no choice but to go deep. The virtual DOM is not magic. Reconciliation is not magic. The dependency array is not a suggestion. Once you internalize that React is just a function that runs on a schedule and decides what changed, everything else starts making sense. Chase the understanding, not the syntax. #React #ReactJS #JavaScript #FrontendDevelopment #WebDevelopment #SoftwareEngineering #UIEngineering #ReactDeveloper #CleanCode #Programming

⚛️ One thing that improved my React code significantly: Understanding when and why components re-render. In React, a component re-renders when: • Its state changes • Its props change • Its parent component re-renders Early in my projects, I didn’t think much about this. But as applications grow, unnecessary re-renders can affect performance. Some things that helped me manage this better: 🔹 Using React.memo for pure components 🔹 Memoizing functions with useCallback 🔹 Memoizing expensive calculations with useMemo But an important lesson: Premature optimization can make code harder to maintain. First build clean components. Optimize only where performance actually matters. React performance is less about tricks and more about understanding how rendering works. #ReactJS #FrontendDevelopment #ReactPerformance #JavaScript #SoftwareEngineering Ankur Prajapati MOHD ALI ANSARI Sheryians Coding School

🚀 Learning React: Understanding Props Today, I learned an important concept in React called Props (Properties). Props allow us to pass data from one component to another, making our code more dynamic, reusable, and efficient. Instead of writing the same code again and again, we can create flexible components that adapt based on the data they receive. 🔑 Key Takeaways: Props are used to transfer data between components They make components reusable Props are read-only (cannot be modified inside the component) 📌 Example: We can pass values like names, images, or functions from a parent component to a child component using props. Learning props is a big step toward building real-world React applications 💻 #ReactJS #WebDevelopment #FrontendDevelopment #JavaScript #CodingJourney #LearnToCode #ReactLearning