Optimize React UI with useDeferredValue

🚧 The Problem: The "Stack" Reconciler. Before Fiber (React 16), React used a recursive approach. Once it started updating the UI, it couldn't stop until it finished. This is called blocking the main thread. ⚠️ The Issue: If you had a large component tree, the update might take 200ms. During that time, the browser couldn't handle user inputs (like clicks or typing) or play animations, leading to "jank" or a frozen UI. The Analogy: It was like a train that couldn't stop at any stations until it reached the very end of the line, even if there was an emergency. 🧩2. The Solution: Fiber Nodes A Fiber node is essentially a plain JavaScript object that represents a "unit of work." Unlike the old system, which relied on the built-in JavaScript call stack, Fiber implements a virtual stack frame. Each Fiber node contains information about: Component Type: (e.g., `div`, `Button`) State and Props: What data it currently holds. Relationships: Pointers to its `child`, `sibling`, and `return` (parent) nodes. 3. Why Fiber is Important Scheduling and Prioritization Fiber allows React to pause, resume, and discard work. React can now prioritize tasks based on importance: 1. High Priority: User input (typing, clicking), animations. 2. Low Priority: Fetching data for a hidden list, analytics logging. The Two-Phase System Fiber splits the rendering process into two phases: 1. Reconciliation (Render Phase): React builds a "work-in-progress" tree. This is asynchronous and can be interrupted if a higher-priority task comes in. 2. Commit Phase: Once the work is done, React applies all changes to the DOM in one quick, synchronous burst. This ensures the UI doesn't look "half-updated" to the user. Concurrency Fiber is the foundation for Concurrent Mode. It allows React to work on multiple versions of the UI at the same time in memory without showing them to the user until they are ready. #ReactJS #WebDev #ReactFiber #Javascript #TecSolutionHub #Frontend

🧠 Why useRef Doesn’t Cause a Re-render in React Many developers assume useRef behaves like state. But it doesn’t. Example 👇 function Counter() { const countRef = useRef(0); function increment() { countRef.current += 1; console.log(countRef.current); } return ( <button onClick={increment}> Count: {countRef.current} </button> ); } Click the button. Console shows: 1 2 3 But the UI still shows: Count: 0 🔍 Why? useRef does not trigger a re-render. Updating: countRef.current = newValue changes the value, but React does not re-run the component. 🧠 What useRef Is Actually For useRef is mainly used for: Accessing DOM elements Persisting values between renders Storing mutable data that shouldn’t trigger UI updates Example: const inputRef = useRef(); <input ref={inputRef} /> 🎯 Key Rule If the UI needs to update → use state If the value just needs to persist → use ref #ReactJS #FrontendDevelopment #JavaScript #ReactHooks #WebDevelopment #LearningInPublic

𝗗𝗮𝘆 𝟮𝟭/𝟵𝟬 :𝗥𝗲𝗮𝗰𝘁 𝗛𝗼𝗼𝗸𝘀-- 𝗔 𝗩𝗶𝘀𝘂𝗮𝗹 𝗚𝘂𝗶𝗱𝗲 Continuing our development journey! A 𝗛𝗼𝗼𝗸 is a special function that allows functional components to use powerful features that were once only available in class components, such as state management and lifecycle methods. I have created this detailed visualization to break down five of the most essential React Hooks, complete with simple definitions and real-world UI examples 𝟭. 𝘂𝘀𝗲𝗦𝘁𝗮𝘁𝗲: 𝗧𝗵𝗲 𝗦𝘁𝗮𝘁𝗲 𝗠𝗮𝗻𝗮𝗴𝗲𝗿  • 𝗣𝘂𝗿𝗽𝗼𝘀𝗲: To manage and track changing values within a component.  • 𝗘𝘅𝗮𝗺𝗽𝗹𝗲: 𝗔 𝘀𝗵𝗼𝗽𝗽𝗶𝗻𝗴 𝗰𝗮𝗿𝘁 𝗰𝗼𝘂𝗻𝘁𝗲𝗿. 𝟮. 𝘂𝘀𝗲𝗘𝗳𝗳𝗲𝗰𝘁: 𝗧𝗵𝗲 𝗦𝗶𝗱𝗲 𝗘𝗳𝗳𝗲𝗰𝘁 𝗛𝗮𝗻𝗱𝗹𝗲𝗿  • 𝗣𝘂𝗿𝗽𝗼𝘀𝗲: To handle side effects (like API calls or subscriptions) after the component renders.  • 𝗘𝘅𝗮𝗺𝗽𝗹𝗲: Fetching user data on page load. 3. useRef: The Real DOM Target  • 𝗣𝘂𝗿𝗽𝗼𝘀𝗲: To create a persistent reference and target specific, real DOM elements.  • 𝗘𝘅𝗮𝗺𝗽𝗹𝗲: Automatically focusing a form input. 𝟰. 𝘂𝘀𝗲𝗖𝗼𝗻𝘁𝗲𝘅𝘁: 𝗧𝗵𝗲 𝗚𝗹𝗼𝗯𝗮𝗹 𝗦𝘁𝗮𝘁𝗲 𝗠𝗮𝗻𝗮𝗴𝗲𝗿  • 𝗣𝘂𝗿𝗽𝗼𝘀𝗲: To share data globally across the application without passing props down at every level ("prop drilling").  • 𝗘𝘅𝗮𝗺𝗽𝗹𝗲: Theme switching (Light/Dark Mode). 𝟱. 𝘂𝘀𝗲𝗡𝗮𝘃𝗶𝗴𝗮𝘁𝗲: 𝗧𝗵𝗲 𝗦𝗣𝗔 𝗡𝗮𝘃𝗶𝗴𝗮𝘁𝗼𝗿  • 𝗣𝘂𝗿𝗽𝗼𝘀𝗲: To perform programmatic navigation between different routes/pages (essential for Single Page Applications).  • 𝗘𝘅𝗮𝗺𝗽𝗹𝗲: Redirecting to a Dashboard after login. #ReactJS #WebDevelopment #JavaScript #Frontend #Coding #Learning #Developers #90DaysOfCode #Thanüja #thanüja #ReactHooks

Race conditions are not just backend problems. They exist in your UI too. And they’re harder to notice. Here’s a real scenario 👇 User types fast in a search box: → Request A (slow) → Request B (fast) Response order: → B returns first → A returns later Now UI shows: ❌ Old data (A) instead of latest (B) No crash. Just wrong UI. Where this happens: ✖ Search inputs ✖ Filters ✖ Rapid navigation What works: ✔ Cancel previous requests (AbortController) ✔ Track latest request ID ✔ Use libraries that handle this (React Query) Key insight: UI correctness is not about rendering. It’s about timing. If you ignore race conditions… Your UI will lie to users. #ReactJS #Frontend #RaceCondition #JavaScript #SoftwareEngineering #Async #AdvancedReact #Engineering #WebDevelopment #Tech

𝟳 𝗳𝗿𝗼𝗻𝘁𝗲𝗻𝗱 𝘁𝗶𝗽𝘀 𝗜 𝘄𝗶𝘀𝗵 𝗜 𝗸𝗻𝗲𝘄 𝗲𝗮𝗿𝗹𝗶𝗲𝗿: 𝟭. 𝗨𝘀𝗲 𝗢𝗻𝗣𝘂𝘀𝗵 𝗲𝘃𝗲𝗿𝘆𝘄𝗵𝗲𝗿𝗲 𝗯𝘆 𝗱𝗲𝗳𝗮𝘂𝗹𝘁. It cuts Angular's change detection cycles dramatically — opt-in to checks, don't opt-out. 𝟮. 𝗨𝗻𝘀𝘂𝗯𝘀𝗰𝗿𝗶𝗯𝗲 𝗶𝘀𝗻'𝘁 𝗼𝗽𝘁𝗶𝗼𝗻𝗮𝗹. Use takeUntilDestroyed() or a destroy subject — leaked observables silently eat memory for hours. 𝟯. 𝗦𝗶𝗴𝗻𝗮𝗹𝘀 𝗼𝘃𝗲𝗿 𝗕𝗲𝗵𝗮𝘃𝗶𝗼𝗿𝗦𝘂𝗯𝗷𝗲𝗰𝘁 𝗳𝗼𝗿 𝗹𝗼𝗰𝗮𝗹 𝘀𝘁𝗮𝘁𝗲. Signals are zone-free, granular, and kill unnecessary re-renders without extra operators. 𝟰. 𝗟𝗮𝘇𝘆-𝗹𝗼𝗮𝗱 𝗳𝗲𝗮𝘁𝘂𝗿𝗲 𝗺𝗼𝗱𝘂𝗹𝗲𝘀, 𝗻𝗼𝘁 𝗷𝘂𝘀𝘁 𝗿𝗼𝘂𝘁𝗲𝘀. Most apps lazy-load pages but still bundle every dialog, modal, and widget eagerly. 𝟱. 𝗧𝗿𝗮𝗰𝗸 𝗯𝘆 𝗶𝗱𝗲𝗻𝘁𝗶𝘁𝘆, 𝗻𝗼𝘁 𝗶𝗻𝗱𝗲𝘅. trackBy: item => item.id prevents the DOM from rebuilding every list item on each state update. 𝟲. 𝗗𝗲𝘁𝗮𝗰𝗵 𝗵𝗲𝗮𝘃𝘆 𝗰𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁𝘀 𝗳𝗿𝗼𝗺 𝘁𝗵𝗲 𝗖𝗗 𝘁𝗿𝗲𝗲. ChangeDetectorRef.detach() on charts or real-time grids — trigger manually only when data changes. 𝟳. 𝗠𝗲𝗺𝗼𝗶𝘇𝗲 𝗽𝘂𝗿𝗲 𝘀𝗲𝗹𝗲𝗰𝘁𝗼𝗿 𝗹𝗼𝗴𝗶𝗰 𝘄𝗶𝘁𝗵 𝗡𝗴𝗥𝘅. Selectors only recompute when their slice of state changes — abusing component-level pipes does the same job 10x worse. These are small habits. The performance gains are not. Which one did you know? Drop a number below. 👇 #Angular #Frontend #WebPerformance #JavaScript #StateManagement #CleanCode #RxJS #JavaScript

~ Optimizing React Performance using Memoization Techniques (React.memo, useMemo, useCallback) While working with React, I explored how unnecessary re-renders can significantly impact performance in real-world applications. One effective approach to handle this is memoization. -React.memo prevents unnecessary re-renders when props remain unchanged -useMemo memoizes expensive computations -useCallback memoizes function references Example: const Child = React.memo(({ onClick }) => { console.log("Child rendered"); return <button onClick={onClick}>Click</button>; }); function Parent() { const [count, setCount] = React.useState(0); const handleClick = React.useCallback(() => { console.log("Clicked"); }, []); return ( <div> <h1>{count}</h1> <button onClick={() => setCount(count + 1)}>Increment</button> <Child onClick={handleClick} /> </div> ); } Without useCallback, a new function is created on every render, which can trigger unnecessary re-renders in child components. With memoization, we ensure stable references and optimized rendering behavior. Why it matters: In large-scale applications, preventing unnecessary renders improves performance, scalability, and user experience. Optimization should be applied thoughtfully based on actual performance needs, not by default. #reactjs #performance #frontenddevelopment #javascript #webdevelopment

💡 Day 8 — Dynamic Form Validator (JavaScript) Today, something shifted. I didn’t just build a form… I built logic that guides user behavior. This challenge pushed me beyond static UI into real interaction — the kind you see in login and signup systems every day. 🎯 What I built: A form with: • Name • Email • Password And implemented: ✨ Real-time validation using input events ✨ Error handling with dynamic feedback ✨ Regex-based email validation ✨ Password rules (minimum length) ✨ Controlled form submission (no invalid data allowed) 🧠 What I learned: At first, I thought validation was just “if/else”… But it’s more than that. It’s about: • Thinking in conditions • Structuring logic clearly • Connecting JavaScript with the DOM • Guiding users instead of reacting late One small bug (wrong condition in email validation) taught me something important: 👉 Most problems aren’t in logic… 👉 They’re in how things are connected. Fixing that felt like unlocking a new level. Try the Dynamic Form Validator here: https://lnkd.in/dFRuDVSc 🚀 Next step: Improving UX with disabled buttons, visual feedback, and stronger validation patterns. #JavaScript #FrontendDevelopment #WebDevelopment #CodingJourney #100DaysOfCode #LearningInPublic

120 re-renders → 8 re-renders. Same UI. Same API. Same components. No backend change. No infrastructure change. Just one React concept many developers underestimate. A dashboard I worked on started feeling slow whenever someone typed in the search field. Every keystroke caused the entire page to update — tables, charts, filters, and widgets. So we checked the React DevTools Profiler. Result: ~120 component re-renders for a single keystroke. The API wasn’t the issue. The problem was unnecessary re-renders in the component tree. The root cause A parent component was creating new function references on every render. Example: handleSearch = (value) => { setSearch(value) } Each render created a new function, so React assumed the props changed and re-rendered child components. The fix We stabilized the function reference using useCallback: handleSearch = useCallback((value) => { setSearch(value) }, []) We also applied: • React.memo for heavy components • useMemo for expensive calculations Result 120 re-renders → 8 re-renders Typing became instant. Same UI. Same logic. Just better render control. 💡 Most React performance problems aren’t caused by React itself — they come from how we manage props, state, and re-renders. What React performance issue took you the longest to debug? #React #Frontend #WebPerformance #JavaScript #SoftwareEngineering #WebDevelopment

⚛️ 𝗣𝗿𝗲𝘃𝗲𝗻𝘁𝗶𝗻𝗴 𝗨𝗻𝗻𝗲𝗰𝗲𝘀𝘀𝗮𝗿𝘆 𝗥𝗲-𝗿𝗲𝗻𝗱𝗲𝗿𝘀 𝗶𝗻 𝗥𝗲𝗮𝗰𝘁 — 𝗣𝗿𝗮𝗰𝘁𝗶𝗰𝗮𝗹 𝗨𝘀𝗲 𝗼𝗳 𝗺𝗲𝗺𝗼 & 𝘂𝘀𝗲𝗖𝗮𝗹𝗹𝗯𝗮𝗰𝗸 In React applications, performance issues often come from repeated re-renders rather than heavy logic. This becomes more noticeable when passing functions as props. 𝗖𝗼𝗺𝗺𝗼𝗻 𝗘𝘅𝗮𝗺𝗽𝗹𝗲 <ChildComponent onClick={() => handleClick(id)} /> A new function is created on every render, causing child components to re-render. 𝗣𝗿𝗮𝗰𝘁𝗶𝗰𝗮𝗹 𝗙𝗶𝘅 Use useCallback: const handleItemClick = useCallback((id) => { handleClick(id) }, []) Then: <ChildComponent onClick={handleItemClick} /> 𝗖𝗼𝗺𝗯𝗶𝗻𝗲 𝘄𝗶𝘁𝗵 𝗥𝗲𝗮𝗰𝘁.𝗺𝗲𝗺𝗼 export default React.memo(ChildComponent) Now child re-renders only when props actually change. 𝗪𝗵𝗲𝗻 𝗧𝗵𝗶𝘀 𝗛𝗲𝗹𝗽𝘀 𝗠𝗼𝘀𝘁 • Large lists • Dashboard UI • Reusable components • Expensive child rendering • Deep component trees 𝗣𝗿𝗮𝗰𝘁𝗶𝗰𝗮𝗹 𝗡𝗼𝘁𝗲 Avoid over-optimizing: • Use memo only where needed • Measure before optimizing • Keep code readable Small memoization changes can improve UI responsiveness significantly. 💬 Curious — Do you use memoization by default, or only after noticing performance issues? #ReactJS #Frontend #Performance #JavaScript #WebDevelopment #SoftwareEngineering #DevCommunity

https://pretextjs.dev A new frontend library called Pretext (March 2026) is trying to change how we handle text layout. Current approach: Render → Measure → Re-render Pretext approach: Calculate → Render once Instead of using DOM measurements like getBoundingClientRect(), it lets you: • Predict text size before rendering • Avoid layout shifts • Reduce re-renders Useful for: • Chat/message UIs • Infinite scroll lists • Dynamic cards • Multilingual layouts It works without the DOM and can run on the server as well. Still new, but interesting direction for performance-focused UIs. #frontend #javascript #reactjs #webperformance