Understanding React forwardRef for Custom Components

Have you ever needed to touch the DOM directly while working in React? React is designed to be declarative. You describe the UI based on state, and the library handles the updates. But occasionally, you need what we call an 'escape hatch.' This is precisely where 'refs' come into play. They provide a way to access a DOM node or a React element directly, bypassing the standard re-render cycle. The most common reason to reach for a ref is to manage things like focus, text selection, or media playback. If you need a specific input field to focus the moment a page loads, you cannot easily do that with state alone. You need to reach into the DOM and call the native '.focus()' method. Beyond the DOM, refs are also perfect for storing any mutable value that needs to persist across renders without triggering a UI update. This includes things like timer IDs or tracking previous state values for comparison. However, with great power comes responsibility. Using refs is essentially stepping outside of the React ecosystem and taking manual control. If you can achieve your goal using props and state, you should. Overusing refs can make your components harder to debug and breaks the predictable flow of data that makes React so reliable. It is a tool for the edge cases, not the daily routine. Use it when you need to talk to the browser directly, but keep your core logic declarative. #ReactJS #SoftwareEngineering #WebDevelopment #Javascript #Frontend #CodingTips

My list UI was behaving weirdly… items were changing unexpectedly 😅 Yes, seriously. At first, I thought it was a state issue. But the problem was something very simple. 💡 I was doing this: {items.map((item, index) => ( Seemed fine… right? ❌ ⚠️ This caused: • Wrong UI updates • Items swapping incorrectly • Hard-to-debug bugs 💡 Then I fixed it: 👉 Used a unique and stable key 🧠 Example: {items.map((item) => ( ✅ Result: • Correct UI updates • No unexpected behavior • Predictable rendering 🔥 What I learned: Keys are not just for React warnings 👉 they control how React updates the UI 💬 Curious: Do you still use index as key… or avoid it? #ReactJS #FrontendDeveloper #JavaScript #CodingTips #WebDevelopment

🚀 JavaScript Project 3: Counter System Built a stste-driven counter with increment, decrement and reset actions —but this time, I focused on how engineers think, not just making it work. 🔑 Key ideas: • State is the single source of truth • UI updates are centralized ( updateUI ) • Event delegation for scalable interaction • Data-driven actions using data-* attributes • Clear UI feedback (disabled states, interaction response) 💡Biggest insight: Don't manipulate the UI directly — update state, then let the UI reflect it. 🔗 Live: https://lnkd.in/dTNy6A2M 💻 Code: https://lnkd.in/dp638D6h This is part of my journey building JavaScript systems step-by-step. More coming. #JavaScript #Frontend #WebDevelopment #LearningInPublic

Your component is re-rendered... Then what? Most developers stop thinking here. And that’s where the real magic starts. This is Post 3 of the series: 𝗥𝗲𝗮𝗰𝘁 𝗨𝗻𝗱𝗲𝗿 𝘁𝗵𝗲 𝗛𝗼𝗼𝗱 Where I explain what React is actually doing behind the scenes. React does NOT update the DOM immediately. Because touching the DOM is expensive. Instead, it follows a 3-step process: Render → Diff → Commit First, React creates something called a 𝗩𝗶𝗿𝘁𝘂𝗮𝗹 𝗗𝗢𝗠. Not the real DOM. Just a JavaScript object in memory. A blueprint of your UI. Every time your component runs, React builds a new tree of this Virtual DOM. And it already has the previous tree stored. Now comes the interesting part. React compares: Old tree vs New tree This step is called 𝗗𝗶𝗳𝗳𝗶𝗻𝗴. It finds exactly what changed. Not everything. Just the difference. Then comes the final step: 𝗖𝗼𝗺𝗺𝗶𝘁 phase React takes only those changes… …and updates the real browser DOM So no, React is NOT re-rendering your whole page. It’s doing surgical updates. The key insight: React separates thinking from doing. Thinking = Render + Diff Doing = Commit That’s why React is fast. Because touching the DOM is expensive. So React minimizes it. Flow looks like this: ✅️ Component runs ✅️ Virtual DOM created ✅️ Changes calculated ✅️ DOM updated ✅️ Browser paints UI Once you see this, you stop fearing re-renders. And start understanding them. In Post 4 of React Under the Hood: How does React actually compare trees? (The diffing algorithm 👀) Follow Farhaan Shaikh if you want to understand react more deeply. 👉 Read in detail here: https://lnkd.in/dTYAbM6n #React #Frontend #WebDevelopment #JavaScript #SoftwareEngineering

🚀 React Reconciliation — How React Actually Updates the UI Ever wondered… 👉 How React updates only what’s needed? 👉 Why it feels so fast? The answer is 👉 Reconciliation 💡 What is Reconciliation? Reconciliation is the process React uses to: 👉 Compare old Virtual DOM vs new Virtual DOM 👉 Update only the changed parts in the Real DOM ⚙️ How it works (Step-by-step) 1️⃣ State/props change triggers re-render 2️⃣ React creates a new Virtual DOM tree 3️⃣ Compares it with previous tree (Diffing) 4️⃣ Finds minimal changes 5️⃣ Updates only those parts in Real DOM 🧠 Key Concept → Diffing Algorithm React uses a heuristic diffing algorithm: 👉 Instead of comparing everything 👉 It makes smart assumptions to optimize updates 🔥 Important Rules React Follows ✔ Different element types → full re-render ✔ Same type → update only changed attributes ✔ Keys help identify list items 🧩 Example // Before <ul> <li>A</li> <li>B</li> </ul> // After <ul> <li>A</li> <li>C</li> </ul> 👉 React updates only B → C 👉 Not the entire list ⚠️ Why Keys Are Critical Without keys: ❌ React may re-render entire list ❌ UI bugs may occur With keys: ✅ Efficient updates ✅ Stable UI 🔥 Performance Insight Reconciliation makes React fast… 👉 But only if you write optimized code Bad patterns: ❌ Missing keys ❌ Unstable references ❌ Unnecessary re-renders 💬 Pro Insight (Senior-Level Thinking) 👉 React doesn’t update the DOM blindly 👉 It calculates the minimum work required 📌 Save this post & follow for more deep frontend insights! 📅 Day 22/100 #ReactJS #FrontendDevelopment #JavaScript #ReactInternals #PerformanceOptimization #SoftwareEngineering #100DaysOfCode 🚀

1,200 lines of form code deleted from a production dashboard — and the forms actually work better now.   That's what happens when you swap React Hook Form for React 19's built-in Actions + useActionState on the right kind of project.   Here's the thing most tutorials won't tell you: this isn't a blanket "RHF is dead" story. It's a "know when to use what" story.   → Simple CRUD forms (login, contact, settings)? useActionState + useOptimistic handles it natively. No extra deps, no bundle cost, instant optimistic UI out of the box.   → Complex dynamic forms (nested arrays, conditional fields, 50+ field wizards)? React Hook Form still wins. React 19 has no built-in validation beyond HTML attributes — and managing deeply nested field arrays without RHF is pain you don't need.   → The middle ground is where it gets interesting. Forms with 5–15 fields and basic Zod validation? You can go either way. We leaned native and didn't look back.   The real unlock isn't "drop the library." It's that React's form primitives finally work well enough that you can evaluate each form on its own complexity instead of reaching for RHF by default on every project.   Three questions before you refactor: 1. Do any of your forms have dynamic field arrays? 2. Are you using RHF's validation resolver pattern heavily? 3. Is your form state shared across multiple components?   If you answered "no" to all three, you might be carrying a dependency you don't need.   What's your team's take still all-in on React Hook Form, or have you started migrating simpler forms to Actions?   #ReactJS #FrontendDevelopment #WebDev #JavaScript #React19 #FormHandling #DeveloperProductivity

We often hear that JavaScript is single threaded. But at the same time, it handles API calls, timers, and UI updates smoothly. The reason is the Event Loop. Here is a simple way to understand it. Think in terms of 5 parts: 1. Call Stack This is where code runs right now. If something blocks here (like an infinite loop), everything else stops. 2. Web APIs The browser handles things like fetch, setTimeout, and events outside the main thread. When they are done, they send callbacks to queues. 3. Microtask Queue (high priority) This includes Promise callbacks and async/await. All microtasks run completely before anything else happens. -> If you keep adding microtasks (like recursive Promise.then), you can actually block rendering completely. 4. Macrotask Queue (low priority) This includes setTimeout, setInterval, and other tasks. Only one macrotask runs at a time. 5. Render After microtasks are done, the browser updates the UI (layout and paint). -> The browser decides when to paint — not strictly after every loop. Simple cycle: Run one macrotask → run all microtasks → update UI → repeat JavaScript isn’t non-blocking — the event loop just makes it feel that way. #javascript #frontend #reactjs #webdevelopment #softwareengineering #webperformance #systemdesign #Coding

React.memo doesn't prevent re-renders. It just changes why they happen. ⚠️ You think it's optimized. The Profiler says otherwise. 𝗧𝗵𝗲 𝗺𝗼𝘀𝘁 𝗰𝗼𝗺𝗺𝗼𝗻 𝗺𝗶𝘀𝘁𝗮𝗸𝗲: function Parent() { const config = { theme: 'dark' }; // new object → new reference const handleClick = () => console.log('clicked'); // new function → new reference return <Child config={config} onClick={handleClick} />; } const Child = React.memo(({ config, onClick }) => { return <button onClick={onClick}>{config.theme}</button>; }); React.memo does a shallow comparison. config and handleClick are new references on every render — so Child re-renders every time. The memo did nothing. 𝗧𝗵𝗲 𝗳𝗶𝘅 — 𝘀𝘁𝗮𝗯𝗶𝗹𝗶𝘀𝗲 𝘁𝗵𝗲 𝗿𝗲𝗳𝗲𝗿𝗲𝗻𝗰𝗲𝘀: function Parent() { const config = useMemo(() => ({ theme: 'dark' }), []); const handleClick = useCallback(() => console.log('clicked'), []); return <Child config={config} onClick={handleClick} />; } Stable UI requires stable references. 𝗪𝗵𝗲𝗻 𝗥𝗲𝗮𝗰𝘁.𝗺𝗲𝗺𝗼 𝗶𝘀 𝗮𝗰𝘁𝘂𝗮𝗹𝗹𝘆 𝘄𝗼𝗿𝘁𝗵 𝗶𝘁: 1️⃣ 𝗣𝗿𝗼𝗽𝘀 𝗮𝗿𝗲 𝗽𝗿𝗶𝗺𝗶𝘁𝗶𝘃𝗲𝘀 𝗼𝗿 𝘀𝘁𝗮𝗯𝗶𝗹𝗶𝘀𝗲𝗱 𝗿𝗲𝗳𝗲𝗿𝗲𝗻𝗰𝗲𝘀 Objects and functions without memoization = wasted effort. Strings, numbers, booleans compare correctly by default. 2️⃣ 𝗧𝗵𝗲 𝗰𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁 𝗶𝘀 𝗴𝗲𝗻𝘂𝗶𝗻𝗲𝗹𝘆 𝗲𝘅𝗽𝗲𝗻𝘀𝗶𝘃𝗲 𝘁𝗼 𝗿𝗲𝗻𝗱𝗲𝗿 If the render is cheap, the comparison is the bottleneck. 3️⃣ 𝗬𝗼𝘂 𝗺𝗲𝗮𝘀𝘂𝗿𝗲𝗱 𝗶𝘁 𝗳𝗶𝗿𝘀𝘁 If you didn't measure it, you didn't optimize it. Open the Profiler. Find the actual bottleneck before reaching for the API. ⚠️ React.memo without stable references is optimisation theatre. It looks like performance work. It isn't. 🎯 𝗧𝗵𝗲 𝗧𝗮𝗸𝗲𝗮𝘄𝗮𝘆 Memoisation is a tool, not a default. Reach for the Profiler before you reach for the API. 💬 Where did React.memo fool you into thinking something was optimized? Drop it below. 👇 #ReactJS #SoftwareEngineering #WebDev #FrontendEngineering #JavaScript

Real-World Frontend Problem Every Developer Faces: Unnecessary re-renders can significantly impact performance. The problem arises when components re-render on every parent state change, even if their own props remain unchanged. This is particularly noticeable in large lists or dashboards, leading to visible lag. To address this issue, consider the following solutions: - Wrap pure components with React.memo() to prevent unnecessary re-renders. - Stabilize callbacks using useCallback() to ensure they only change when necessary. - Memoize heavy computations with useMemo() to avoid recalculating values on every render. - For derived state from Redux, utilize createSelector from RTK to prevent selector recalculations. Implementing these strategies can help maintain optimal performance in your applications. The mental model that stuck with me: React.memo stops the re-render. useCallback stops memo from breaking. createSelector stops useSelector from breaking memo. All three work together — remove any one and the others stop working. Have you hit this scenario? Drop your war story below. #ReactJS #FrontendDevelopment #WebPerformance #JavaScript #ReduxToolkit #TechLead #SoftwareEngineering

Most React performance issues don’t come from heavy components. They come from Context API used the wrong way. Many developers create one large context like this: User + Theme + Settings + Permissions + Notifications Looks clean. Feels scalable. But every time one value changes, all consuming components re-render. Even components that don’t use the updated value. That means: Theme changed → User components re-render User updated → Settings components re-render This creates silent performance problems in large applications. Why? Because React checks the Provider value by reference, not by which field changed. New object reference = Re-render. How to fix it: ✔ Split contexts by concern ✔ Use useMemo() for provider values ✔ Use useCallback() for functions ✔ Use selector patterns for larger applications Context API is powerful, but bad context design creates expensive re-renders. Good performance starts with good state architecture. Don’t just use Context. Use it wisely. #ReactJS #ContextAPI #JavaScript #FrontendDevelopment #PerformanceOptimization #WebDevelopment #ReactDeveloper #SoftwareEngineering