Handling Form Values in React: State, useRef, and FormData

Most developers still deep clone objects like this: JSON.parse(JSON.stringify(data)) It works. Until it doesn't. Dates become strings. Functions vanish. undefined disappears silently. Circular references throw an error. There's a native alternative that actually handles these cases — and most developers don't know it exists. One caveat: structuredClone() doesn't clone functions or class instances — it's designed for data, not behavior. But for 90% of real-world cases, that's exactly what you need. Available natively in all modern browsers and Node.js 17+ — no library required. Are you still using JSON tricks for deep cloning? 👇 #JavaScript #WebDevelopment #Frontend #JS #SoftwareEngineering

What if you could guarantee the integrity of your data by validating it at the earliest possible stage in your NestJS application? That's where class-validator comes into play, a popular library used for validating DTOs in NestJS. Let's say you have a simple user registration endpoint, and you want to ensure that the username and password meet certain criteria. You can create a DTO with validation metadata using class-validator. ```javascript import { validate } from 'class-validator'; class UserDTO { @IsString() @MaxLength(20) username: string; @IsString() @MinLength(8) password: string; } ``` In this example, the `@IsString()` decorator checks if the username and password are strings, while `@MaxLength(20)` and `@MinLength(8)` validate their lengths. So, how are you handling validation in your NestJS applications? 💬 Have questions or working on something similar? DM me — happy to help. #NestJS #ClassValidator #Validation #NodeJS #BackendDevelopment #TypeScript #DTO #DataIntegrity

JavaScript Polyfills (forEach, map, filter, reduce): I explored how commonly used JavaScript array methods work internally by creating my own custom polyfills. ✔ forEach() – Iterates over each element (no return) ✔ map() – Transforms data and returns a new array ✔ filter() – Returns elements that satisfy a condition ✔ reduce() – Accumulates values into a single output Writing these polyfills helped me understand: • Callback function execution • Internal iteration logic • How new arrays are created • How reduce builds value step-by-step • Difference between transformation and filtering This exercise improved my understanding of higher-order functions and core JavaScript fundamentals. Naveen Kumar K G Raghu K #JavaScript #Polyfill #FrontendDevelopment #WebDevelopment #LearnInPublic #MERNStack #CodingJourney #JavaScriptDeveloper #BackendDevelopment #NodeJS #ExpressJS #MongoDB

Building a Full-Stack DevBlog while mastering DSA Patterns! Today was all about bridging the gap between Frontend and Backend in my MERN stack journey. I successfully implemented: ✅ React Router for dynamic navigation. ✅ Axios GET/POST requests to a Node.js/Express backend. ✅ Dynamic UI with Tailwind CSS that handles real-time data. Next step: Connecting MongoDB for persistent storage. #MERNStack #ReactJS #WebDevelopment #DSA #BuildInPublic #SoftwareEngineering #JavaScript

If you’ve ever worked with IndexedDB, you know the struggle 😅 It feels like doing something simple… but in the most complicated way possible. Like trying to fix a fan with gloves on 🧤 👉 That’s where Dexie.js comes in. 🛠 What is Dexie.js? Think of it as a smart wrapper over IndexedDB. It converts messy, hard-to-read code into clean, modern JavaScript using Promises & async/await. Basically, same power… but 10x easier to use 👍 🌟 Why developers like it ✅ Promise-based – No more callback headache ✅ Easy queries – Filtering feels natural (almost like SQL/LINQ) ✅ Case-insensitive search – Small thing, big relief 🙌 ✅ Reactive support – Works beautifully with React, Vue, Svelte 💼 Where it really shines 📱 Offline-first apps (PWA) – Works even without internet ⚡ Fast local apps – Store large data, no loading delays 🔄 Sync-based apps – Save locally, sync to server later ✅ Pros ✔ Clean developer experience (less code, less stress) ✔ Solid documentation (very beginner-friendly) ✔ Mature & stable (handles browser quirks well) ❌ Cons ➖ Adds a little bundle size ➖ You still need basic understanding of IndexedDB ➖ Not a replacement for backend DB (client-side only) 🎯 Bottom Line If your app is doing more than just saving a “Dark Mode” setting… Dexie.js is totally worth it. Once you try it, going back to plain IndexedDB feels painful 😄 #WebDev #JavaScript #Frontend #DexieJS #ProgrammingTips #PWA

Stop writing React like it's 2021. 🛑 The ecosystem has evolved. If you want a cleaner, more performant codebase, it is time to upgrade your patterns: 🔄 Data Fetching: useEffect ❌ TanStack Query ✅ 🧠 Global State: Context API ❌ Zustand ✅ 📝 Forms: useState / useRef spam ❌ React Hook Form / React 19 Actions ✅ ⚡ Performance: useMemo / useCallback ❌ React Compiler ✅ 🎨 Styling: CSS-in-JS / bloated SCSS ❌ Tailwind CSS ✅ 🛡️ Validation: Manual checks & any ❌ Zod + TypeScript ✅ Less boilerplate. Fewer unnecessary re-renders. Better developer experience. What is a tool or pattern you finally stopped using this year? 👇 #ReactJS #WebDevelopment #Frontend #TypeScript #TailwindCSS

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

Using index as a key is dangerous Every React developer has written this at least once. items.map((item, index) => (  <li key={index}>{item}</li> )) Looks fine. Works fine. But it isn't This is Post 5 of the series: 𝗥𝗲𝗮𝗰𝘁 𝗨𝗻𝗱𝗲𝗿 𝘁𝗵𝗲 𝗛𝗼𝗼𝗱 Where I explain what React is actually doing behind the scenes. Here's what actually happens when you use index as key: You delete one item from a list. React doesn't know which item was removed. It just looks at positions. So it re-renders everything from that index downward. Input states get mismatched. Animations break. Bugs appear that you can't even reproduce consistently. And... No error. Just... wrong behavior. 🔑 Here's what React actually needs: A key isn't just something unique. It needs to be stable, unique, AND tied to the data — not the position. ❌ key={index} → breaks on delete, sort, filter  ❌ key={Math.random()} → new key every render = React destroys and recreates the node  ✅ key={item.id} → stable, reliable, React knows exactly who is who The rule is simple: If your list can ever be reordered, filtered, or deleted from... index as key will silently break your UI. Use your data's ID.  If it doesn't have one, generate it at creation — not during render. const newItem = { id: crypto.randomUUID(),   name: "New Task" } One tiny prop.  Massive impact on how React tracks your entire list. In Post 6 of React Under the Hood: What Happens When You Call setState Follow Farhaan Shaikh if you want to understand react more deeply. 👉 Read the previous post - Understanding diffing algorithm: https://lnkd.in/dzW3NP_V #SoftwareEngineering #ReactJS #WebDevelopment #JavaScript #FrontendDevelopment #BuildInPublic #LearnInPublic #ReactUnderTheHood

🔥 Still fishing your API data with useEffect? 🎣 I was doing the same… One API call — but handling loading, errors, dependency arrays, and refetch issues 😵 It felt like more work than the actual feature. Then I switched to React Query ⚡ And everything just… worked. No manual fetching. No unnecessary state management. No headaches. Just clean, synced, and reliable data. 👉 Work smarter. Not harder. Stop fishing your data 🎣 Start using React Query ⚡ Follow for more 🚀 #ReactNative #ReactNativeDevelopers #MobileAppDevelopment #ReactJS #ReactQuery #WebDevelopment #FrontendDevelopment #JavaScript #100DaysOfCode #DevCommunity #CodingLife #SoftwareEngineering #Programming #LearnToCode #Developers #TechContent #MobileApp

I wasn't trying to learn about keys. I was going deep into React's reconciliation algorithm - how the fiber tree diffs, why React bets on O(n) with positional heuristics, what "reuse" actually means at the node level.       Keys came up as a consequence of that, not as a topic on their own. So I built a small demo to feel the difference instead of just knowing it: A draggable list. Each row has local input state. Reorder without stable keys - the label moves, the typed text doesn't. React mapped state by position, not identity. The state wasn't lost. It was just attached to the wrong fiber node. Switch to key={item.id} — state follows the item through every reorder. React now has an identity contract to reconcile against. That's the actual mechanism. Not a rule. A direct consequence of how the diffing heuristic works. Going to the source of something and letting the rules fall out naturally - that's the only way I retain things long-term.                                             #React #Frontend #JavaScript #ReactInternals