How to use React 18's useTransition hook for smooth UI updates

🔥 React Tip: Stop Using useEffect for Derived State🔥 Many developers reach for useEffect when they want to compute values based on props or state. This creates unnecessary re-renders and bugs. ❌ Don't do this: function Cart({ items }) { const [total, setTotal] = useState(0); useEffect(() => { setTotal(items.reduce((sum, item) => sum + item.price, 0)); }, [items]); return <div>Total: ${total}</div>; } ✅ Do this instead: function Cart({ items }) { const total = items.reduce((sum, item) => sum + item.price, 0); return <div>Total: ${total}</div>; } Why? → Eliminates an entire render cycle → No synchronization bugs → Simpler mental model → Better performance To improve performance, use memoization: function Cart({ items }) { const total = useMemo( () => items.reduce((sum, item) => sum + item.price, 0), [items] ); return <div>Total: ${total}</div>; } 💡 Rule of thumb: If you can calculate it during render, don't use useEffect to sync it into state. 𝗣𝗦: 𝗗𝗼𝗻'𝘁 𝗳𝗼𝗿𝗴𝗲𝘁 𝘁𝗼 𝗰𝗵𝗲𝗰𝗸 𝗼𝘂𝘁 𝘁𝗵𝗲 𝗺𝗮𝘀𝘀𝗶𝘃𝗲 𝗼𝗳𝗳𝗲𝗿 𝗼𝗳 𝟵𝟯% 𝗱𝗶𝘀𝗰𝗼𝘂𝗻𝘁 𝗼𝗻 𝘁𝗵𝗲 𝗣𝗿𝗼 / 𝗟𝗶𝗳𝗲𝘁𝗶𝗺𝗲 𝗦𝘂𝗯𝘀𝗰𝗿𝗶𝗽𝘁𝗶𝗼𝗻. 𝗟𝗶𝗻𝗸 𝗶𝗻 𝘁𝗵𝗲 𝗰𝗼𝗺𝗺𝗲𝗻𝘁 𝗮𝗻𝗱 𝗶𝗻 𝘁𝗵𝗲 𝗳𝗲𝗮𝘁𝘂𝗿𝗲𝗱 𝘀𝗲𝗰𝘁𝗶𝗼𝗻 𝗼𝗳 𝗺𝘆 𝗟𝗶𝗻𝗸𝗲𝗱𝗜𝗻 𝗽𝗿𝗼𝗳𝗶𝗹𝗲. #javascript #reactjs #nextjs #webdevelopment

💭 Ever wished window.confirm() could show your own custom modal? I did — and got tired of juggling modal states, callbacks, and context just to ask: “Are you sure?” So I built a small helper for myself… and figured others might find it useful too 👇 👉 @sghere/react-confirm A minimal, promise-based confirm utility for React — lightweight, zero-config, and works beautifully with your own UI. ✨ Features 🧩 Zero configuration — works out of the box ⚛️ Fully compatible with React 16+ and 18 💬 Promise-based API: await confirm({...}) 🧠 Type-safe with ConfirmOptions support 🎨 Tailwind-ready styling — easily themeable 🪶 Lightweight — under 5 KB gzipped 📦 Installation npm install @sghere/react-confirm # or yarn add @sghere/react-confirm # or bun add @sghere/react-confirm ⚠️ Requires react and react-dom as peer dependencies 🚀 Quick Start import { confirm } from "@sghere/react-confirm"; import "@sghere/react-confirm/dist/react-confirm.css"; <button onClick={() => { confirm({ heading: "Are you sure?", body: "This will be deleted", onConfirm: () => { alert("Deleted ✅"); }, }); }} > Delete Item </button> It’s a small utility — nothing fancy — but it’s made my workflow cleaner and faster. If you give it a try, I’d love your thoughts or suggestions to make it better 🙌 #React #OpenSource #Frontend #JavaScript #ReactJS #WebDev #DeveloperTools #DevCommunity

🚀 Deep Dive into React's useRef Hook: What, Why & How 🚀 After mastering React Fiber, reconciliation, useState, and useEffect, it’s essential to know useRef—a hook that often gets misunderstood but is incredibly powerful. What is useRef? useRef returns a mutable object with a .current property that persists across renders. Unlike useState, updating this value does NOT cause re-renders, making it perfect for storing mutable data that doesn’t affect UI. Behind the Scenes React keeps the same ref object between renders. Changing .current just updates the value without triggering React’s reconciliation or rendering process. This makes useRef ideal to: Reference DOM elements directly. Keep any mutable value (timers, counters, previous state) without UI updates. Why useRef when we have useState? useState triggers re-renders on state change. useRef doesn’t cause re-renders, giving performance benefits where UI updates aren’t needed. Great for tracking values that persist but don’t impact rendering. Common Misconceptions ❌ useRef is only for DOM references (No! It can hold any mutable data). ❌ Updating .current causes UI updates (No, only useState does). ❌ useRef replaces all state (No, it’s complementary; useState controls reactive state). Frequent Errors to Avoid Trying to access .current too early before DOM refs are assigned. Expecting UI to update on .current changes (use state for that). Reassigning the entire ref instead of updating .current. Using useRef when reactive state is needed. Final Thoughts useRef unlocks powerful capabilities: persistent storage within renders, DOM access, and optimization by avoiding unnecessary updates. Mastering it alongside useState and useEffect elevates your React component design and performance. Are you using useRef effectively in your projects? Share your experience or questions below! 👇 #ReactJS #JavaScript #WebDevelopment #FrontendDevelopment #ReactHooks #ProgrammingTips #SoftwareEngineering #WebDev #TechTips #ReactCommunity #CodingBestPractices

“My UI was breaking… and I didn’t even know why.” Everything looked fine. Until I reordered a list. Suddenly — inputs lost values, focus jumped around, and components started behaving like they’d seen a ghost. 👀 I checked the logic. Perfect. Checked the API. Fine. Checked React itself (because of course). 😅 Then I found it… the silent troublemaker: {items.map((item, index) => ( <Component key={index} data={item} /> ))} That innocent-looking key={index} was chaos in disguise. 🧠 The secret: React uses keys to track list items between renders. If your keys shift (like when using an index), React thinks elements “moved,” not “changed.” ➡️ That’s why it messes up local state, reuses wrong DOM nodes, and breaks your UI. ✅ The fix: Use unique, stable IDs instead: {items.map(item => ( <Component key={item.id} data={item} /> ))} Index keys are fine only for static lists. For dynamic data → always use real IDs. 💬 Lesson learned: Your React UI isn’t haunted. It just needs better keys. 🗝️ Because in React… identity is everything. #ReactJS #Frontend #WebDevelopment #JavaScript #CodingHumor #100DaysOfCode #ReactDeveloper

Ever felt like debugging a slow UI update was like pouring water into a basket? We’ve all been there. We write some JS code, change some state, and suddenly our UI is sluggish. We instinctively blame the browser's "slowness." But what's really happening under the hood? React handles rendering in a way that might surprise some developers. React does not have its own magical rendering engine. React is just JavaScript running in a browser's JS engine (V8, SpiderMonkey, and so on). Every render and commit phase runs in the main thread's call stack. So how does React make complex UIs feel fast if it’s just running JS? Here’s the secret: - The "Virtual DOM" Blueprint: When the state changes, React first builds a virtual copy of the new UI in pure JS (the render phase). This is fast, as it doesn't touch the actual browser UI. - The Diffing Strategy: React then compares the new blueprint to the old one. It finds the minimal changes required to sync reality with the blueprint. - The Browser Handshake: React talks to the real browser rendering engine via standard DOM APIs. The key takeaway? React doesn't re-render the entire DOM tree every time (which would be expensive). It calculates the exact elements that need updating. This efficiency is why React feels so performant. It’s intelligent DOM manipulation. Understanding this architecture helps write better, faster code. #ReactJS #FrontendDevelopment #JavaScript #WebDev #Engineering #CareerGrowth #TechInsights

🌀 The useEffect Hook in React: The useEffect hook in React ⚛️ is used to handle side effects in functional components. Side effects are actions that affect something outside the scope of the current function — such as:🧱 updating the DOM, 🔄 setting up subscriptions, or ⏰ managing timers. 🧩 Purpose: It replaces old lifecycle methods like: 🏗️ componentDidMount 🔁 componentDidUpdate 🧹 componentWillUnmount  from class components. 🧠 Syntax: useEffect(() => {   // 🧾 Code to run   return () => {     // 🧹 Cleanup code   }; }, [dependencies]); 📘 Parameters Explained: ➡️ Effect Function ⚙️ – Contains the main logic that performs the side effect (e.g., API call or DOM manipulation).  ➡️ Cleanup Function 🧼 – An optional return function inside useEffect used to clean up resources such as event listeners or timers.  ➡️ Dependency Array 🧮 – Determines when the effect should re-run. 🧭 How the Dependency Array Works: 🔹No dependency array → Runs after every render 🔁  🔹 Empty array [ ] → Runs once after the first render 🏁  🔹 Array with values [a, b] → Runs when any listed value changes ⚡ ✨ Quick Tip: 💡 Keep your effects clean and focused — split multiple side effects into separate useEffect hooks for better readability and performance. hashtag #React #Redux #Javascript #WebDevelopment #Frontend #LearnToCode #UI

🚀 Back to Basics – Day 18: Rendering Bottlenecks in React & Modern Frameworks ⚙️ In the last post, we optimized JavaScript’s role in rendering — from throttling to lazy loading. But frameworks like React, Vue, and Next.js add another layer to the story: virtual rendering. 🧠 Let’s uncover where things can go wrong — and how to fix them like a pro. 💪 ✨ Why This Matters Even the most optimized browser can’t save a React app that re-renders unnecessarily. Understanding what triggers renders and how to control them keeps your UI lightning-fast. ⚡ ⚙️ 1️⃣ Reconciliation: The React Rendering Dance React compares the Virtual DOM with the previous snapshot (Diffing) and updates only what’s changed. But… too many renders = too many diffs. ✅ Use React.memo() to prevent re-rendering unchanged components ✅ Use useCallback() and useMemo() to memoize expensive logic ✅ Keep components pure — no side effects in render functions ⚙️ 2️⃣ Avoid Unnecessary State Triggers Every setState() or context update can cascade renders. Be mindful of where your state lives. ✅ Lift state up only when needed ✅ Split large contexts into smaller ones ✅ Use libraries like Zustand or Jotai for fine-grained state updates ⚙️ 3️⃣ Optimize Lists and Large DOM Trees Long lists are notorious for slow renders. Virtualize them to only render what’s visible. ✅ Use libraries like react-window or react-virtualized ✅ Add stable keys to avoid costly re-renders 💡 Takeaway Frameworks are powerful — but they don’t make performance automatic. When you master the art of controlled rendering, your app feels instant — even on low-end devices. 🚀 👉 Tomorrow – Day 19: We’ll go deeper into React Rendering Optimization in Real Projects —profiling tools, flame graphs, and how to find the invisible slowdowns. 🔥 #BackToBasics #React #Frontend #WebPerformance #Rendering #Optimization #JavaScript #LearningInPublic #CodingJourney #AdvancedJavaScript

💡 A powerful (and often underrated) use case for useRef in React useRef isn’t just about accessing DOM elements — it quietly solves one of the most important problems in React: preserving mutable values across re-renders without triggering re-renders. A classic example is a stopwatch ⏱️ const timerRef = useRef(null); const start = () => { timerRef.current = setInterval(() => { setSeconds((s) => s + 1); }, 1000); }; const stop = () => { clearInterval(timerRef.current); }; If we used a normal variable like let timer, React would reset it to null after every re-render (since the component function runs again). The result? Your “Stop” button wouldn’t actually stop the timer — the interval would keep running in the background. useRef prevents that by giving you a stable place to store such values — perfect for things like: Intervals / timeouts WebSocket or media stream instances Storing previous values Keeping track of imperative API references It’s one of those hooks that doesn’t re-render the UI, but silently keeps your logic rock solid. ⚙️✨ Sometimes, the most powerful tools are the quiet ones. #ReactJS #FrontendDevelopment #WebDev #JavaScript #useRef

💡Today I got to know something new about React with key and index in .map() I have always encountered such a code when it comes to rendering lists in React Example: {items.map((item, index) => ( <div key={index}>{item.name}</div> ))} It works... though I came to know that accessing the index as a key can be a problem at times 🧠The actual action of the key prop: React employs key to monitor list items that can change, get removed, or added. This assists React in only updating what is necessary which enhances performance and maintains the UI uniformity. When it's fine to use index: The array index may be used safely as a key only in cases when: 1. The list does not change or rearrange. 2. The information is non- dynamic and can not be edited. Example: {colors.map((color, index) => ( <li key={index}>{color}</li> ))} It is perfect for simple lists that don’t change. When not to use index: If your list: 1. Reorders dynamically 2. Adds or removes items 3. Or state (as inputs or animations) of each item. Example: {users.map(user => ( <UserCard key={user.id} user={user} /> ))} Key takeaway: Index use should be restricted to non-changing lists that are never modifie This proved to be incredibly useful in getting to know the way React manages to re-render lists effectively. Have you ever encountered strange bugs due to the use of index as a key? React #Frontend #WebDevelopment #JavaScript #LearningInPublic.

🧩 Custom Hooks: The Hidden Superpower of React When React introduced hooks, it wasn’t just another API — it was a quiet revolution. ⚡ Before hooks, we wrote class components that grew like wild forests. Logic was tangled across lifecycles, duplicated, or hidden behind HOCs. Then came this little thing called useSomething(). Suddenly, we could extract logic like Lego blocks. 💡 The moment I truly understood React wasn’t when I learned useEffect. It was when I realized I could write my own. function useOnlineStatus() {  const [isOnline, setIsOnline] = useState(navigator.onLine);  useEffect(() => {   const updateStatus = () => setIsOnline(navigator.onLine);   window.addEventListener('online', updateStatus);   window.addEventListener('offline', updateStatus);   return () => {    window.removeEventListener('online', updateStatus);    window.removeEventListener('offline', updateStatus);   };  }, []);  return isOnline; } That’s not a utility — that’s architecture in disguise. Hooks make behavior composable, predictable, and testable. The biggest mistake developers make? Using built-in hooks forever but never writing their own. Once you start thinking in custom hooks, you stop building components — and start designing systems of logic. #ReactJS #Hooks #FrontendDevelopment #CleanCode #JavaScript #WebArchitecture #ReactDesignPatterns #SystemDesign