Saurav Kumar’s Post

💡 Frontend Interview Task: Optimize Search in a Large List I recently worked on a common React interview problem: Build a search over a list of users that remains performant even with large datasets. 🧪 The Task - Fetch users from an API - Implement search by name - Avoid unnecessary re-renders - Keep the UI responsive ❌ Naive approach const filteredUsers = users.filter(user => user.name.includes(query)); 👉 This runs on every keystroke, which becomes expensive for large lists. ✅ Optimized approach const debouncedQuery = useDebounce(query, 300); const filteredUsers = useMemo(() => users.filter(user => user.name.toLowerCase().includes(debouncedQuery.toLowerCase())), [users, debouncedQuery]); 🧠 Key takeaways 👉 Debounce the input, not the result If you debounce the filtered list, filtering still runs every time. Debouncing the query reduces how often computation happens. 👉 Don’t store derived data in state Filtered results can be computed from existing data → use useMemo. 👉 Think in data flow query → debouncedQuery → filteredUsers → UI 🚀 Why this matters This pattern: - Reduces unnecessary computations - Improves performance - Keeps components predictable and scalable Small details like this are often what differentiate mid-level and senior frontend engineers in interviews. #react #frontend #javascript #performance #webdev #softwareengineering

💡 Frontend Interview Task: Why Your State Update Loses Data I recently saw a React interview problem that looks simple but breaks in a very non-obvious way. 🧪 The Task · Manage component state as an object · Update multiple fields · Keep updates predictable ❌ Naive approach const [form, setForm] = useState({ name: "", email: "" }); const updateName = () => { setForm({ ...form, name: "Alice" }); }; const updateEmail = () => { setForm({ ...form, email: "alice@email.com" }); }; It looks correct. But under certain conditions data gets lost. 🤔 What’s happening? State updates are asynchronous and batched. If these run close together: updateName(); updateEmail(); Both updates read the same stale form value. So one update overwrites the other. ✅ Correct approach setForm(prev => ({ ...prev, name: "Alice" })); setForm(prev => ({ ...prev, email: "alice@email.com" })); 🧠 Key takeaways · State updates don’t merge — they replace. React doesn’t magically combine your objects · Closures can capture stale state. Especially in async or rapid updates · Functional updates are safer for derived state. They guarantee you’re working with the latest value This kind of bug doesn’t show up in simple testing. It usually only shows up when users interact quickly, when async logic is involved, or when the app is running under real-world conditions. Small details like this are often what separate code that looks correct… from code that actually behaves correctly. #react #frontend #javascript #webdevelopment #softwareengineering #reactjs #performance

𝗥𝗲𝗮𝗰𝘁 𝗾𝘂𝗲𝘀𝘁𝗶𝗼𝗻𝘀 𝘁𝗵𝗮𝘁 𝗰𝗮𝗻 𝗮𝘀𝗸 𝗶𝗻 𝘆𝗼𝘂𝗿 𝗳𝗿𝗼𝗻𝘁𝗲𝗻𝗱 𝗶𝗻𝘁𝗲𝗿𝘃𝗶𝗲𝘄. I spent time going through the most commonly asked React questions and honestly, some of them still trip me up even after years of development. Here are the ones that matter most: 𝗧𝗵𝗲 𝗯𝗮𝘀𝗶𝗰𝘀 𝗲𝘃𝗲𝗿𝘆𝗼𝗻𝗲 𝗲𝘅𝗽𝗲𝗰𝘁𝘀 𝘆𝗼𝘂 𝘁𝗼 𝗸𝗻𝗼𝘄: 1. What is the difference between React Node, Element, and Component? 2. Why do we need keys in React lists? 3. Controlled vs Uncontrolled components. 4. What are React Fragments and why use them? 𝗧𝗵𝗲 𝗼𝗻𝗲𝘀 𝘁𝗵𝗮𝘁 𝘀𝗲𝗽𝗮𝗿𝗮𝘁𝗲 𝗷𝘂𝗻𝗶𝗼𝗿 𝗳𝗿𝗼𝗺 𝘀𝗲𝗻𝗶𝗼𝗿 𝗱𝗲𝘃𝗲𝗹𝗼𝗽𝗲𝗿𝘀: 5. When to use useEffect vs useLayoutEffect. 6. How reconciliation works in React. 7. What is hydration in server-side rendering. 8. Higher-order components and when to use them. 𝗧𝗵𝗲 𝗽𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲 𝗾𝘂𝗲𝘀𝘁𝗶𝗼𝗻𝘀 𝘁𝗵𝗮𝘁 𝘀𝗵𝗼𝘄 𝘆𝗼𝘂 𝘂𝗻𝗱𝗲𝗿𝘀𝘁𝗮𝗻𝗱 𝗼𝗽𝘁𝗶𝗺𝗶𝘇𝗮𝘁𝗶𝗼𝗻: 9. How to use useMemo and useCallback effectively. 10. Why you should not mutate state directly. 11. Code splitting and lazy loading techniques. 12. Testing strategies for React applications. 𝗧𝗵𝗲 𝘁𝗿𝗶𝗰𝗸𝘆 𝗼𝗻𝗲𝘀 𝘁𝗵𝗮𝘁 𝗼𝗳𝘁𝗲𝗻 𝗰𝗮𝘁𝗰𝗵 𝗽𝗲𝗼𝗽𝗹𝗲 𝗼𝗳𝗳 𝗴𝘂𝗮𝗿𝗱: 13. Difference between createElement and cloneElement. 14. When to use useReducer over useState. 15. How useImperativeHandle works. 16. Why array indices make bad keys. Let's grow together! 𝗜 𝗵𝗮𝘃𝗲 𝗽𝗿𝗲𝗽𝗮𝗿𝗲𝗱 𝗜𝗻𝘁𝗲𝗿𝘃𝗶𝗲𝘄 𝗣𝗿𝗲𝗽𝗮𝗿𝗮𝘁𝗶𝗼𝗻 𝗚𝘂𝗶𝗱𝗲 𝗳𝗼𝗿 𝗙𝗿𝗼𝗻𝘁𝗲𝗻𝗱 𝗘𝗻𝗴𝗶𝗻𝗻𝗲𝗿𝘀. covering JavaScript, React, Next.js, System Design, and more. 𝗚𝗲𝘁 𝘁𝗵𝗲 𝗚𝘂𝗶𝗱𝗲 𝗵𝗲𝗿𝗲 - https://lnkd.in/d2w4VmVT 💙- If you've read so far, do LIKE and RESHARE the post

⚡ Automatic Batching in React — Tricky Interview Example React 18 introduced Automatic Batching — but many developers still misunderstand it 👇 --- 💡 What is Automatic Batching? React groups multiple state updates into a single re-render for better performance. --- ❌ Before React 18 (Tricky Behavior) setTimeout(() => { setCount(c => c + 1); setFlag(f => !f); }); 👉 React 17: ❌ Two state updates = 2 re-renders --- ✅ React 18+ (Automatic Batching) setTimeout(() => { setCount(c => c + 1); setFlag(f => !f); }); 👉 React 18: ✅ Both updates = 1 re-render --- 🔥 Tricky Interview Question ❓ Will React batch updates inside async functions like setTimeout or Promise? 👉 Answer: YES in React 18+ --- ⚠️ Another Tricky Case setCount(count + 1); setCount(count + 1); 👉 Output? ❌ Not 2 👉 Because both use same stale value 👉 Final value = +1 only --- ✅ Correct Way setCount(prev => prev + 1); setCount(prev => prev + 1); 👉 Now it works correctly ✅ (+2) --- 🌍 Real-world Scenario 👉 Form updates / multiple API responses 👉 Dashboard filters updating multiple states --- 🎯 Interview One-liner “Automatic batching in React 18 groups multiple state updates (even async ones) into a single render for better performance.” --- 🔥 Senior Tip: Batching improves performance, but you must still handle stale closures carefully #ReactJS #Frontend #Performance #JavaScript #InterviewPrep #React18

https://lnkd.in/dp_GCVfd — Most engineers stay stuck in 'Junior Land' because they think knowing React syntax is enough to pass a Senior interview. After years of building frontendengineers.com and scaling enterprise-level applications for millions of users, I’ve seen the same pattern repeat itself. The gap between a Mid-level and a Staff engineer isn't about how fast you code; it's about how you handle the 'Deep Why' behind every architectural decision. In my latest 5,000+ word deep dive, I’m pulling back the curtain on the technical nuances that separate the top 1% from the rest of the pack. We aren't just looking at a simple 'a href' tag or how to 'add bootstrap to html' anymore. We are diving deep into React 19 internals, optimizing Next.js 15 for Core Web Vitals, and mastering TypeScript at scale. I break down complex scenarios like handling 100vh CSS bugs on mobile devices, implementing 301 redirects within your app logic, and the real-world usage of an Action Creator in Redux. True seniority is found in understanding the mechanics of _app.js, fine-tuning 3D CSS transforms, and knowing exactly when an absolute URL beats a relative one for SEO. I wrote this guide to be the definitive resource for those who are tired of surface-level tutorials and want to master Advanced React concepts. If you want to lead teams and architect systems that don't crumble under pressure, you need to understand the 'how' and the 'why' at a forensic level. What is the single hardest technical question you’ve ever been asked in a senior-level interview? Tag a fellow engineer who is currently prepping for their next big career jump. Want all 205+ guides in a single, high-value PDF? Grab the Master Frontend Engineering Handbook 2026 here: https://lnkd.in/dGQhFu6y #FrontendEngineering #WebDevelopment #ReactJS #NextJS #JavaScript #TypeScript #SoftwareEngineering #TechInterviews #SeniorEngineer #CodingLife #WebPerformance #CSS3 #HTML5 #SystemDesign #FrontEndDeveloper #Programming #CareerGrowth #TechLeads #StaffEngineer #Redux #MasterFrontend #DevCommunity #SoftwareArchitecture #100DaysOfCode #OpenSource #FullStack #ModernWeb #EngineeringManagement #WebDesign #UIUX

https://lnkd.in/dA5WRcBb — 12 years of scaling enterprise apps taught me that most "Senior" candidates fail because they treat fundamentals as an afterthought. Stop thinking that mediaqueries are just for making things look "okay" on a smartphone. At frontendengineers.com, we’ve analyzed thousands of interview loops to see what separates the Staff Engineers from the Mid-levels. True seniority isn't just about writing a quick `memo` in React or managing state with MobX. It’s about understanding how your Micro Frontend architecture impacts Core Web Vitals when you're serving millions of concurrent users. In Part 242 of our deep-dive series, I’ve distilled over 5,000 words on the advanced interplay between React 19, Next.js 15, and enterprise-grade CSS strategies. We dive deep into why your `mini-css-extract-plugin` configuration matters just as much as your TypeScript types in a production environment. Building for scale means you can't afford a single unoptimized meta property or a bloated MERN stack architecture that crumbles under pressure. The difference between a $150k and a $400k role is your ability to explain the "why" behind the "how" regarding performance and system design. Whether you're migrating to a Micro Frontend with Angular or mastering the nuances of React Native Babel presets, the depth of your knowledge is your only real leverage. I wrote this for the engineers who are tired of surface-level tutorials and want to understand the actual machinery of the modern web. Want all 205+ guides in a single, high-value PDF? Grab the Master Frontend Engineering Handbook 2026 here: https://lnkd.in/dGQhFu6y What is the one technical topic that always trips you up during senior-level system design interviews? #FrontendEngineering #TechLeads #SystemDesign #ReactJS #WebDevelopment #SoftwareArchitecture #JavaScript #NextJS #TypeScript #MicroFrontends #CodingInterview #CareerGrowth #FrontendDeveloper #WebPerformance #Programming #TechIndustry #SeniorEngineer #EngineeringManager #FullStack #SoftwareEngineering #React19 #WebDesign #ResponsiveDesign #DevOps #MERNStack #Blogging #TechEducation #FrontendTips #ComputerScience #SoftwareDevelopment

https://lnkd.in/dQHXJCmG — Most engineers think knowing how to map an array makes them a Senior, but they are dead wrong. After years of scaling enterprise-level platforms and building frontendengineers.com, I’ve realized that the gap between mid-level and senior isn't just experience—it's depth. It’s one thing to use a 'map' in React JS; it’s an entirely different beast to manage high-density lists in Angular while maintaining strict performance budgets. In our latest 5,000+ word deep dive, we move past the 'how-to' and get into the 'why' of modern architecture. We break down complex primitives like Linkify React implementations and why choosing the wrong list-style-type in CSS can actually impact your layout shift. Transitioning to a Senior or Staff role requires you to master the nuances of React 19, Next.js 15 loading patterns, and advanced TypeScript patterns. You need to understand why a 'Loading Spinner' isn't a UX strategy and how 'Loadable Components' impact your Core Web Vitals at scale. Whether you are dealing with Micro Frontends or optimizing Lodash imports to shave off 20kb from your bundle, depth is your only leverage. I’ve spent months distilling these insights into Part 240 of our Handbook because the industry is tired of surface-level tutorials. Stop guessing and start engineering. Want all 205+ guides in a single, high-value PDF? Grab the Master Frontend Engineering Handbook 2026 here: https://lnkd.in/dGQhFu6y What is the one technical concept you think separates a Mid-level from a Senior Engineer in 2025? Tag someone who is currently leveling up their career. #FrontendEngineering #ReactJS #NextJS #TypeScript #WebDevelopment #SoftwareEngineering #Coding #Programming #Javascript #TechLeads #SystemDesign #FullStack #SeniorEngineer #WebPerformance #Angular #MicroFrontends #SoftwareArchitecture #FrontendDeveloper #CareerGrowth #InterviewPrep #CodeQuality #TechCommunity #React19 #OpenSource #WebDesign #PerformanceOptimization #EngineeringManager #StaffEngineer #UIUX #FrontendEngineers

React.js Interview Questions ? Today’s focus Custom Hooks in React — a very popular FAANG interview topic to test code reusability & clean architecture. Problem Statement Create a reusable logic to handle API fetching (loading, error, data). Custom Hook + Clean Code Solution import { useState, useEffect } from "react"; // Custom Hook function useFetch(url) { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const fetchData = async () => { try { setLoading(true); const response = await fetch(url); const result = await response.json(); setData(result); } catch (err) { setError("Something went wrong"); } finally { setLoading(false); } }; fetchData(); }, [url]); return { data, loading, error }; } // Component Usage function App() { const { data, loading, error } = useFetch( "https://lnkd.in/eb7DsqQu" ); if (loading) return <p>Loading...</p>; if (error) return <p>{error}</p>; return ( <ul> {data.map((user) => ( <li key={user.id}>{user.name}</li> ))} </ul> ); } export default App; Interview Concepts Covered: - Custom Hooks (Code Reusability) - Separation of Concerns - API Handling (Loading, Error, Data) - Clean & Scalable Architecture Interview Questions: - What are Custom Hooks? Why do we use them? - Difference between Custom Hook vs Utility Function? - Can we use hooks inside loops/conditions? (No) - How to make this hook more reusable (pagination, caching)? Key Takeaway: Top companies expect you to write clean, reusable, and scalable code, not just working solutions. #ReactJS #FrontendInterview #CustomHooks #WebDevelopment #JavaScript #100DaysOfCode

https://lnkd.in/dzDhpuAY — Most engineers fail senior interviews not because they can't code, but because they can't architect systems at scale. After years of building frontendengineers.com and scaling enterprise-level applications, I’ve realized that the gap between mid-level and staff roles is purely architectural. You can know every React 19 hook by heart, but if you can't explain how your frontend interacts with a .NET Core backend under heavy load, you're staying in 'Junior Land'. In part 206 of our deep-dive series, I break down the exact blueprint for building scalable frontend interview systems. We explore the transition from AngularJS to Angular 14, focusing on how to leverage the Angular Compiler Options for maximum performance. Seniority is about more than just UI; it’s about understanding why you’d choose Apollo GraphQL over standard REST or how to implement Atomic Design React patterns in a massive codebase. We also dive into the nuances of Apollo Client, TypeScript type safety, and how Next.js 15 is changing the way we think about server-side rendering. Whether you are mastering Tailwind CSS animations or debugging complex Apollo React Hooks, you need a system-first mindset. Scaling to millions of users requires you to think about Web Vitals and state management long before you write your first line of CSS. I’ve documented these senior-level transitions so you don’t have to learn them the hard way through production outages. Want all 205+ guides in a single, high-value PDF? Grab the Master Frontend Engineering Handbook 2026 here: https://lnkd.in/dGQhFu6y What’s the most difficult system design question you’ve ever faced in a technical interview? Tag a senior engineer who needs to see these architectural patterns! #FrontendEngineering #Angular #DotNetCore #WebDevelopment #SoftwareArchitecture #SystemDesign #ReactJS #TypeScript #NextJS #JavaScript #CodingInterview #SeniorEngineer #StaffEngineer #TechLead #Programming #WebPerformance #TailwindCSS #GraphQL #ApolloClient #FrontendDevelopment #EngineeringManagement #CareerGrowth #SoftwareEngineering #WebDev #MicroFrontends #CleanCode #EnterpriseSoftware #FullStack #HarshalEngineering #FrontendEngineers

🚀 React Interview Question: What does Re-rendering mean in React? 💡Re-rendering in React means updating the UI when a component’s data changes. 🔹 Key Idea: When state or props change, React re-runs the component function and updates the UI to reflect the latest data. 🔹 Example: import React, { useState } from "react"; function Counter() { const [count, setCount] = useState(0); return ( <div> <p>Count: {count}</p> <button onClick={() => setCount(count + 1)}> Increment </button> </div> ); } Clicking the button updates the state --> React re-renders --> UI updates. 🔹 When does re-render happen? - state changes (useState) - props change - parent component re-renders 🔹 Note: React does NOT refresh the whole page — it efficiently updates only the changed parts using the Virtual DOM. Follow Tarun Kumar for more tech content and interview prep #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #CodingInterview #SoftwareEngineering #TechContent #DeveloperTips