Update URL in Next.js without Reloading

Stop guessing the order of your console.logs. 🛑 JavaScript is single-threaded. It has one brain and two hands. So, how does it handle a heavy API call, a 5-second timer, and a button click all at once without catching fire? It’s all about the Event Loop, but specifically, the "VIP treatment" happening behind the scenes. The Two Queues You Need to Know: 1. The Microtask Queue (The VIP Line) 💎 What lives here: Promises (.then), await, and MutationObserver. The Rule: The Event Loop is obsessed with this line. It will not move on to anything else until this queue is bone-dry. If a Promise creates another Promise, JS stays here until they are all done. 2. The Macrotask Queue (The Regular Line) 🎟️ What lives here: setTimeout, setInterval, and I/O tasks. The Rule: These tasks are patient. The Event Loop only picks one at a time, then goes back to check if any new VIPs (Microtasks) have arrived. The "Aha!" Moment Interview Question: What is the output of this code? (Most junior devs get this wrong). JavaScript console.log('Start'); setTimeout(() => console.log('Timeout'), 0); Promise.resolve().then(() => console.log('Promise')); console.log('End'); The Reality: 1. Start (Sync) 2. End (Sync) 3. Promise (Microtask - Jumps the line!) 4. Timeout (Macrotask - Even at 0ms, it waits for the VIPs) The Pro-Tip for Performance 💡 If you have a heavy calculation, don't wrap it in a Promise thinking it makes it "background." It’s still on the main thread! Use Web Workers if you really want to offload the heavy lifting. Does the Event Loop still confuse you, or did this click? Let's discuss in the comments! 👇 #JavaScript #WebDevelopment #CodingTips #SoftwareEngineering #Frontend

React 19's `useActionState` hook is the simplest way to cut form boilerplate in half. If you're still writing React 18-style form handlers with separate `useState` calls for loading, errors, and results — this hook consolidates all of that into one line. Key points: 🔹 **One hook replaces three `useState` calls** — `useActionState` returns `[state, dispatch, isPending]` in a single call 🔹 **No `e.preventDefault()` needed** — wire the action to `<form action={formAction}>` and React handles the rest 🔹 **Automatic pending state** — `isPending` is managed by React, no manual `setIsPending(true/false)` 🔹 **Works with Server Functions** — seamless integration with React Server Components 🔹 **Multiple independent actions** — use multiple `useActionState` calls in one component, each managing its own state Before (React 18): ```jsx const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [result, setResult] = useState(null); // handleSubmit with try/catch/finally ``` After (React 19): ```jsx const [state, formAction, isPending] = useActionState( async (prev, formData) => { // Your async logic return { success: true }; }, initialState ); ``` The hook is stable in React 19 and ready for production. Full deep dive with code examples here: https://lnkd.in/eHMp_Z-X What's your experience been? Have you migrated to `useActionState` yet? #react #javascript #webdevelopment #frontend #react19

JavaScript Closures are confusing… until they’re not ⚡ Most developers memorize the definition but struggle to actually understand it. Let’s simplify it 👇 💡 What is a closure? A closure is when a function 👉 remembers variables from its outer scope even after that scope is finished 🧠 Example: function outer() { let count = 0; return function inner() { count++; console.log(count); }; } const fn = outer(); fn(); // 1 fn(); // 2 fn(); // 3 ⚡ Why this works: inner() still has access to count even after outer() has executed 🔥 Where closures are used: • Data hiding • State management • Event handlers • Custom hooks in React #JavaScript #FrontendDeveloper #ReactJS #CodingTips #WebDevelopment

I was repeating the same logic in every component… and it started getting messy 😅 Yes, seriously. For a long time, I was doing this in React: useEffect(() => { fetchData(); }, []); const [data, setData] = useState(); const [loading, setLoading] = useState(false); Same pattern… in multiple components ❌ ⚠️ This caused: • Code duplication • Hard-to-maintain components • Bigger, messy files 💡 Then I changed my approach: Instead of repeating logic everywhere, 👉 I created a custom hook 🧠 Example: useFetch(url) Handles: • API call • Loading state • Error handling ✅ Result: • Cleaner components • Reusable logic • Easier maintenance 🔥 What I learned: If you’re repeating the same logic… you’re probably missing a custom hook. #ReactJS #FrontendDeveloper #JavaScript #CodingTips #WebDevelopment

The React pattern that eliminated 80% of my useEffect calls Most useEffect calls are just bad data derivation. Here is the derived state pattern that cleaned up years of accumulated complexity in my React components. Full breakdown (6 min read) → https://lnkd.in/gsS5RKC4 #ReactJS #Frontend #JavaScript #TypeScript #WebDev #UIEngineering

=> While building my own version of Tailwind CSS, I came across a really useful Node.js package called chokidar — and it completely changed how I think about development workflows. At first, I was focused on generating utility classes and structuring my CSS system. But then I needed a way to automatically detect file changes and rebuild styles instantly… that’s when chokidar came in. 👀 chokidar is a powerful file-watching library that monitors files and directories and triggers actions whenever changes happen. 💡 Why it’s useful:Instead of manually running build commands every time I updated a file, chokidar helped automate the process — making development faster and smoother. ⚙️ Its purpose: 🔥 In my case:Every time I edited a file → chokidar detected the change → automatically rebuilt my Tailwind setup → instant feedback! wanna checkout-https://lnkd.in/gKbV3ubK Hitesh Choudhary |Piyush Garg |Chai Code #WebDevelopment #NodeJS #JavaScript #TailwindCSS #LearningInPublic #BuildInPublic #DevTools #cohort26

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

Most React devs know the shorthand fragment syntax: <> </> Clean. No extra DOM nodes. Love it. But here's the catch. It doesn't accept props. So when you're mapping over a list and need to add a key, this won't work: posts?.map(post => (  <>   <PostTitle title={post.title} />   <PostBody body={post.body} />  </> )) React needs that key to efficiently track and update list items. Without it, you'll get warnings and potential rendering bugs. The fix? Use the full Fragment syntax: import { Fragment } from 'react'; posts?.map(post => (  <Fragment key={post?.id}>   <PostTitle title={post?.title} />   <PostBody body={post?.body} />  </Fragment> )) You get: No extra DOM wrapper Proper keys on list items Clean, valid JSX Small detail. Big difference in correctness. Save this for the next time you're mapping over data with multi-element rows. #React #JavaScript #Frontend #WebDev #ReactJS

⚡ JavaScript Performance: Common Pitfalls Avoid these performance killers: 1. **DOM manipulation in loops** ```js // Bad for (let i = 0; i < 1000; i++) { document.body.appendChild(createElement()); } // Good const fragment = document.createDocumentFragment(); for (let i = 0; i < 1000; i++) { fragment.appendChild(createElement()); } document.body.appendChild(fragment); ``` 2. **Unnecessary re-renders in React** ```js // Use useMemo, useCallback, React.memo ``` 3. **Blocking the main thread** ```js // Use Web Workers for heavy computation ``` What's your biggest JavaScript performance fix? #JavaScript #Performance #Frontend #Optimization

🚨 I used index as key in React… …and spent HOURS debugging something that made no sense. Everything looked fine at first. Until I: → deleted an item → reordered the list 💥 Suddenly: ❌ Wrong data was displayed ❌ UI behaved randomly ❌ Bugs I couldn’t explain I kept checking my logic. Turns out… the bug wasn’t my logic. 👉 It was THIS: {data.map((item, index) => ( <div key={index}>{item.name}</div> ))}💡 Problem: React uses keys to track identity. When you use index: → identity = position ❌ → not the actual item So when the list changes… React gets confused 😵 ✅ Fix: {data.map((item) => ( <div key={item.id}>{item.name}</div> ))}👉 Stable key = stable UI 💡 Lesson: If your UI feels “random”… check your keys before your logic. Follow me for more such tips ✍️ 👨💻 #ReactJS #Frontend #JavaScript #SoftwareEngineering