A single ESLint error took me on an unexpected journey into the heart of the React Compiler this week. It was a powerful reminder that there's a deep story behind every rule. Here’s what I learned. 👇 The Problem It started with a simple pattern: using an async function inside a useEffect hook. A lint rule flagged my setState call, which I thought was a mistake. Since the state update happened after an await, I was convinced it had to be a false positive. The Investigation My curiosity led me down a rabbit hole. I started by opening an issue on GitHub, but I wanted to understand the root cause. I decided to dive into the React repository myself and trace the logic. The journey took me from the eslint-plugin-react-compiler wrapper, deep into the babel-plugin-react-compiler, and eventually to the exact file responsible for the logic: src/Validation/ValidateNoSetStateInEffects.ts. The "Aha!" Moment 💡 After analyzing the compiler's validation code, I had my 'aha!' moment. The rule isn't a bug; it's a crucial feature designed to prevent memory leaks. It correctly flags any setState call in the main body of an effect to protect against a classic race condition: the component could unmount while waiting for the await to finish, leading to an attempt to update a non-existent component. The Takeaway My biggest takeaway wasn't just about compilers, but about appreciating the "why" behind the Rules of Hooks. What seems like a simple linting error is often a carefully designed safeguard built on years of experience by the React team. It was a humbling and incredibly valuable deep dive! #ReactJS #WebDevelopment #OpenSource #JavaScript #LearnInPublic
How a single ESLint error led me to the heart of React Compiler
More Relevant Posts
-
Ken Thompson was right, and after 40 years, we still basically have the same problems. Why so? Recently, I stumbled upon an excellent article about backdooring JavaScript through minifier bugs, and it immediately brought me back to Thompson's seminal paper "Reflections on Trusting Trust." If you haven't read it, it's the 1984 paper showing how a compiler can insert backdoors invisible in source code. The article in question, however, demonstrates a similar attack vector, but with a spin and modernized for JavaScript: exploiting a bug in UglifyJS (the minifier used by jQuery) to create code that behaves differently only after minification. The example? An auth token validation function that looks perfectly legitimate in source code but accepts expired tokens after minification. The backdoor only exists post-transformation. What makes this terrifying: → The source code review shows nothing suspicious → The backdoor is compiler/minifier-dependent (deniable, as it should be) → Your CDN might be minifying for you without your knowledge We've multiplied the transformation layers. We've multiplied the attack surface. And so the toolchain itself is the vulnerability. Full technical breakdown: https://lnkd.in/d3aySG3W P.S. The article also mentions “Deniable Backdoors Using Compiler Bugs,” which in and of itself is a great piece to read (see: POC||GTFO 0x08).
To view or add a comment, sign in
-
-
Mozilla released an interesting preview of a Graphing algorithm they wrote for displaying generated code blocks from their JIT compiler for #JavaScript https://lnkd.in/dXjiW-jv
To view or add a comment, sign in
-
🚀 Excited to share my latest article: Data Handling in NestJS: DTOs, Validation, and Pipes for Robust APIs! 🌐💻 ✨ Dive into the essentials of building resilient APIs with NestJS. From Data Transfer Objects to validation and pipes, I've got you covered! 🔍 Check it out on my website and let me know your thoughts! 👇 https://lnkd.in/d2VmKF_G #NestJS #APIDevelopment #WebDevelopment #Programming #BackEnd #BackEndDevelopment #FullStackDeveloper #FullStackDevelopment #JavaScript #JS #TS #TypeScript
To view or add a comment, sign in
-
“Daily Temperatures” Using Stack in JavaScript ♨️ 👉 Day 19 / Day 93 👈 Description: 👉 The goal is to find out how many days you have to wait until a warmer temperature. ✅ Approach: 👉 Traverse the array from right to left. 👉Maintain a stack to store indices of temperatures in decreasing order. 👉 For each day, pop all smaller or equal temperatures. 👉 The difference between the current index and top of stack gives the number of days to wait. This method ensures O(n) time complexity instead of a brute-force O(n²). #JavaScript #CodingChallenge #DSA #InterviewPreparation #FrontendDeveloper #ProblemSolving #100DaysOfCode #TechLearning #LeetCode #Algorithms
To view or add a comment, sign in
-
-
🚀 I used to think JavaScript was just “interpreted”… Until I discovered how much magic happens before a single line runs. When you write something simple like let sum = 10 + 5, the JS engine doesn’t just read it; it compiles it. Yes, JavaScript is compiled before execution (just-in-time). ⚙️ Here’s what actually happens behind the scenes: 1️⃣ Tokenization – your code is broken into keywords, operators, and identifiers. 2️⃣ Parsing – those tokens form an Abstract Syntax Tree (AST) that maps out the structure of your program. 3️⃣ Interpretation – the AST is turned into bytecode. 4️⃣ JIT Compilation – engines like V8’s TurboFan optimize bytecode into fast machine code. 5️⃣ Garbage Collection – memory is automatically cleaned up when no longer needed. All of this happens in milliseconds ⚡ Every single time your JS runs. I broke down each step in detail in my new Medium article 👇 👉 https://lnkd.in/dM7yNH6f #JavaScript #WebDevelopment #Programming #NodeJS #Frontend #V8 #SoftwareEngineering
To view or add a comment, sign in
-
-
💡 LeetCode #268 — Missing Number (JavaScript Edition) This problem looks simple, but it’s one of those logic-building gems that teach you how to think mathematically in code. You’re given an array containing numbers from 0 to n, but one number is missing. The task? Find that number efficiently. Here’s the beauty — instead of using loops or sorting tricks, we can use a mathematical formula: 🔹 The sum of first n natural numbers = (n * (n + 1)) / 2 🔹 Subtract the actual sum of the array from this total — and the result is the missing number! function missingNumber(arr) { let n = arr.length; let sum = 0; let total = (n * (n + 1)) / 2; for (let i = 0; i < n; i++) { sum += arr[i]; } return total - sum; } console.log(missingNumber([0, 4, 2, 1])); 🧠 Fun fact: This approach runs in O(n) time and O(1) space — no extra array, no fancy methods, just pure logic. Problems like these make you realize how math and programming go hand in hand. Keep solving small logic-based problems — they sharpen both your problem-solving mindset and your coding confidence. 💪 #JavaScript #CodingJourney #FrontendDevelopment #DeveloperTips #LearnByDoing
To view or add a comment, sign in
-
Most devs learn JavaScript syntax, not behavior. That’s why we see weird bugs that make no sense; until you understand what’s actually happening under the hood. Here are 5 common mistakes (and how to fix them): 1️⃣ Hoisting confusion Variables declared with var are hoisted, but their values aren’t. ✅ Use let or const; they’re block-scoped and predictable. 2️⃣ Loose equality traps == converts types before comparing, leading to chaos. Always use === to avoid surprise conversions. 3️⃣ Misunderstanding closures Closures let functions “remember” the scope where they were created. They’re powerful for managing state and data privacy. 4️⃣ Ignoring the event loop JS runs on a single thread — async code doesn’t mean “parallel.” Understanding how the event loop works will help you debug async issues faster. 5️⃣ Misusing this Arrow functions inherit this from their parent. Regular functions bind it dynamically. Know the difference, or you’ll end up debugging ghosts. 👻 #JavaScript #WebDevelopment #FrontendDevelopment #CodingTips #Programming #SoftwareEngineering #Developer #LearningToCode #DevCommunity
To view or add a comment, sign in
-
-
🧮 Day 42 | In-Built Objects in JavaScript Explored Math and Date objects in JavaScript today — the foundation of many logical operations. 🧠 Learned about: • Math constants & methods (PI, round, random, pow, sqrt) • Date creation, formatting & manipulation • Time control using get and set methods ✨ Key Takeaway: JS comes packed with powerful tools — we just need to know how to use them right! 🔗 GitHub: https://lnkd.in/dtdU9-zZ #WebDevelopment #JavaScript #CodingJourney #Frontend
To view or add a comment, sign in
-
-
JavaScript Closures Explained 💡 A closure is a powerful feature in JavaScript where an inner function retains access to variables from its outer function, even after the outer function has finished executing. This means the inner function "remembers" the environment it was created in. Closures enable data encapsulation, function factories, and help with keeping state in asynchronous code. Example: function outer() { let count = 0; return function inner() { count++; console.log(count); }; } const counter = outer(); counter(); // 1 counter(); // 2 counter(); // 3 Here, inner remembers the count variable even after outer is executed. This is what makes closures so useful! #JavaScript #Closure #WebDevelopment #JavaScriptClosures #Coding #Programming #LearnJavaScript #FrontendDevelopment #DevTips #JavaScriptTips #CodeNewbie
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
Nice content.. keep going !!