Replace JSON.parse(JSON.stringify(obj)) with structuredClone

Great reminder. We often inherit these 'quick fixes' from legacy StackOverflow answers without questioning if the answers are completely relevant to our queries. Swapping these out is a low-effort, high-impact way to improve codebase reliability. If you're still seeing this in your PRs, it might be time for a quick internal documentation update or an ESLint rule.

𝐀 𝐑𝐞𝐚𝐥 “𝐀𝐡𝐚” 𝐌𝐨𝐦𝐞𝐧𝐭 𝐢𝐧 𝐍𝐞𝐱𝐭.𝐣𝐬 Today I learned something very important while building my Blog Platform with Next.js Server Actions and it completely changed how I think about “data”. 𝑾𝒉𝒂𝒕 𝑰 𝒘𝒂𝒔 𝒅𝒐𝒊𝒏𝒈: I implemented an Admin Create Blog feature using: • Server Actions • useActionState • Cache revalidation with revalidatePath() The UI showed “Blog created successfully”, but the new blog was not actually persisting. At first glance, it felt confusing. 𝑻𝒉𝒆 𝑲𝒆𝒚 𝑹𝒆𝒂𝒍𝒊𝒛𝒂𝒕𝒊𝒐𝒏 (𝑽𝒆𝒓𝒚 𝑰𝒎𝒑𝒐𝒓𝒕𝒂𝒏𝒕) 𝘔𝘶𝘵𝘢𝘵𝘪𝘯𝘨 𝘢 𝘑𝘢𝘷𝘢𝘚𝘤𝘳𝘪𝘱𝘵 𝘢𝘳𝘳𝘢𝘺 𝘪𝘴 𝘕𝘖𝘛 𝘵𝘩𝘦 𝘴𝘢𝘮𝘦 𝘢𝘴 𝘴𝘢𝘷𝘪𝘯𝘨 𝘥𝘢𝘵𝘢. I was storing blogs in a JS file (blogs.js) and using blogs.push(). That works only in memory, not persistently. In modern Next.js: • Server Actions run in isolated contexts • In-memory data can reset on reload or re-render • Real persistence requires file system or a database 𝑾𝒉𝒂𝒕 𝑰 𝒕𝒓𝒖𝒍𝒚 𝒍𝒆𝒂𝒓𝒏𝒆𝒅 𝒕𝒐𝒅𝒂𝒚: ✅ Difference between mutation vs persistence ✅ Why real apps need databases or file-based storage ✅ How Server Actions handle mutations correctly ✅ Why cache revalidation alone is not enough ✅ How Next.js enforces production-grade architecture This was not a “bug”, it was a conceptual gap and fixing that gap matters more than fixing syntax. 𝑩𝒊𝒈𝒈𝒆𝒔𝒕 𝒕𝒂𝒌𝒆𝒂𝒘𝒂𝒚: If data matters, it must live outside memory. Frameworks don’t hide this, they teach it. (Day 17 of my Next.js learning series) #Nextjs #Reactjs #JavaScript #FrontendDevelopment #WebDevelopment

🚀 JavaScript Performance Demystified Ever wondered why your JS app slows down even when your code “works”? Most performance issues aren’t caused by slow code—they come from misaligned data structures. In my latest blog, I dive into how V8 optimizes objects, arrays, and maps, and share practical tips to: - Keep objects consistent - Avoid sparse arrays - Use Maps for dynamic data - Make hot paths predictable If you write JavaScript, this guide will help you write faster, cleaner, and more efficient code. Read it here 👉 https://lnkd.in/g--rcepp #javascript #webdev #frontend #performance #optimization #v8

Stop writing long if checks for data. Here is why. 👇 In modern React development, handling deeply nested objects (like API responses) can quickly turn your code into a mess of validation logic. One common nightmare is the dreaded error: "Cannot read properties of undefined". If you want to write safer, cleaner code without crashing your app, you need to master Optional Chaining (?.). 1. Optional Chaining (For Safe Access) Instead of checking every single level of an object to see if it exists, ?. allows you to read a value deep inside an object chain. If any reference is null or undefined, the expression simply short-circuits and returns undefined. ❌ Bad (The "Pyramid of Doom"): JavaScript const UserProfile = ({ user }) => {  if (user && user.details && user.details.address) {   return <p>{user.details.address.city}</p>;  }  return <p>No City</p>; }; ✅ Good (The React Way): JavaScript const UserProfile = ({ user }) => {  return <p>{user?.details?.address?.city}</p>; }; 2. Nullish Coalescing ?? (For Default Values) Optional Chaining works best when paired with the ?? operator. This allows you to provide a fallback value (default) if the data is missing, rather than rendering nothing. ✅ Clean Fallback Logic: JavaScript // If city is undefined, "Unknown City" is shown. const city = user?.details?.address?.city ?? "Unknown City"; 💡 Pro Tip: This is a lifesaver when working with Headless CMS or external APIs where some fields might be empty. It prevents your React components from breaking due to missing data. Safe code is confident code. Have you stopped using && chains for object checking yet? Let me know. ⬇️ #ReactJS #JavaScript #CleanCode #FrontendDevelopment #WebDevelopment #CodingTips

Sometimes, the simplest solution is just good old-fashioned server-side routing. We talk a lot about client-side routing in React/Vue, but handling dynamic routes in the backend with Express.js is arguably the cleanest implementation out there. If you need to build a personalized endpoint—like simulating a login for /dashboard/:username—you don't need complex config files. You just need the colon syntax. Here is the pattern I use for quick dynamic endpoints: 1) The Route Definition Use the colon (:) to tell Express that username is a variable, not a literal string. 2) The Extraction Express automatically maps that segment into the req.params object. No parsing required. JavaScript const express = require('express'); const app = express(); // The dynamic route app.get('/dashboard/:username', (req, res) => { // 1. Capture the parameter const { username } = req.params; // 2. Simulate logic (DB lookup, Auth check, etc.) console.log(`Processing login for: ${username}`); // 3. Return personalized response res.json({ status: 'success', message: `Welcome to your dashboard, ${username}!`, timestamp: new Date() }); }); app.listen(3000, () => console.log('Server ready ')); It’s readable, testable, and reliable. Pro-tip: Don't forget to add a regex validator if you want to restrict what that username can look like (e.g. /dashboard/:username(\\w+)). Backend devs—do you prefer handling this logic at the gateway level or right inside the controller? #expressjs #nodejs #backenddevelopment #api #webdev #javascript

Stop using for loops in React. Here is why. 👇 In modern React development, how you manipulate data determines the performance and readability of your application. One common mistake I see in legacy codebases is the overuse of for loops. If you want to write clean, "React-way" code, you need to master Array Methods. 1. The .map() method (For Rendering) Instead of pushing items into an empty array, .map() transforms data and returns a new array automatically. This is declarative and keeps your JSX clean. ❌ Bad: JavaScript let names = []; for (let i = 0; i < users.length; i++) {  names.push(users[i].name); } ✅ Good (The React Way): JavaScript const names = users.map(user => user.name); 2. The .filter() method (For Deleting) In React state, we never mutate the original array. .filter() is perfect because it returns a copy of the array without the unwanted item. ✅ Clean Delete Logic: JavaScript const deleteUser = (id) => {  setUsers(prev => prev.filter(user => user.id !== id)); }; 💡 Pro Tip: Always prefer Immutability. Methods like map, filter, and reduce do not change the original data, which prevents unexpected bugs in React's re-rendering cycle. Writing less code is good. Writing predictable code is better. What is your favorite ES6 feature? Let's discuss in the comments. ⬇️ #ReactJS #JavaScript #CleanCode #FrontendDevelopment #WebDevelopment #CodingTips

📘 Backend Concepts Explained Simply (Callbacks, Express JSON, CORS & Proxy) Sharing my personal notes while revising some core backend & frontend integration concepts. Writing things in your own words really helps solidify understanding. 🔁 Callback Function A callback function is a function passed as an argument to another function, which is executed later. It’s commonly used in asynchronous operations like API calls, file handling, or timers. 📦 express.json() Middleware express.json() allows the server to accept JSON objects instead of raw JSON sent from the browser. Replaces the need for body-parser Automatically parses incoming JSON requests Returns 400 Bad Request if malformed JSON is received 🌐 CORS (Cross-Origin Resource Sharing) CORS is a browser security mechanism that controls how a web app from one origin (domain/port) can access resources from another. If CORS is enabled (app.use(cors())), APIs can be accessed from the frontend If not enabled, browsers block frontend access even though the request is sent Ways to handle CORS: Backend CORS (Recommended for production) app.use(cors()) Proxy (Development-only workaround) A shortcut to avoid CORS during local development 🔄 Proxy (Dev-only Concept) Think of a proxy like a friend giving attendance for you 😄 Example: Client: localhost:3000 Server: localhost:5000 Proxy set to: http://localhost:5000 Flow: Client sends request to /api/users React dev server intercepts it Forwards request to port 5000 Backend thinks the request came directly to it ➡️ Proxy changes how the browser sends requests, not how the backend receives them. 🧠 Important Insight Browser always sends the request and backend always returns data If CORS is enabled, browser also gets permission headers → JS can access data If proxy is used, browser thinks it’s same-origin → CORS check doesn’t happen If neither is used, browser still gets data but blocks JS from accessing it 📌 Learning by explaining concepts in simple words — helps a lot! If you’re revising MERN / backend fundamentals, hope this helps 🚀 #WebDevelopment #Backend #MERN #ExpressJS #CORS #LearningInPublic #JavaScript

🚨 This is the kind of React code you only write after being burned in production. At some point, you realize that data fetching isn’t about “getting data”. It’s about cancellation, race conditions, cache safety, and component lifecycles. Here’s a simplified version of a hook I’ve used in production 👇 ``` function useSafeAsync<T>(asyncFn: (signal: AbortSignal) => Promise<T>) {  const abortRef = React.useRef<AbortController | null>(null);  const mountedRef = React.useRef(true);  React.useEffect(() => {   return () => {    mountedRef.current = false;    abortRef.current?.abort();   };  }, []);  const run = React.useCallback(async () => {   abortRef.current?.abort(); // cancel previous request   const controller = new AbortController();   abortRef.current = controller;   try {    const result = await asyncFn(controller.signal);    if (!mountedRef.current) return;    return result;   } catch (e: any) {    if (e.name === 'AbortError') return;    throw e;   }  }, [asyncFn]);  return run; } ``` 🧠 Why this code exists Because in real apps: -Components unmount while requests are in flight -Users trigger the same action multiple times -Slow networks expose race conditions -“Can’t perform a React state update on an unmounted component” will happen -This hook explicitly handles: ✅ Request cancellation ✅ Stale responses ✅ Component lifecycle safety #JavaScript #WebDevelopment #FrontendTips #IntlAPI #CodeSmart #ReactJs #Frontend #FullStack #Developer #coding #components #WebDevelopment #CleanCode #DevTips #OneLiners #100DaysOfCode #JavaScript #LinkedInTechCommunity 

Why useEffect Is Used Less in Modern React (and What Replaces It) useEffect is not deprecated. It’s not “bad”. But in modern React, we’ve learned to use it more intentionally. Earlier, useEffect was often used for: 1. Fetching data 2. Syncing one state with another 3. Running logic after every render Over time, this caused problems. The core issue with useEffect useEffect runs after render and is meant for side effects — things that happen outside React. When we use it to: 1. Manage data 2. Derive state 3. Control UI logic we introduce: 1. Extra renders 2. Complex dependency arrays 3. Hard-to-debug behavior In many cases, the effect exists only to “fix” state that could have been correct during render. What modern React encourages instead 1. Derive state during render If a value can be calculated from props or state, compute it directly instead of syncing it with an effect. This keeps components predictable and easier to reason about. 2. Use dedicated data-fetching tools (like TanStack Query) Data fetching is not just a side effect — it involves caching, retries, refetching, and background updates. Libraries like TanStack Query handle this declaratively, without manual effects or state management. 3. Server Components & Server Actions In frameworks like Next.js, data can be fetched on the server and sent ready to render. This removes the need for client-side effects for initial data loading and improves performance. 4. Suspense for async UI Suspense allows React to manage loading states at the rendering level instead of inside effects. When useEffect is still the right choice useEffect is still essential when interacting with things outside React: 1. Browser APIs 2. Subscriptions (WebSocket, events) 3. Timers 4. Analytics That’s exactly what it was designed for. Key takeaway Modern React doesn’t remove useEffect. "It reduces misuse by providing better, more specialized tools. If something can be derived, fetches data, or belongs on the server — useEffect is probably not the best tool." #ReactJS #FrontendDevelopment #ModernReact #JavaScript #TanStackQuery #WebDevelopment #ReactBestPractices #SoftwareEngineering