Optimize React Forms with Single State Object

🚀 💡 JavaScript Tricky Question Explanation const arr = [4, 10, 2, 8]; const result = arr.find(num => num > 5) + arr.findIndex(num => num > 5); console.log(result); 👉 Output: 11 👉 Explanation: * find() returns the first value > 5 → `10` * findIndex() returns its index → `1` * Final result → `10 + 1 = 11` ⚡ Both stop at the **first match** #JavaScript #WebDevelopment #Frontend #CodingInterview #JSConcepts

𝗡𝗲𝘅𝘁.𝗷𝘀 𝟭𝟲 𝘄𝗶𝘁𝗵 𝘁𝗵𝗲 𝗡𝗲𝘄 𝗥𝗲𝗮𝗰𝘁 𝗖𝗼𝗺𝗽𝗶𝗹𝗲𝗿: 𝗪𝗵𝗶𝗰𝗵 𝘁𝗿𝗮𝗻𝘀𝗽𝗶𝗹𝗲𝗿 𝗶𝘀 𝗮𝗰𝘁𝘂𝗮𝗹𝗹𝘆 𝗿𝘂𝗻𝗻𝗶𝗻𝗴 (𝗦𝗪𝗖 𝗼𝗿 𝗕𝗮𝗯𝗲𝗹)? If you enable the React Compiler (came alongside React 19) in Next.js 16 this question comes up a lot because Next.js has its own SWC transpiler. Short answer: Both but they do different jobs. How it actually works (step by step): • The React Compiler (Babel plugin) analyzes your components for optimization. • It automatically adds smart memoization so you dont have to write useMemo, useCallback, and React.memo. 𝗡𝗼 𝘁𝗿𝗮𝗻𝘀𝗽𝗶𝗹𝗶𝗻𝗴 𝗵𝗮𝗽𝗽𝗲𝗻𝘀 𝗵𝗲𝗿𝗲. • Then SWC (Next.js’s faster Rust-based transpiler) does the actual transpiling. • Bundling is handled by Turbopack (default in Next.js 16). Next.js smartly combines the best of all worlds. The auto optimization of React Compiler + the raw transpiling speed of SWC + powerful bundling of Turbopack. Trade-off: Slightly slower development builds because of one extra step added i.e. optimization done by React compiler (babel plugin). Is it worth it? Yes. fewer re-renders and better performance for your users in production. #react #nextjs #javascript #fullstack #webdevelopment

Still using JavaScript the same way you did a few years ago? 👀 Modern JavaScript (ES12) introduces features that make your code cleaner, more readable, and easier to maintain. From improved string methods to better number readability and new operators, these updates can simplify everyday development. Explore 10 JavaScript ES12 features every developer should know. 👉 Read more: https://lnkd.in/eJHf9qmY #JavaScript #WebDevelopment #CodingTips #Developers #Frontend #Syncfusion

most developers don't understand closures and it breaks their loops. classic problem: everyone uses let now so this fixes itself but the problem is still there, just hidden. here's why it happens: - when you use var > it's function-scoped not block-scoped. - by the time the timeout runs, the loop is done and i is 3. - all three callbacks reference the fix with let: let is block-scoped so each iteration gets its own i . but here's what you should actually know: - this isn't a JavaScript problem. this is a closure problem. - every function closes over the variables around it. - understanding that changes everything about how you debug async code, event listeners, callbacks. stop memorizing the fix. understand why it happens. #javascript #typescript #webdevelopment #buildinpublic #reactjs

learned optional chaining in react today. making: IPL project 🏏 issue faced: accessing nested objects like "object.object.object" fix/learned: optional chaining ("?.") to avoid crashes & undefined errors small thing, big sanity save. #reactjs #webdev #buildinpublic #javascript

🚀 Day 2/30 – JavaScript Challenge LeetCode Problem: 2620 – Counter Today I learned about one of the most important concepts in JavaScript Closures. 🔹 Concept Explained: The inner function remembers the variable number even after the outer function has finished execution. This is called a closure. 🔹 Key Learnings: ✅ Closures help maintain state without global variables ✅ Useful in counters, ID generators, and real-world applications ✅ number++ returns the current value, then increments it #Leetcode #Day2 #JavaScript #Developers #Frontend

🧠 Day 18 of 21days challenge JavaScript WeakMap ⚡ WeakMap is a collection where keys must be objects. It helps in memory management because keys are weakly referenced. For easy understanding :- WeakMap = object keys only Garbage collected if no other references Useful to store private data 👉 That’s how memory leaks can be prevented This changed how I manage objects efficiently 🚀 #JavaScript #WeakMap #InterviewPrep #Frontend

Day 6 — Find Second Largest Number in an Array (JavaScript) Problem Write a function to find the second largest number in an array. Example Input: [10, 5, 8, 20] Output: 10 Approach First find the largest number, then find the largest number smaller than it. Code function secondLargest(arr){ let largest = -Infinity let second = -Infinity for(let i = 0; i < arr.length; i++){ if(arr[i] > largest){ second = largest largest = arr[i] } else if(arr[i] > second && arr[i] !== largest){ second = arr[i] } } return second } console.log(secondLargest([10,5,8,20])) Alternative Approach function secondLargest(arr){ let sorted = [...new Set(arr)].sort((a,b) => b-a) return sorted[1] } What I Learned How to track two maximum values in a single loop. #javascript #frontenddeveloper #codingpractice #webdevelopment

🧠 React Doesn’t Update State Immediately (Even Inside the Same Function) Most people know state is async. But here’s the part many don’t realize 👇 Example const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); if (count === 0) { console.log("Still zero?"); } } You click the button. Expected: count = 1 But inside that function… 👉 count is still 0 🔍 Why? Because React doesn’t update state inside the current render cycle. It schedules the update and re-renders later. 🧠 The tricky part Even this won’t work: setCount(count + 1); setCount(count + 1); 👉 Final result = +1, not +2 ✅ Correct way setCount(prev => prev + 1); setCount(prev => prev + 1); Now React uses the latest value. 🎯 The Real Insight State inside a function is a snapshot, not a live value. 💥 Why this matters This causes: Unexpected conditions Wrong calculations Confusing bugs #ReactJS #FrontendDevelopment #JavaScript #ReactHooks #WebDevelopment #CodingTips #LearningInPublic

Most JS developers use closures daily without knowing it. counter() finished running, but increment still remembers count. That's a closure. How does it remember? When a function is created in JavaScript, it doesn't just save the code — it also saves a reference to the variables around it at that moment. So even after the outer function is gone, that reference stays alive in memory as long as the inner function exists. Think of it like this the inner function carries a backpack of its outer variables wherever it goes. 🎒 You already use this in React's useState, debounce, and event handlers. Once I understood this, my React bugs started making sense. 🙂 Did closures confuse you at first? Drop a comment 👇 #JavaScript #MERN #WebDevelopment #LearningInPublic