⏱️ 𝗡𝗼𝗱𝗲.𝗷𝘀 𝗘𝘃𝗲𝗻𝘁 𝗟𝗼𝗼𝗽 — setTimeout 𝘃𝘀 setImmediate Many developers think setTimeout(fn, 0) runs immediately. But in Node.js, 𝗲𝘃𝗲𝗻𝘁 𝗹𝗼𝗼𝗽 𝗽𝗵𝗮𝘀𝗲𝘀 𝗱𝗲𝗰𝗶𝗱𝗲 𝘁𝗵𝗲 𝗿𝗲𝗮𝗹 𝗲𝘅𝗲𝗰𝘂𝘁𝗶𝗼𝗻 𝗼𝗿𝗱𝗲𝗿. Let’s understand the difference between setTimeout and setImmediate 👇 🔍 𝗖𝗼𝗿𝗲 𝗗𝗶𝗳𝗳𝗲𝗿𝗲𝗻𝗰𝗲 setTimeout(fn, 0) • Schedules callback in 𝗧𝗶𝗺𝗲𝗿𝘀 𝗣𝗵𝗮𝘀𝗲 • Executes 𝗮𝗳𝘁𝗲𝗿 𝘁𝗶𝗺𝗲𝗿 𝘁𝗵𝗿𝗲𝘀𝗵𝗼𝗹𝗱 𝗶𝘀 𝗿𝗲𝗮𝗰𝗵𝗲𝗱 • Not truly immediate setImmediate(fn) • Schedules callback in 𝗖𝗵𝗲𝗰𝗸 𝗣𝗵𝗮𝘀𝗲 • Executes 𝗿𝗶𝗴𝗵𝘁 𝗮𝗳𝘁𝗲𝗿 𝗣𝗼𝗹𝗹 𝗣𝗵𝗮𝘀𝗲 • Designed to run 𝘪𝘮𝘮𝘦𝘥𝘪𝘢𝘵𝘦𝘭𝘺 𝘢𝘧𝘵𝘦𝘳 𝘐/𝘖 🧠 Example: const fs = require('fs'); fs.readFile(__filename, () => { setTimeout(() => { console.log('timeout'); }, 0); setImmediate(() => { console.log('immediate'); }); }); ⚙️ 𝗪𝗵𝗮𝘁 𝗛𝗮𝗽𝗽𝗲𝗻𝘀 𝗜𝗻𝘁𝗲𝗿𝗻𝗮𝗹𝗹𝘆? 1. fs.readFile registers an 𝗜/𝗢 𝗼𝗽𝗲𝗿𝗮𝘁𝗶𝗼𝗻 2. When file read completes → callback enters 𝗣𝗼𝗹𝗹 𝗣𝗵𝗮𝘀𝗲 3. Inside callback:• setImmediate → scheduled in 𝗖𝗵𝗲𝗰𝗸 𝗣𝗵𝗮𝘀𝗲 • setTimeout(0) → scheduled in 𝗧𝗶𝗺𝗲𝗿𝘀 𝗣𝗵𝗮𝘀𝗲 4. The event loop continues… ➡ After Poll Phase → 𝗖𝗵𝗲𝗰𝗸 𝗣𝗵𝗮𝘀𝗲 𝗿𝘂𝗻𝘀 𝗳𝗶𝗿𝘀𝘁 ➡ Then next iteration → 𝗧𝗶𝗺𝗲𝗿𝘀 𝗣𝗵𝗮𝘀𝗲 𝗿𝘂𝗻𝘀 🏁 𝗢𝘂𝘁𝗽𝘂𝘁 immediate timeout And this order is 𝗰𝗼𝗻𝘀𝗶𝘀𝘁𝗲𝗻𝘁 𝗶𝗻 𝘁𝗵𝗶𝘀 𝘀𝗰𝗲𝗻𝗮𝗿𝗶𝗼 because: • setImmediate runs right after I/O (Check phase) • setTimeout waits for next Timers phase 𝗜𝗳 𝘁𝗵𝗶𝘀 𝗵𝗲𝗹𝗽𝗲𝗱 𝘆𝗼𝘂 𝘂𝗻𝗱𝗲𝗿𝘀𝘁𝗮𝗻𝗱 𝗡𝗼𝗱𝗲 𝗶𝗻𝘁𝗲𝗿𝗻𝗮𝗹𝘀 𝗯𝗲𝘁𝘁𝗲𝗿, 𝗹𝗲𝘁’𝘀 𝗰𝗼𝗻𝗻𝗲𝗰𝘁. 🤝 #NodeJS #JavaScript #EventLoop #Backend #AsyncProgramming #SystemDesign #Programming
jigar suthar’s Post
More Relevant Posts
-
🚀 30 Days — 30 Coding Mistakes Beginners Make Day 10/30 I increased state twice… but it only updated once 😐 setCount(count + 1) setCount(count + 1) I expected +2 I got +1 Because React batches state updates. Both lines used the same OLD value of `count`. Fix 👇 setCount(prev => prev + 1) Functional updates always receive the latest state. This is very important in: counters, carts, likes, and real-time UI. Day 11 tomorrow 👀 #30DaysOfCode #reactjs #javascript #frontend #webdevelopment #codeinuse
To view or add a comment, sign in
-
-
Introducing bxp-code v1.0.0 — drop-in React code blocks for developers I built a VS Code theme extension (BedarX Pro) and wanted the same syntax colors on the web. Every React highlighting library I tried looked nothing like my editor, needed too much config, or produced flat output. So I built bxp-code. Drop-in React components with VS Code-accurate syntax highlighting via Shiki (same TextMate grammars VS Code uses) and automatic Prettier formatting. No setup needed. Two components: 1. BxpCode — code block with header, copy button, line numbers, sticky headers 2. BxpCodeTabs — tabbed interface for multi-language snippets Why use it: Building docs, portfolios, blogs, tutorials, or any React app showing code? This replaces wiring up a highlighter, formatter, copy button, and theme system separately. One import, one component. Dark/light themes included, every color customizable via props. Accepts code as string, File, or URL with auto language detection. What's next: Vue and Svelte adapters, React Native support, diff highlighting, and more built-in themes. The goal — the go-to code block component across frontend frameworks. npm install bxp-code npm: https://lnkd.in/dcZW7J5v Docs: https://lnkd.in/dVqcqN-z Playground: https://lnkd.in/dGX-4zbZ GitHub: https://lnkd.in/d2qPCt3e The VS Code theme it was born from: https://lnkd.in/dPZpgA23 A star or share goes a long way. Feedback welcome. #react #reactjs #npm #javascript #typescript #shiki #prettier #vscode #opensource #frontend #webdev #webdevelopment #syntaxhighlighting #codeformatting #developertools #dx #programming #coding #softwareengineering #vite #vitepress #vue #svelte #reactnative #github #nodejs #darkmode #buildinpublic #devcommunity #100daysofcode #uicomponents #componentlibrary #devtools #techcommunity
To view or add a comment, sign in
-
-
5 VS Code extensions that every Frontend Developer must have 👇 1️⃣ Prettier Auto-formats your code on save. No more messy indentation! ✅ 2️⃣ ES7+ React Snippets Type "rafce" and get a full React component instantly! ✅ 3️⃣ GitLens See who wrote which line of code and when — inside VS Code! ✅ 4️⃣ Thunder Client Test your APIs directly in VS Code. No need to open Postman! ✅ 5️⃣ Auto Rename Tag Rename opening HTML tag and closing tag updates automatically! ✅ Save this post for later! 🔖 Which one is your favourite? Comment below! 👇 #VSCode #Frontend #ReactJS #WebDevelopment #JavaScript #Programming #100DaysOfCode
To view or add a comment, sign in
-
-
JavaScript is becoming the assembly language of web development. TypeScript adds safety, scalability, and better DX. If you're starting today, why learn JS first at all? Should TypeScript replace JavaScript as the default? Agree or disagree? #JavaScript #TypeScript #WebDevelopment #Programming #Frontend #Developers
To view or add a comment, sign in
-
𝗦𝘁𝗼𝗽 𝗵𝗮𝗿𝗱𝗰𝗼𝗱𝗶𝗻𝗴 𝗔𝗣𝗜 𝗨𝗥𝗟𝘀 𝗶𝗻 𝘆𝗼𝘂𝗿 𝗳𝗿𝗼𝗻𝘁𝗲𝗻𝗱! 🚨 Hardcoding localhost URLs directly in your code works fine in development but causes headaches when deploying to staging or production. 𝗧𝗵𝗲 𝘀𝗼𝗹𝘂𝘁𝗶𝗼𝗻: 𝗘𝗻𝘃𝗶𝗿𝗼𝗻𝗺𝗲𝗻𝘁 𝗩𝗮𝗿𝗶𝗮𝗯𝗹𝗲𝘀. Use .env files to manage different API URLs for each environment: - .env.local for local development - .env.production for production - .env.staging for staging 𝗪𝗵𝘆 𝗶𝘁 𝗺𝗮𝘁𝘁𝗲𝗿𝘀: - One place to update URLs - Different configs per environment - Keep secrets out of source code - Easy deployments without manual changes 𝗣𝗿𝗼 𝘁𝗶𝗽: Always commit .env.example with dummy values as a template, but never commit .env.local with real secrets to git. Your deployment process will thank you. #WebDevelopment #React #JavaScript #Frontend #Coding #Programming #DevTips #BestPractices #ReactJS #NextJS #WebDev #SoftwareEngineering #CleanCode #DeveloperLife #VueJS #Angular #FullStack w3schools.com JavaScript Mastery
To view or add a comment, sign in
-
-
🚀 30 Days — 30 Coding Mistakes Beginners Make Day 15/30 I changed the state… but the input field didn’t update 😐 <input defaultValue={name} /> `defaultValue` only sets the initial value. After that, the DOM controls the input — not React. So even when state changed, UI didn’t. Fix 👇 <input value={name} onChange={e => setName(e.target.value)} /> Now React state controls the input. In React: Uncontrolled input → unpredictable Controlled input → reliable Day 16 tomorrow 👀 #30DaysOfCode #reactjs #javascript #frontend #webdevelopment #codeinuse
To view or add a comment, sign in
-
-
🚀 Why map( ) is Preferred in JavaScript & React While working with arrays in JavaScript—especially in React—map( ) becomes a go-to choice 👇 ✅ Returns a new array (no mutation) ✅ Keeps code clean & readable ✅ Perfect for JSX rendering ✅ Fits well with functional programming ✅ Helps avoid unexpected bugs In React, writing predictable and declarative code is everything—and map() supports that mindset perfectly. “Write code that explains what you want, not how to do it.” 💡 Small choices like using map() can make a big difference in code quality. #JavaScript #ReactJS #WebDevelopment #Frontend #CleanCode #LearningJourney #100DaysOfCode
To view or add a comment, sign in
-
-
The Front-End Essentials Starter Pack 🛠️ 1️⃣ HTML 2️⃣ CSS 3️⃣ JavaScript ...and beyond! Whether you're a total beginner or leveling up to frameworks like React and Vue, this is the toolkit you need to build stunning, responsive websites. #WebDev #CodeNewbie #FrontEnd #Programming #TechStack #100DaysOfCode #ReactJS #SoftwareDeveloper #WebDesign #CodingCommunity #LearnToCode #JavaScript #DeveloperLife #CareerInTech #FullStackDeveloper
To view or add a comment, sign in
-
-
How JavaScript’s Single Thread Keeps React Responsive : In a single-thread system, all tasks are processed one at a time—similar to a single person completing tasks in sequence rather than multiple people working simultaneously. JavaScript and React follow this model, meaning only one operation executes at any given moment. To prevent the application from freezing, JavaScript uses the event loop and asynchronous features to shift slower or waiting tasks away from the main thread. React enhances this with Fiber, which breaks large rendering tasks into smaller, manageable pieces, allowing the browser to respond quickly to user interactions. React also updates only the necessary parts of the UI. Despite using a single thread, this intelligent workflow keeps applications fast, responsive, and user-friendly. #ReactJS #JavaScript #WebDevelopment #Frontend #SingleThread #ReactFiber #SPA #Programming #TechExplained #WebApps #UIDevelopment #AsyncJS #EventLoop #CodeTips #LearnReact #DeveloperCommunity
To view or add a comment, sign in
-
Explore content categories
- Career
- Productivity
- Finance
- Soft Skills & Emotional Intelligence
- Project Management
- Education
- Technology
- Leadership
- Ecommerce
- User Experience
- Recruitment & HR
- Customer Experience
- Real Estate
- Marketing
- Sales
- Retail & Merchandising
- Science
- Supply Chain Management
- Future Of Work
- Consulting
- Writing
- Economics
- Artificial Intelligence
- Employee Experience
- Workplace Trends
- Fundraising
- Networking
- Corporate Social Responsibility
- Negotiation
- Communication
- Engineering
- Hospitality & Tourism
- Business Strategy
- Change Management
- Organizational Culture
- Design
- Innovation
- Event Planning
- Training & Development
It’s worth noting for readers that the reason setTimeout(fn, 0) is inconsistent in the main script is because it depends on the performance of the process—if the loop enters the Timers phase in less than 1ms, it might miss the timer and hit setImmediate first. Using an I/O callback like fs.readFile as you did is the only way to guarantee setImmediate wins every time. Solid post!