Shubham Narkhede’s Post

🚨 Most developers get this wrong about the JavaScript Event Loop What do you think this prints? 👇 console.log("Start"); setTimeout(() => console.log("Timeout"), 0); console.log("End"); Many people expect: ❌ Start ❌ Timeout ❌ End But the actual output is: ✅ Start ✅ End ✅ Timeout Why? 🤔 Because JavaScript is single-threaded and uses the Event Loop to handle async tasks. Here’s what really happens behind the scenes: 1️⃣ console.log("Start") → runs immediately in the Call Stack 2️⃣ setTimeout() → moves to Web APIs 3️⃣ console.log("End") → runs next (still synchronous) 4️⃣ Timer finishes → callback goes to Callback Queue 5️⃣ Event Loop pushes it to the Call Stack when it's empty 6️⃣ console.log("Timeout") finally runs 💡 Even setTimeout(..., 0) is never truly instant. If you understand this concept, debugging async JavaScript becomes 10x easier. 💬 Comment “EVENT LOOP” if you want a deeper breakdown with Promises & Microtasks. #javascript #webdevelopment #nodejs #frontend #backend #programming #eventloop #coding

💡 useEffect Dependencies — Small Array, BIG Difference! One hook… three different behaviors — all based on the dependency array 🤯 Understanding this can save you from bugs and unnecessary re-renders! Let’s break it down 👇 🔹 1. No Dependency Array useEffect(() => { console.log("Runs on every render"); }); 👉 Runs after every render 👉 Can cause performance issues if not handled carefully 🔹 2. Empty Dependency Array [] useEffect(() => { console.log("Runs only once"); }, []); 👉 Runs only once (on mount) 👉 Perfect for: API calls Initial setup 🔹 3. With Dependencies [value] useEffect(() => { console.log("Runs when value changes"); }, [value]); 👉 Runs only when specific values change 👉 Best for syncing state, props, or side effects 🔁 Quick Summary No array → Every render [] → Only once [deps] → When dependencies change ⚠️ Common Mistake Forgetting dependencies can lead to: Stale data Unexpected bugs 👉 Always trust (and understand!) the dependency array. 🚀 Final Thought Mastering useEffect dependencies is the key to writing predictable and efficient React code. Once you get this right, everything starts making sense 🙌 #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #CodingTips

JavaScript Arrow Functions → the modern, concise way to write functions! Classic: function add(a, b) { return a + b; } Arrow style (shorter & sweeter): const add = (a, b) => a + b; Even cooler shortcuts: Single param? Skip parentheses → x => x * 2 No params? Use empty () → () => console.log("Hi!") Multi-line? Add curly braces + return → (x, y) => { return x + y; } Biggest game-changer: lexical this binding No more .bind(this) headaches in callbacks, React handlers, setTimeout, promises, array methods (.map/.filter), etc. Arrow functions inherit this from the surrounding scope — clean & predictable! 🔥 When NOT to use them: Object methods (when you need dynamic this) Constructors (no prototype, can't use new) Arrow functions = cleaner code + fewer bugs in modern JS. Who's team arrow all the way? #JavaScript #ArrowFunctions #ES6 #CodingTips #WebDevelopment #ReactJS #Frontend #Programming #100DaysOfCode #DevCommunity

When you understand web beyond frameworks: At the core of every modern web application—no matter the framework—is JavaScript. Not just syntax. But how it actually works under the hood. When you click a button on a web page, a lot more happens than we realize: * The browser parses HTML into a DOM structure * JavaScript hooks into that structure via event listeners * The call stack executes synchronous code * The event loop coordinates async operations * The callback queue / microtask queue decides what runs next * The rendering engine decides when and what to paint Understanding this changes everything. Because performance issues, bugs, and scalability problems often live below the framework layer. 👉 Slow UI? Could be blocking the main thread 👉 Unexpected behavior? Could be async timing 👉 Re-renders? Could be inefficient state updates 👉 Memory leaks? Could be unmanaged subscriptions Frameworks come and go but these fundamentals stay. #JavaScript #WebDevelopment #SoftwareEngineering #Frontend #Performance #SystemDesign #Programming #Developers

"JS Fundamentals Series #4: Closures & First-Class Functions" Ever wondered how a function remembers variables even after its parent has finished executing? That's the magic of Closures - one of the most powerful concepts in JavaScript. 👉 Closures: A closure is formed when a function remembers the variables from its lexical environment, even after the outer function has returned. 👉 First-Class Functions: In JavaScript, functions are treated like any other value - they can be assigned to variables, passed as arguments, or returned from other functions 🔹Explanation - Closures combines a function with its surrounding scope. - They allow data privacy and state retention. - First-class functions make higher-order functions possible (functions that take or return another functions). 🔹 Example function outer() {  let count = 0;  return function inner() {   count++;   return count;  } } const counter = outer(); console.log(counter()); // 1 console.log(counter()); // 2 Here, inner() remembers count even after outer() has finished — that’s a closure in action. 🔹Why It Matters - Enables powerful patterns like currying, memoization, and event handling. - Helps write modular, reusable, and maintainable code. - Essential for understanding modern frameworks like React. 💡 Takeaway: Closures aren’t just theory — they’re the backbone of how JavaScript manages state and builds advanced patterns. #JavaScript #WebDevelopment #Frontend #ReactJS #CodingTips #DeveloperCommunity #NamasteJS #LearningJourney #TechExplained #CareerGrowth "Closures: Functions carry their lexical environment with them 👇"

React Core Concepts = part 1 1. Diff Algorithm React compares the previous Virtual DOM with the updated Virtual DOM when state or props change. detecting to the updation 2. Lazy Loading Lazy loading is used to improve the initial loading performance of the application.Instead of loading all components at startup, components are loaded only when they are required. Lazy loading uses dynamic imports, which allows the bundler to create separate chunks. 3 .Code Splitting Code splitting means splitting a large JavaScript bundle into smaller files (chunks). 4. Static Import Static import loads modules at build time and includes them in the main bundle. 5. Dynamic Import Dynamic import loads modules at runtime when the code executes. 6. Webpack Webpack is a module bundler that processes application source code and creates optimized build files. 7. Dynamic Bundling Dynamic bundling means loading JavaScript modules only when they are required instead of bundling everything into one large file. 8. Babel Babel is a JavaScript compiler.Browsers cannot understand JSX So Babel converts them into browser-compatible JavaScript. 9.Reconciliation Reconciliation is the process React uses to update the UI efficiently when state or props change. 10.Hooks Hooks allow functional components to use state, lifecycle features, and other React capabilities. 11.Memoization Memoization is a performance optimization technique used to avoid unnecessary recalculations. It works by storing the result of a computation in memory (cache). 12.Context API The Context API is used to share data across components without passing props manually at every level. 13.Suspense Suspense allows React to show a fallback UI while waiting for a component or data to load. #React #ReactJS #ReactDeveloper #ReactConcepts #LearnReact #ReactLearning #JavaScript #FrontendDevelopment #FrontendDeveloper #WebDevelopment #WebDev #Coding #Programming #CodeSplitting #LazyLoading #Webpack #Babel #ReactPerformance #Memoization #ReactHooks #ContextAPI #Suspense

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

⚠️ One tricky thing in React that confused me at first: useEffect dependencies At first, I thought useEffect just runs magically. But the truth is very simple 👇 🧠 Think of useEffect like this: “React, run this code after render, and re‑run it only when I tell you to.” That “telling” happens through the dependency array. ✅ Examples (super simple) useEffect(() => {  console.log("Runs once"); }, []); ➡️ Runs only when component mounts but for the below case useEffect(() => {  console.log("Runs when count changes"); }, [count]); ➡️ Runs every time count changes 🚨 The tricky part If you use a variable inside useEffect but forget to add it as a dependency, React will use an old value (stale data). 🧠 Rule to remember: If you use it inside useEffect, it should be in the dependency array. Once I understood this, useEffect stopped feeling scary 😊 Just logic + clarity. #React #JavaScript #Hooks #useEffect #Frontend #LearningInPublic