I was confused between useCallback and useMemo… 😅 Both felt the same. And honestly, I was using them interchangeably ❌ 💡 Then I understood the real difference: 👉 useCallback → memoizes a function 👉 useMemo → memoizes a value 🧠 Example: const memoizedFn = useCallback(() => { console.log("Hello"); }, []); const memoizedValue = useMemo(() => { return expensiveCalculation(data); }, [data]); ⚠️ My mistake: Using useMemo for functions and useCallback without need ❌ 💡 What I do now: • useCallback → when passing functions to child components • useMemo → when dealing with expensive calculations ✅ Result: • Cleaner code • Better performance • Less confusion 🔥 What I learned: Both are optimization hooks 👉 but solve different problems #ReactJS #FrontendDeveloper #JavaScript #ReactInterview #CodingTips #WebDevelopment

If a function fires 1000 times, but you only want it to run every 100 calls, there's a neat technique for that. Today I learned about counter-based sampling in JavaScript. Use Cases • sampling analytics events to reduce load • limiting noisy logs or metrics • running expensive work periodically in high-frequency flows How it's different from throttling? Sampling is call-count based → run every N calls Throttling is time-based → run at most once every X ms So if 1000 events fire instantly: • sampling (every 100) → runs 10 times • throttling (200ms) → may run only once Different problems, different tools. #javascript #softwareengineering #frontend #webdevelopment #todayilearned

Filed an issue and shipped a fix to the official Module Federation Vite plugin this month. Most frontend teams on Vite still default to @originjs/vite-plugin-federation. Even tutorials published in late 2025 recommend it. That package hasn't shipped a release in over a year. The official one is @module-federation/vite. Vite 8 + Rolldown support landed this month. The issue tracker is active, and my PR got a real review within days. What surprised me digging in: - It orchestrates 15+ specialized internal Vite sub-plugins. Far more layered than I expected. - Manifest mode beats hardcoded entry URLs. Type sharing across remotes is automatic. - Runtime hooks make auth, routing, and A/B testing on remotes clean. - Migration off originjs is shorter than it looks. Most configs map over with light edits. The bug I fixed: a regex was matching Stencil's minified getScopeId, crashing every Stencil component at runtime. If your micro-frontend setup feels stuck in 2022, look again. PR + issue links in the comments. #ModuleFederation #Vite #MicroFrontends #OpenSource #Frontend #React #Javascript #Typescript

💡 JavaScript Tip: Spread vs Rest Operator Both use (...), but work opposite 👇 👉 Spread → Expands values 👉 Rest → Collects values Example: const arr = [1,2,3]; const newArr = [...arr, 4]; // Spread const arr1 = [1, 2, 3]; const arr2 = [...arr1, 4, 5]; console.log(arr2); // [1, 2, 3, 4, 5] function sum(...nums) {} // Rest const [first, ...rest] = [10, 20, 30, 40]; console.log(first); // 10 console.log(rest); // [20, 30, 40] 🔥 Remember: Spread = Expand Rest = Collect

Imagine you have built your team an expense dashboard in Retool, but then the the feature request comes in... "Can we just upload pictures of our receipts?" That's exactly what this custom component does. It uses Javascript (Tesseract.js, specifically) so that the entire text recognition process happens in the browser! You just drag in an image and get text back, that can be inserted right into your dashboard. We're launching a challenge to see just how creative people can get with these kinds of custom components! We'll also be doing our part to help with a ton of resources on how to build custom components into your Retool instance and we would love to have you join us! https://lnkd.in/g2sBQXtS

You don’t really understand useEffect dependencies… until one small change creates bugs you didn’t expect. Suddenly: • API calls fire multiple times • State feels out of sync • And you’re wondering, “why is this running again?” That’s when it clicks — dependencies aren’t just syntax, they control when your logic executes. ⸻ A simple analogy: Think of useEffect like a home security system. • Dependencies are the sensors • Add too many → alarm triggers for every small movement • Miss one → something important happens, and nothing triggers The system isn’t broken — the configuration is. ⸻ From an engineering perspective, this is about controlling side effects with clarity. • Be intentional with dependencies • Don’t “fix” warnings without understanding • Define clear execution boundaries Because predictable systems don’t happen by chance — they’re designed that way. #reactjs #frontendengineering #javascript #webdevelopment

Recently built 𝗖𝗥𝗫 𝗕𝗹𝘂𝗲𝗽𝗿𝗶𝗻𝘁 🚀 A 𝗖𝗵𝗿𝗼𝗺𝗲 𝗘𝘅𝘁𝗲𝗻𝘀𝗶𝗼𝗻 that lets you 𝗲𝘅𝘁𝗿𝗮𝗰𝘁, 𝗶𝗻𝘀𝗽𝗲𝗰𝘁, and 𝗲𝘅𝗽𝗹𝗼𝗿𝗲 𝘊𝘩𝘳𝘰𝘮𝘦/𝘌𝘥𝘨𝘦 𝘦𝘹𝘵𝘦𝘯𝘴𝘪𝘰𝘯 packages directly in the browser. Some features: • Download any extension packages as `.CRX` or `.ZIP` instantly • Convert local `.CRX` files into `.ZIP` • View extension source code directly from the Chrome Web Store • Built-in IDE-style viewer with syntax highlighting • Supports 40+ file formats including JS, JSON, SVG, MP4, fonts, and more Built with 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 alongside 𝗝𝗦𝗭𝗶𝗽, 𝗣𝗿𝗶𝘀𝗺.𝗷𝘀, 𝗕𝗲𝗮𝘂𝘁𝗶𝗳𝘆-𝗝𝗦, and 𝗠𝗮𝗿𝗸𝗲𝗱.𝗷𝘀. 🔗𝗔𝘃𝗮𝗶𝗹𝗮𝗯𝗹𝗲 𝗼𝗻 𝘁𝗵𝗲 𝗖𝗵𝗿𝗼𝗺𝗲 𝗪𝗲𝗯 𝗦𝘁𝗼𝗿𝗲: https://lnkd.in/ggJKkvc2 Really enjoyed building this and learning more about browser internals, CRX structures, and developer tooling ⚡ #ChromeExtensions #OpenSource #JavaScript #WebDevelopment #GitHub #DeveloperTools #BrowserExtensions #SoftwareEngineering #BuildInPublic #Coding #SRMKTR #SRMUniversity

🥁 𝗩𝟳.𝟮.𝟬 𝗶𝘀 𝗼𝘂𝘁. 𝗧𝗵𝗶𝘀 𝗼𝗻𝗲 𝗮𝗱𝗱𝘀 𝘀𝗼𝗺𝗲𝘁𝗵𝗶𝗻𝗴 𝗽𝗲𝗼𝗽𝗹𝗲 𝗵𝗮𝘃𝗲 𝗯𝗲𝗲𝗻 𝗮𝘀𝗸𝗶𝗻𝗴 𝗳𝗼𝗿. react-infinite-scroll-component (https://lnkd.in/gZgRuSkG) has always been a drop-in component. That works great for most cases. But if you want full control over your list markup, custom wrappers, headless UI, your own loading states, you were stuck working around the component's structure. 𝗡𝗼𝘁 𝗮𝗻𝘆𝗺𝗼𝗿𝗲. 😎 𝗩𝟳.𝟮.𝟬 𝘀𝗵𝗶𝗽𝘀 𝘂𝘀𝗲𝗜𝗻𝗳𝗶𝗻𝗶𝘁𝗲𝗦𝗰𝗿𝗼𝗹𝗹, a hook that exposes the same IntersectionObserver sentinel logic as the component, but hands you back a sentinelRef to place wherever you want. Place the ref. Build your list however you want. The library handles the rest. And yes, Ankeet Maini, we heard you. 𝗩𝟳.𝟮.𝟬 𝗮𝗹𝘀𝗼 𝘀𝗵𝗶𝗽𝘀 𝗔𝗚𝗘𝗡𝗧𝗦.𝗺𝗱 𝗮𝗻𝗱 𝗹𝗹𝗺𝘀.𝘁𝘅𝘁 so Claude, Codex, Copilot, and friends know exactly how to use this library when generating code for users. 😄 𝗛𝗲𝗿𝗲’𝘀 𝘄𝗵𝗲𝗿𝗲 𝘁𝗵𝗲 𝗿𝗼𝗮𝗱𝗺𝗮𝗽 𝘀𝘁𝗮𝗻𝗱𝘀: ✅ 𝗣𝗵𝗮𝘀𝗲 𝟭 - Test suites & CI/CD (v6.1.1) ✅ 𝗣𝗵𝗮𝘀𝗲 𝟮 - React 18/19 support, tooling modernization (v7.0.0) ✅ 𝗣𝗵𝗮𝘀𝗲 𝟯 - IntersectionObserver core rewrite (v7.1.0 & v7.2.0) 🔜 𝗣𝗵𝗮𝘀𝗲 𝟰 - Accessibility & documentation npm install react-infinite-scroll-component@latest We're actively looking for contributors to help make this the best scroll library out there. Browse the open issues on GitHub, pick something that interests you, or file a new one if you think something's worth working on. 𝗘𝘃𝗲𝗿𝘆 𝗰𝗼𝗻𝘁𝗿𝗶𝗯𝘂𝘁𝗶𝗼𝗻 𝗰𝗼𝘂𝗻𝘁𝘀. 🙌🏻 #OpenSource #React #JavaScript #WebDevelopment #Maintainership #Community

Our researcher Sławomir Zakrzewski uploaded a YAML file to a shared MLflow instance. When another user opened the run, JavaScript executed in their browser. Here's what happened. MLflow stores model artifacts - YAML configs, pickle files, dependency specs. When you open a run in the web UI, the frontend fetches that YAML and parses it client-side. The parser it uses supports a tag called !!js/function. That tag doesn't just read data. It constructs live JavaScript objects. The safe version of the parser - the one that strips these tags - was already used in two other places in the same codebase. The artifact viewer used the unsafe one. It's CVE-2026-33865, CVE-2026-33866 - Full write-up in the comments.

Day 22 #100DaysOfCode 💻 1. Difference between map and filter? — B. map transforms, filter selects 2. What triggers this? (addEventListener) — B. Button click 3. What happens here? (onclick) — B. Runs on click 4. What is the output? (map without return) — B. [undefined, undefined, undefined] 5. Which is correct to get input value? — B. value 6. What is the output? (array.find) — B. 2 7. What does async/await simplify? — B. Callbacks 8. What is the output? (array.filter) — B. [3, 4] 9. Which is best for spacing between flex items? — B. gap 10. What does querySelector do? — B. First match 11. Layout direction (Tailwind flex-col md:flex-row) — B. Column on small, row on medium+ 12. Why does map return undefined? — B. Missing return 13. What does JSON.stringify() do? — A. Converts object to string 14. What does Array.push() do? — A. Adds element to the end 15. What is the use of the spread operator (...) ? — C. Copying or merging arrays/objects 16. How to save data in LocalStorage? — B. setItem('key', 'value') 17. Difference between const and let — A. const cannot be reassigned 18. == vs === — B. === checks both value and type 19. What is the output of typeof null? — C. "object" 20. What is Hoisting? — A. Moving declarations to the top 21. Why is useState used in React? — B. To manage component state 22. What does p-4 mean in Tailwind? — A. Padding on all sides 23. What does Array.reduce() do? — B. Accumulate values to a single result 24. Why use event.preventDefault()? — A. Stops default browser behavior 25. Which method does fetch() use by default? — A. GET 🚀 #javascript #reactjs #webdevelopment #frontenddeveloper #coding #learninginpublic #Akbiplob