React Interview Questions: Handling Large Assets for Better Lighthouse Score

⚛️ Top 150 React Interview Questions – 125/150 📌 Topic: Why is key={Math.random()} Bad? ━━━━━━━━━━━━━━━━━━━━━━ 🔹 WHAT is it? Using Math.random() as a key generates a new identity on every render. React uses the key to track elements between renders. If the key keeps changing, React assumes: 👉 “This is a completely new component.” So instead of updating the element, React destroys it and creates a new one. ━━━━━━━━━━━━━━━━━━━━━━ 🔹 WHY is it bad? 🚨 Performance Degradation React cannot efficiently diff elements. It unmounts and remounts everything. 💥 Loss of Component State All local state (useState) is lost. Examples: • Input values reset • Scroll position disappears • Checkbox states vanish 🎯 UX Glitches • Cursor jumps out of input fields • Animations break • Focus disappears You basically break React’s reconciliation system. ━━━━━━━━━━━━━━━━━━━━━━ 🔹 HOW to fix it? ❌ BAD (Unstable Key) {items.map(item => ( <input key={Math.random()} /> ))} Key changes every render → React remounts everything. ✅ GOOD (Stable Key) {items.map(item => ( <input key={item.id} /> ))} Use a unique, stable identifier like: • Database ID • UUID (stored once) • Unique slug React can now track elements correctly. ⚠️ Rule: Keys must be: • Stable • Unique • Predictable Never generated during render. ━━━━━━━━━━━━━━━━━━━━━━ 🔹 WHERE does this matter most? ⌨️ Input Fields Prevents cursor from jumping while typing. 📜 Large Lists Avoids re-rendering hundreds of elements unnecessarily. 🧠 Stateful Components Preserves internal useState data. 🎬 Animated Lists Prevents broken transitions. ━━━━━━━━━━━━━━━━━━━━━━ 📝 SUMMARY (Easy to Remember) Think of a Library Card 📚 If your library card number changed every time you entered the building, the librarian (React) would think you are a new person every visit. They would delete your old record and create a new one from scratch. Stable key = Stable identity. Random key = Identity crisis. ━━━━━━━━━━━━━━━━━━━━━━ 👇 Comment “React” if this series is helping you 🔁 Share with someone preparing for React interviews #ReactJS #ReactKeys #FrontendDevelopment #Performance #Top150ReactQuestions #LearningInPublic #Developers ━━━━━━━━━━━━━━━━━━━━━━

⚛️ Top 150 React Interview Questions – 130/150 📌 Topic: Diffing Algorithm Logic ━━━━━━━━━━━━━━━━━━━━━━ 🔹 WHAT is it? The Diffing Algorithm is a heuristic O(n) strategy used by React’s Reconciler. It compares: 👉 Previous Virtual DOM vs 👉 New Virtual DOM And calculates the minimum number of changes required in the real DOM. Instead of rebuilding the entire UI, React updates only what actually changed. ━━━━━━━━━━━━━━━━━━━━━━ 🔹 WHY is it important? ⚡ High Performance Avoids expensive O(n³) tree comparison algorithms. 🎯 Efficient Updates Only changed nodes are patched in the real DOM. 🧠 State Preservation Keeps internal component state intact if structure doesn't change. 💻 Smooth UI Minimizes browser reflows and repaints. Without diffing → React would re-render everything. With diffing → React updates intelligently. ━━━━━━━━━━━━━━━━━━━━━━ 🔹 HOW does it work? (3 Core Rules) ✅ Rule 1: Different Element Types → Replace Entire Node // Old <div><Counter /></div> // New <span><Counter /></span> React tears down <div> and mounts <span> from scratch. Different tag → Full replacement. ✅ Rule 2: Same Element Type → Update Attributes Only // Old <div className="before" /> // New <div className="after" /> React updates only: • className No full DOM replacement. Same tag → Patch attributes. ✅ Rule 3: Keys in Lists → Smart Reordering <ul> <li key="a">Apple</li> <li key="b">Banana</li> </ul> New item added at start: <ul> <li key="c">Cherry</li> <li key="a">Apple</li> <li key="b">Banana</li> </ul> With keys: • React moves a and b • Does NOT recreate everything Without keys → Entire list re-renders. Keys give React identity tracking. ━━━━━━━━━━━━━━━━━━━━━━ 🔹 WHERE is this critical? 📜 Dynamic Lists Adding, removing, sorting items. 🔄 Conditional Rendering Deciding whether to update or remount. 🧮 Frequent State Updates Avoiding unnecessary DOM operations. 📊 Dashboards Updating small widgets efficiently. ━━━━━━━━━━━━━━━━━━━━━━ 📝 SUMMARY (Easy to Remember) The Diffing Algorithm is like a “Spot the Difference” game 🔍 Instead of throwing away the entire drawing and repainting it, React compares old vs new sketches and changes only what is different — like recoloring a hat instead of repainting the whole person. Efficient. Smart. Minimal. ━━━━━━━━━━━━━━━━━━━━━━ 👇 Comment “React” if this series is helping you 🔁 Share with someone preparing for React interviews #ReactJS #Reconciliation #DiffingAlgorithm #FrontendDevelopment #Performance #Top150ReactQuestions #LearningInPublic #Developers ━━━━━━━━━━━━━━━━━━━━━━

⚛️ Top 150 React Interview Questions – 132/150 📌 Topic: Event Delegation in v17/v18 ━━━━━━━━━━━━━━━━━━━━━━ 🔹 WHAT is it? In React v17 and v18, event delegation attaches a single event listener to the root DOM container (the mount div). Instead of: ❌ Adding event listeners to every button React uses: ✅ One listener at the root ✅ Handles all child events via bubbling This improves performance and isolation. ━━━━━━━━━━━━━━━━━━━━━━ 🔹 WHY is this important? 🧠 Memory Efficiency Avoids thousands of individual event listeners in large lists. 🔒 Safer Integration Since React 17, listeners attach to the root container — not document. This makes embedding React inside legacy apps much safer. 🧱 Root Isolation Multiple React apps on the same page won’t interfere with each other. Each root manages its own event system independently. ━━━━━━━━━━━━━━━━━━━━━━ 🔹 HOW does it work? React handles this automatically behind the scenes. Your onClick is delegated to the root. const List = () => { const handleClick = (e) => { // React catches this at the root div console.log("Clicked:", e.target.innerText); }; return ( <div> {/* Even 1,000 buttons still use 1 root listener */} {[1, 2, 3].map(i => ( <button key={i} onClick={handleClick}> Item {i} </button> ))} </div> ); }; Even if you render 1,000 buttons, React still uses only one listener at the root container. 🔄 React 16 vs React 17 Difference: • React 16 → Attached listeners to document • React 17+ → Attaches listeners to the React root This prevents cross-app conflicts. ━━━━━━━━━━━━━━━━━━━━━━ 🔹 WHERE is this useful? 🧩 Micro-Frontends Multiple React apps running side-by-side safely. 📜 Infinite Scroll Lists Efficient interaction handling for thousands of items. ⚡ Dynamic UI Newly added elements automatically inherit the root listener. 🏢 Legacy Integration Embedding React inside existing non-React systems. ━━━━━━━━━━━━━━━━━━━━━━ 📝 SUMMARY (Easy to Remember) Think of a Security Desk at a Building Entrance 🏢 Instead of every office (button) having its own guard, One guard at the main door (Root) handles all visitors (events) and directs them to the correct room. One listener. All events. Efficient and isolated. ━━━━━━━━━━━━━━━━━━━━━━ 👇 Comment “React” if this series is helping you 🔁 Share with someone preparing for React interviews #ReactJS #EventDelegation #ReactInternals #FrontendDevelopment #Top150ReactQuestions #LearningInPublic #Developers ━━━━━━━━━━━━━━━━━━━━━━

⚛️ Top 150 React Interview Questions – 118/150 📌 Topic: DevTools Profiler ━━━━━━━━━━━━━━━━━━━━━━ 🔹 WHAT is it? The DevTools Profiler is a performance analysis tool inside the React Developer Tools extension. It records how often components render and shows why they rendered. It helps you understand what React is doing behind the scenes. ━━━━━━━━━━━━━━━━━━━━━━ 🔹 WHY use it? 🔥 Identify Bottlenecks Find components that take too long to render. 🛑 Stop Unnecessary Re-renders See exactly which props or state changes triggered updates. ⚡ Improve User Experience Fix lag in inputs, scrolling, or animations. If your UI feels “heavy,” Profiler tells you where the problem is. ━━━━━━━━━━━━━━━━━━━━━━ 🔹 HOW to use it? ✅ Step 1: Open React DevTools Install the React Developer Tools extension (Chrome/Firefox). ✅ Step 2: Go to “Profiler” Tab ✅ Step 3: Click “Record” (Blue Button) ✅ Step 4: Interact with Your App Click buttons, type in inputs, scroll lists. ✅ Step 5: Click “Stop” and Analyze You will see: • Flame Chart (which components rendered) • Render Duration (how long each took) • Why each component rendered Example Optimization If Profiler shows unnecessary renders: const HeavyComponent = React.memo(({ data }) => { return <div>{data.label}</div>; }); 👉 React.memo prevents re-render if props did not change. ━━━━━━━━━━━━━━━━━━━━━━ 🔹 WHERE to use it? 📋 Complex Lists When scrolling feels jumpy. 📝 Large Forms When typing feels delayed. 🎬 Animations To maintain smooth 60 FPS performance. 📊 Dashboards When many charts update at once. ━━━━━━━━━━━━━━━━━━━━━━ 📝 SUMMARY (Easy to Remember) Think of a CCTV Camera in a Factory 📹 If production slows down, you replay the footage to see which machine (component) is slowing everything down. DevTools Profiler is that CCTV for your React app. ━━━━━━━━━━━━━━━━━━━━━━ 👇 Comment “React” if this series is helping you 🔁 Share with someone preparing for React interviews #ReactJS #ReactPerformance #ReactProfiler #FrontendDevelopment #Top150ReactQuestions #LearningInPublic #Developers ━━━━━━━━━━━━━━━━━━━━━━

You are in a system design interview at Meta for an IC4 role. The interviewer leans in and asks: "If a photo is already on my phone, how can WhatsApp still delete it when the sender taps Delete for Everyone?" Here is how you should break it down 👇 A lot of people think “Delete for Everyone” means WhatsApp somehow reaches into your gallery and erases a file from your device. That is not really what is happening. Btw, if you’re preparing for system design/coding interviews, check out my free mock interview tool on Layrs. You can use it for free here: https://lnkd.in/gpCn7t2T The real answer depends on where the photo is stored, how the chat app references it, and what exactly the app is allowed to delete. 1. First clarify the product behavior Before jumping into architecture, say this clearly in the interview: There are two different cases here. a) The photo exists only inside the chat app’s managed storage b) The photo has already been saved to the user’s gallery / camera roll / filesystem This distinction is everything. If the photo is only inside WhatsApp’s controlled storage, the app can remove the local file and remove the message reference from the chat UI. If the photo was exported or auto-saved to the gallery, WhatsApp usually cannot reliably delete that copy, because that file is now outside the app’s normal ownership boundary. So “Delete for Everyone” is mostly about: - deleting the message record - deleting the media attachment reference - deleting any app-managed cached copy - syncing that deletion event to all participants It is not magic remote file deletion across the whole phone.  2. High-level idea The clean way to think about this is: A chat message is metadata plus optional media. For a photo message, the system usually has: - message_id - chat_id - sender_id - media_id - timestamp - status - optional encryption metadata And the actual photo itself may live in: - encrypted object storage on server for temporary delivery - app sandbox / local database / media cache on device - optionally the user’s gallery if exported When sender taps Delete for Everyone, the system does not chase every byte everywhere. It sends a deletion command tied to the message_id.  3. What happens when the photo is first sent Here is the send flow: 1. User picks a photo 2. App encrypts media and prepares message metadata 3. App uploads encrypted media blob or sends it through media pipeline 4. App sends message metadata referencing that media 5. Receiver downloads the encrypted media 6. Receiver stores it locally in app-managed storage 7. Chat UI shows the message by resolving message_id -> media_id -> local file Read rest of the post: https://lnkd.in/gpv-wGze

⚛️ Top 150 React Interview Questions – 126/150 📌 Topic: Mixing Class and Functional Components ━━━━━━━━━━━━━━━━━━━━━━ 🔹 WHAT is it? Mixing Class and Functional components means a project contains: • ES6 Class-based components • Modern Function components using Hooks Both exist together inside the same React tree. React fully supports this. A Functional component can render a Class component — and vice versa. ━━━━━━━━━━━━━━━━━━━━━━ 🔹 WHY does this happen? 🔄 Incremental Migration Teams can adopt Hooks gradually without rewriting the entire legacy codebase. 🔁 Backward Compatibility React was built to support both patterns seamlessly. 📦 Third-Party Integration Some older libraries still expose Class-based HOCs. 🏢 Enterprise Reality Large apps evolve — they are rarely rebuilt from scratch. Mixing is normal during modernization. ━━━━━━━━━━━━━━━━━━━━━━ 🔹 HOW does it work? ✅ Functional Component rendering a Class Component const Dashboard = () => { return ( <div> <h1>Modern UI</h1> <LegacyChart title="User Data" /> </div> ); }; ✅ Class Component rendering a Functional Component class LegacySidebar extends React.Component { render() { return ( <aside> <UserAvatar name="John" /> </aside> ); } } React treats both as valid components in the tree. ⚠️ Important Rules: • Hooks cannot be used inside Class components. • Lifecycle methods cannot be used inside Functional components. • Each pattern follows its own internal rules. ━━━━━━━━━━━━━━━━━━━━━━ 🔹 WHERE is this common? 🏗 Legacy Codebases When adding modern features to older projects. 🔧 Refactoring Phases Transitioning from lifecycle methods to useEffect. 📚 Hybrid Libraries Internal custom hooks + external class-based wrappers. 🏢 Large Applications Gradual modernization strategy. ━━━━━━━━━━━━━━━━━━━━━━ 📝 SUMMARY (Easy to Remember) Think of a Smart Home 🏠 You can plug a modern AI-powered lamp (Functional) into an old-fashioned wall socket (Class). They work differently inside, but as long as the plug fits the socket, the house works perfectly. React allows both to coexist — just respect their rules. ━━━━━━━━━━━━━━━━━━━━━━ 👇 Comment “React” if this series is helping you 🔁 Share with someone preparing for React interviews #ReactJS #Hooks #LegacyCode #FrontendDevelopment #Top150ReactQuestions #LearningInPublic #Developers ━━━━━━━━━━━━━━━━━━━━━━

You can pass React interviews even if you’ve never built a massive React application. Most interviews don’t test how big your project was. They test whether you actually understand how React works, even when the code is written with the help of AI. Here are the kinds of React questions that show up repeatedly in interviews. ➤ Common React Interview Questions 𝗕𝗔𝗦𝗜𝗖 𝗟𝗘𝗩𝗘𝗟 1. What problem does React solve compared to vanilla JS? 2. What is JSX and how is it transformed under the hood? 3. What is the difference between props and state? 4. What is the purpose of the key prop in lists? 5. How does event handling work in React? 6. What happens when state updates in a component? 7. How does conditional rendering work in React? 8. What are fragments and when would you use them? 9. What are controlled inputs in React forms? 10. What is lifting state up and why is it useful? 𝗠𝗢𝗗𝗘𝗥𝗔𝗧𝗘 𝗟𝗘𝗩𝗘𝗟 11. What happens during a React re-render? 12. What is the difference between useMemo and useCallback? 13. When should you use React.memo? 14. What problems does the Context API solve? 15. What is prop drilling and how can you avoid it? 16. What is the difference between client-side routing and traditional routing? 17. How do you structure state in a medium-sized React application? 18. What is code splitting and how does React.lazy work? 19. How do you debounce expensive operations like search inputs? 20. What is the difference between controlled and uncontrolled components? 𝗔𝗗𝗩𝗔𝗡𝗖𝗘𝗗 𝗟𝗘𝗩𝗘𝗟 21. How does React reconciliation work? 22. What is the diffing algorithm in React? 23. How do you prevent unnecessary re-renders in large apps? 24. What are Server Components and when would you use them? 25. How does streaming SSR work in modern React frameworks? 26. What are error boundaries and where should they be placed? 27. How would you structure authentication and protected routes? 28. How do you manage global state in large React applications? 29. How do you debug performance issues in React? 30. How would you design a scalable folder structure for a large React codebase? 𝗔𝗜-𝗥𝗘𝗟𝗔𝗧𝗘𝗗 𝗤𝗨𝗘𝗦𝗧𝗜𝗢𝗡𝗦 (𝗡𝗼𝘄 𝗦𝗵𝗼𝘄𝗶𝗻𝗴 𝗨𝗽 𝗶𝗻 𝗜𝗻𝘁𝗲𝗿𝘃𝗶𝗲𝘄𝘀) 31. How do you use AI tools during development without blindly trusting generated code? 32. How would you verify if AI-generated React code is correct or performant? 33. What parts of a React workflow can AI realistically speed up? 34. What risks come from relying too heavily on AI-generated code? 35. How would you debug code that was generated by an AI assistant? These questions show up again and again across frontend interviews. That’s exactly why I created the Frontend Interview Playbook, a structured guide that covers React fundamentals, machine coding patterns, frontend system design, performance engineering, and how to use AI properly during preparation. You can check it out here: https://lnkd.in/d8vBd3_j  Use code FRONT10 for 10% off.

Imagine you're in an E4 system design interview at Meta (80LPA+ role) and the interviewer asks: If apps like Instagram are free, how do they store billions of photos and videos without charging users anything? This is a classic large-scale storage + serving problem. Btw, if you’re preparing for system design/coding interviews, check out our mock interview tool. You can use it for free here: https://lnkd.in/gpCn7t2T [1] Clarify what we actually need to solve This is not just “save files somewhere.” It is: - store billions of user-generated photos and videos durably - serve them globally with low latency - handle huge spikes in uploads and views - keep storage cost low enough that the free product still works as a business - support metadata, privacy settings, deletes, thumbnails, and multiple video qualities So the real problem is cheap durable blob storage + fast global delivery, not just databases. [2] High level approach Use an object storage architecture, very similar to S3-style thinking, plus a CDN. - user uploads media through an upload service - media gets stored as objects in distributed blob storage - metadata goes into a separate database - background workers generate thumbnails, compressed variants, and multiple resolutions - users fetch media through CDN edges, not directly from storage every time That separation is the key: - blobs in object storage - metadata in databases - delivery through CDN [3] Upload and storage flow When a user uploads a photo or video: - client asks backend for an upload URL - backend authenticates user and creates a media record - client uploads file to object storage - storage returns object key like `media/user123/abc.jpg` - metadata DB stores:   - owner_id   - object_key   - media_type   - visibility   - created_at   - processing_status Why not store media in a database? - media files are huge - databases are expensive for large blobs - object stores are cheaper, simpler, and built for this exact use case [4] Processing pipeline After upload, run async workers: - image resize - thumbnail generation - video transcoding into multiple bitrates - format conversion - moderation / safety checks This is queue-based because video processing is expensive and should not block the upload request. [5] How they keep it free The short answer: ads fund the storage bill. The technical answer: - object storage is much cheaper per GB than traditional databases - cold media can move to lower-cost storage tiers - CDN reduces repeated origin reads - media is compressed aggressively - old videos/photos are rarely accessed compared to new ones, so caching and tiering cut costs a lot At this scale, storage is not free. It is just optimized so well that ad revenue more than covers it.

That’s a really insightful perspective. We use Instagram almost every day, yet rarely pause to think about the complexity behind it — the systems, scalability, and design decisions that make it work seamlessly. This post definitely inspired me to start looking at everyday products through the lens of a system designer. There’s so much to learn when we shift our perspective. #SystemDesign #Learning #Tech #EngineeringMindset

⚛️ Top 150 React Interview Questions – 129/150 📌 Topic: React Fiber Architecture ━━━━━━━━━━━━━━━━━━━━━━ 🔹 WHAT is it? React Fiber is a complete rewrite of React’s core reconciliation algorithm. It enables incremental rendering, meaning: 👉 React can split rendering work into small chunks 👉 Spread that work across multiple frames Instead of blocking the browser until everything finishes. Fiber is the engine behind: • Concurrent Rendering • Prioritized updates • Interruptible rendering ━━━━━━━━━━━━━━━━━━━━━━ 🔹 WHY was Fiber introduced? ⏸️ Pause & Resume React can stop low-priority work to handle urgent user interactions. ⚡ Concurrency Multiple rendering tasks can be managed without freezing the UI. 🎯 Priority Ranking React differentiates between: • Urgent updates (typing, clicking) • Non-urgent updates (large list rendering) This keeps apps smooth and responsive. Before Fiber → Rendering was synchronous and blocking. After Fiber → Rendering is interruptible and smarter. ━━━━━━━━━━━━━━━━━━━━━━ 🔹 HOW does it work (Conceptually)? Fiber breaks work into units. Instead of: ❌ Render everything at once It does: ✅ Render small pieces ✅ Yield control to browser ✅ Resume later Example using transitions (built on Fiber): import { useState, useTransition } from 'react'; const FiberTask = () => { const [isPending, startTransition] = useTransition(); const [data, setData] = useState([]); const handleUpdate = () => { startTransition(() => setData(new Array(5000).fill("Node")) ); }; return ( <button onClick={handleUpdate}> {isPending ? "..." : "Run"} </button> ); }; Here: • Button click is urgent • Large list update is low priority • React schedules intelligently That scheduling power comes from Fiber. ━━━━━━━━━━━━━━━━━━━━━━ 🔹 WHERE is Fiber critical? 📊 Complex Dashboards Multiple charts updating at once. 📜 Large Lists Rendering thousands of rows without freezing. 🎬 Animations Maintaining smooth 60fps during updates. ⏳ Suspense & Transitions Handling loading states gracefully. 📱 Mobile Devices Preventing UI lag on slower CPUs. ━━━━━━━━━━━━━━━━━━━━━━ 📝 SUMMARY (Easy to Remember) Old React was like a Waterfall 🌊 Once rendering started, it couldn’t stop. React Fiber is like a Smart Traffic Signal 🚦 If an Ambulance (User Input) arrives, regular cars (background renders) must wait. Urgent tasks go first. UI stays smooth. That scheduling intelligence is React Fiber. ━━━━━━━━━━━━━━━━━━━━━━ 👇 Comment “React” if this series is helping you 🔁 Share with someone preparing for React interviews #ReactJS #ReactFiber #ConcurrentRendering #FrontendDevelopment #Performance #Top150ReactQuestions #LearningInPublic #Developers ━━━━━━━━━━━━━━━━━━━━━━