React useCallback vs useMemo: What's the difference

⚡ Day 4 of 30: Mastering useState – The Heartbeat of Interactive React Yesterday I learned how to pass data down. Today I learned how to make components remember and respond. Enter useState — the hook that gives functional components memory. 🧠 What I Internalized Today: 1️⃣ Props vs. State Props are read‑only configuration from parents. State is internal, mutable data the component owns. This distinction is fundamental to React's predictable data flow. 2️⃣ State Triggers Re‑renders Calling setState schedules a re‑render. React diffs the Virtual DOM and surgically updates only what changed. Efficient and elegant. 3️⃣ Immutability is Non‑Negotiable Direct mutation (array.push(), obj.name = 'x') will not trigger a re‑render. Always create a new reference using the spread operator (...) or methods like .map() / .filter(). 4️⃣ Multiple States > One Giant Object Following the Single Responsibility Principle: separate useState calls for independent values make code cleaner and re‑renders more predictable. 5️⃣ Functional Updates for Stale Closures When new state depends on previous state, use the callback form: setCount(prev => prev + 1). This ensures you're always working with the latest snapshot. 🛠️ Today's Builds (All Interactive): ✅ Counter App – Increment, decrement, reset. The classic. ✅ Color Toggler – Conditional styling based on boolean state (Light/Dark mode). ✅ Controlled Form – Inputs fully synchronized with React state. ✅ Cart Item Quantity Changer – Updating nested object state with the spread operator. ✅ Todo List (Mini Build) – Full CRUD operations on an array state (add, toggle complete, delete, remaining count). 📁 GitHub Streak: Day 4 ✅ Every day's code is committed, documented, and pushed. This repository is becoming a living portfolio of deliberate React practice. Next Up: Day 5 – Events & Handlers. Deepening interactivity! #ReactJS #useState #WebDevelopment #Frontend #JavaScript #30DaysOfReact #LearningInPublic #ReactHooks #CodeNewbie #StateManagement

you've been using useEffect + useState to fetch data. React 20 stable use() hook makes that pattern obsolete. one hook. Suspense integration. no loading state. no race conditions. why it's better: use() reads promises and works with Suspense boundaries. the component suspends while loading. no manual state management. no effect cleanup. the promise resolves, React resumes. that's it. it also works conditionally unlike useContext which must follow hook rules. the code: one line replaces a whole pattern. #reactjs #typescript #webdevelopment #buildinpublic #react #src

"React me unnecessary re-renders ho rahe hain?" 🤔 You might need useMemo or useCallback ⚡ Let’s simplify the difference 👇 🔹 useMemo 👉 Memoizes a value 👉 Prevents expensive recalculations 💻 Example: const memoizedValue = useMemo(() => { return expensiveFunction(data); }, [data]); 🔹 useCallback 👉 Memoizes a function 👉 Prevents function recreation on every render 💻 Example: const memoizedFn = useCallback(() => { doSomething(); }, []); 🔹 Key Difference 👉 useMemo → returns a value 👉 useCallback → returns a function 🔹 When to use? - useMemo → heavy calculations 🧠 - useCallback → passing functions to child components 👇 🚀 Pro Tip: Don’t overuse them! Use only when performance issues actually exist. 💬 Have you used these hooks in real projects? #reactjs #javascript #webdevelopment #mern #developers

How do you parse MDX in Next.js with a 0 KB client bundle? 🤔 After months of development and testing, I’m incredibly proud to announce the public launch of Omni-Core (and its stable release v1.1.0)! 🎉 Historically, MDX rendering in React has always been a trade-off: either you sacrifice build speed, or you bloat the client bundle, which hurts performance. And with the arrival of React Server Components (RSC), getting complex ASTs to coexist with the JS ecosystem (Rehype/Unified) has proven to be a real sanitization headache. With Omni-Core, we tackled the problem at its root: moving everything to a native Rust engine. Here’s what’s under the hood 🛠️: 🦀 Native Rust core (napi-rs): A parser 10 to 50 times faster than in JS, using a zero-copy memory architecture to communicate with V8. ⚛️ 100% Server Components: MDX is parsed on the server and sent to the browser as pure static HTML. No parsing logic is sent to the client. 🛡️ Unified/HAST Bridge: Your favorite Rehype plugins (syntax highlighting, etc.) work natively without destroying your component metadata or LaTeX formulas. 🐍 Web & Desktop Parity: This same Rust engine powers our Python library for native rendering (PyQt5) that is strictly identical to the web version. The project is entirely open-source. If you’re interested in extreme optimization, Next.js, or Rust/V8 interoperability, feel free to check out the repo and the documentation! 👇 🔗 GitHub: https://lnkd.in/eQDiZfut 📖 Documentation: https://omni-core.org/mdx Your feedback or pull requests are welcome! And a little ⭐️ on the repo is always appreciated to support the project. #Nextjs #Rust #ReactJS #OpenSource #WebPerformance #DeveloperTools #OmniCore

DevCommands Hub – Save Time, Code Faster Developers often waste a lot of time repeatedly searching for CLI commands while working across different tools and platforms. To solve this, I built DevCommands — a searchable, categorized reference tool for commonly used developer commands. 💡 Key Features: 🔍 Search & filter commands instantly 📋 One-click copy to clipboard 🗂️ Clean category-based navigation ⚡ What makes it powerful? At the top of every guide, you can define your variables once — and all commands automatically adapt to your project. No more manually editing commands again and again — you get personalized commands tailored to your workflow. 🌐 Try it here: https://lnkd.in/gfbv5G7y This project focuses on improving developer productivity by reducing repetitive effort and context switching. Would love your feedback and suggestions! 🙌 #WebDevelopment #DeveloperTools #ReactJS #Productivity #OpenSource #JavaScript #vibecoding #chaicode #chaiaurcode

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

Just shipped a clean and functional Password Generator 🔑 Built this project to sharpen my core JavaScript fundamentals while focusing on real user interaction. 👉 Live demo: https://lnkd.in/dY4wYVeH 💡 Key things I worked on: - DOM manipulation (querySelector / getElementById) - Dynamic password generation logic - Randomization using "Math.random()" + "Math.floor()" - Input validation (handling edge cases like empty or invalid values) - Copy-to-clipboard functionality using "navigator.clipboard" - Smooth UI feedback using "setTimeout()" and class toggling ⚙️ What makes it interesting: Instead of just generating random characters, I structured the logic to ensure better randomness and control over how passwords are built. This project helped me better understand how JavaScript connects logic → UI → user experience. Next step: Adding customization options (uppercase/lowercase toggles, symbols control, strength meter). Would love feedback from other devs 👇 #JavaScript #WebDevelopment #FrontendDeveloper #100DaysOfCode #BuildInPublic #CodingJourney #LearnToCode #DeveloperLife #TechProjects #PortfolioProject

spent an hour making a website where you paste a URL / any image and vergil from devil may cry shows up and judgement-cuts it out of existence. 2 things i picked up: - you don't need three.js, webgl, or any shatter math to get real-time "slashes" on a webpage. a single SVG feColorMatrix + feComponentTransfer filter on a greenscreen video does it in ~10 lines of CSS. - vercel edge middleware can intercept link-preview bots (twitterbot, slackbot, imessage, discord) and dynamically spoof the OG tags of whatever URL you secretly embed. so when you share savefrom.jass.gg/?u=<any_link>, the preview card mimics the target page. recipient clicks a normal-looking link, gets ambushed. react 19, vite 8, bun. deeply useless. shipped in like an hour. link + source in the comments. #sideproject #webdev

🚀 Back in the Flow: Mastering Performance in React After a brief break, I’m back to what I love—building and solving logic. Today, I focused on optimizing search functionality using Debouncing in React. When building a search bar, hitting an API on every single keystroke is expensive and inefficient. To solve this, I implemented a custom debouncing logic inside a useEffect hook. 💡 Key Highlights of this Implementation: Controlled Input: Using useState to manage the search query. Debounce Logic: I used setTimeout to delay the API call by 700ms. This ensures the request only fires after the user has stopped typing. Memory Management: A crucial cleanup function (clearTimeout) to prevent memory leaks and race conditions if the user continues typing. Async/Await: Handling API fetching cleanly within the hook. Building these kinds of "logic-heavy" small components is what sharpens the mind for large-scale applications. It's not just about making it work; it's about making it efficient. GitHub repo : https://lnkd.in/dBw2y6m4 Consistency is the only currency in tech. Onwards and upwards! 📈 #ReactJS #WebDevelopment #MERNStack #FrontendEngineering #CodingJourney #JavaScript #Debouncing #CleanCode

I shipped a React dashboard with 40+ memoized components. The profiler was embarrassing. Here's what I found. Every component was wrapped in React.memo. Every callback was in useCallback. Every derived value was in useMemo. I thought I was being a good engineer. 𝗧𝗵𝗲 𝗽𝗿𝗼𝗳𝗶𝗹𝗲𝗿 𝘁𝗼𝗹𝗱 𝗮 𝗱𝗶𝗳𝗳𝗲𝗿𝗲𝗻𝘁 𝘀𝘁𝗼𝗿𝘆: → 200+ unnecessary renders per interaction → Memory allocation spiking on every keystroke → Frames dropping below 60fps during filter operations The irony? The memoization itself was causing the slowdown. Unstable object references being passed as deps. useCallback wrapping functions that didn't need stability. React.memo on components that rendered in 0.1ms anyway. Every "optimization" was a small tax. 40 components. Multiplied. I spent a day removing memo. Performance improved immediately. The lesson I took away: 𝗢𝗽𝘁𝗶𝗺𝗶𝘇𝗮𝘁𝗶𝗼𝗻 𝘄𝗶𝘁𝗵𝗼𝘂𝘁 𝗽𝗿𝗼𝗳𝗶𝗹𝗶𝗻𝗴 𝗶𝘀 𝗴𝘂𝗲𝘀𝘀𝗶𝗻𝗴. 𝗔𝗻𝗱 𝗰𝗼𝗻𝗳𝗶𝗱𝗲𝗻𝘁 𝗴𝘂𝗲𝘀𝘀𝗶𝗻𝗴 𝗶𝘀 𝘁𝗵𝗲 𝗺𝗼𝘀𝘁 𝗱𝗮𝗻𝗴𝗲𝗿𝗼𝘂𝘀 𝗸𝗶𝗻𝗱. Profile first. Memoize second. Only what the profiler tells you to. What React "best practice" did you have to unlearn? #React #Frontend #JavaScript #WebPerformance #SoftwareEngineering