React DevTools Profiler for Performance Optimization

⚛️ 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 ━━━━━━━━━━━━━━━━━━━━━━

React.js Interview Prep Checklist – What You Should Actually Revise 🚀 If you're preparing for a Frontend React.js interview, don’t just revise hooks randomly. Structure your preparation across layers: fundamentals → rendering → performance → architecture. Here’s a practical checklist to guide you 👇 🔹 React Core Concepts • What is React and why do we use it? • What is the Virtual DOM and how does it differ from the Real DOM? • How does reconciliation (diffing) work internally? • Why are keys important in lists? • What happens if you use array index as a key? • Props vs State — what’s the real difference? • Functional vs Class components — trade-offs? If you can’t explain rendering clearly, you’re not interview-ready. 🔹 Lifecycle & Rendering Behavior • Mounting, Updating, Unmounting — what actually happens? • Lifecycle equivalents using hooks • When should you use useEffect? • How does cleanup in useEffect prevent memory leaks? Most bugs in React apps come from misunderstanding effects. 🔹 React Hooks Deep Dive • useState — batching & async updates • useEffect dependency array logic • useContext — when to use and when to avoid • useRef — persistence without re-render • useReducer — complex state management • useMemo vs useCallback — real performance use cases • useLayoutEffect — when timing matters • Custom hooks — extracting reusable logic Hooks are easy to use, hard to master. 🔹 Performance & Optimization • What causes unnecessary re-renders? • How does React.memo work? • Code splitting & lazy loading • Suspense basics • Bundle size reduction strategies • Tree shaking Senior interviews heavily focus on performance thinking. 🔹 State Management • Context API fundamentals • Context vs Redux — real-world trade-offs • When Redux makes sense • Reducers, actions, store structure Architectural clarity > tool knowledge. 🔹 Advanced Topics • Error Boundaries • Higher Order Components (HOCs) • Event bubbling & delegation • Controlled vs Uncontrolled components • Debouncing vs Throttling • Virtualization for large datasets • API caching strategies • Web Workers — when to move work off the main thread These topics differentiate mid-level from senior engineers. 🎯 Final Advice Don’t just memorize definitions. Understand: • Why React re-renders • How scheduling works • How data flows • How performance degrades • How to debug production issues That’s what interviewers truly evaluate. Learn deeply. Build intentionally. Explain clearly. 👉 Follow Rahul R Jain for more real interview insights, React fundamentals, and practical frontend engineering content. #ReactJS #FrontendEngineering #JavaScript #WebDevelopment #TechInterviews #PerformanceOptimization #SoftwareEngineering #ReactDeveloper

⚛️ 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 – 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 ━━━━━━━━━━━━━━━━━━━━━━

⚛️ Top 150 React Interview Questions – 146/150 📌 Topic: 🧹 Cleanup Function Importance ━━━━━━━━━━━━━━━━━━━━━━ 🔹 WHAT is it? The Cleanup Function is the function returned inside useEffect. It runs: • Right before a component unmounts • Before the effect re-runs (when dependencies change) Its job is to undo side effects created by the effect. Think of it as a reset mechanism. ━━━━━━━━━━━━━━━━━━━━━━ 🔹 WHY is it critical? 🧠 Prevents Memory Leaks Stops timers, subscriptions, or listeners from running after unmount. ⚠️ Avoids Illegal State Updates Prevents “Cannot update state on an unmounted component” errors. 🔒 System Integrity Releases global resources like WebSockets and browser listeners. Without cleanup → background chaos. With cleanup → controlled environment. ━━━━━━━━━━━━━━━━━━━━━━ 🔹 HOW does it work? React automatically executes the returned function. ✅ WebSocket Cleanup useEffect(() => { const socket = connect(id); // CLEANUP return () => socket.disconnect(); }, [id]); When id changes or component unmounts → connection closes. ✅ Abort API Request useEffect(() => { const controller = new AbortController(); fetch(url, { signal: controller.signal }); return () => controller.abort(); // Cancel request }, [url]); Prevents updating state after navigation. ━━━━━━━━━━━━━━━━━━━━━━ 🔹 WHERE is cleanup mandatory? 🔌 Subscriptions WebSocket, Firebase, Chat APIs. 🌍 Browser APIs window.addEventListener (scroll, resize). ⏱ Timers clearTimeout / clearInterval. 📡 Async Requests AbortController for pending fetch calls. Any persistent side effect → requires cleanup. ━━━━━━━━━━━━━━━━━━━━━━ 📝 SUMMARY The Cleanup Function is like Checking Out of a Hotel Room 🏨 Before leaving (Unmount), you must turn off lights and close taps. If you don’t, the hotel (Browser) keeps wasting resources. Cleanup ensures nothing is left running after you leave. ━━━━━━━━━━━━━━━━━━━━━━ 👇 Comment “React” if this series is helping you 🔁 Share with someone mastering useEffect #ReactJS #useEffect #MemoryLeaks #FrontendBestPractices #WebPerformance #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 – 119/150 📌 Topic: Handling Large Assets ━━━━━━━━━━━━━━━━━━━━━━ 🔹 WHAT is it? Handling Large Assets means using smart strategies to manage and deliver heavy files like: • High-resolution images • Background videos • Large JSON responses • PDF files The goal is simple: Deliver big content without slowing down your app. ━━━━━━━━━━━━━━━━━━━━━━ 🔹 WHY use it? 🚀 Better Lighthouse Score Improves Largest Contentful Paint (LCP) → critical for SEO. ⚡ Better User Experience Prevents blank screens and slow image loading. 💰 Lower Bandwidth Cost Saves mobile data and server expenses. 📱 Mobile Performance Heavy assets can completely freeze low-end devices. ━━━━━━━━━━━━━━━━━━━━━━ 🔹 HOW to handle large assets? ✅ 1. Use Next-Gen Image Formats (WebP / AVIF) <img src="hero.webp" alt="Banner" /> These formats are smaller than JPG/PNG but maintain high quality. ✅ 2. Lazy Load Images (Built-in Browser Support) <img src="large-map.jpg" loading="lazy" /> 👉 The image loads only when it enters the viewport. ✅ 3. Use CDN + Dynamic Resizing (Cloudinary / S3) const imageUrl = "https://lnkd.in/gRz5hdcU"; Instead of uploading one huge image, generate optimized versions on demand. ✅ 4. Code Splitting for Large JSON/Data Load heavy data only when required (using lazy loading or pagination). ✅ 5. Compress Videos Use streaming formats (HLS/DASH) instead of loading full MP4 files at once. ━━━━━━━━━━━━━━━━━━━━━━ 🔹 WHERE to use it? 🛍️ E-commerce Sites Hundreds of product images. 📰 Media & Blog Platforms Articles with infographics or videos. 🏠 Landing Pages Large hero background images. 📊 Dashboards Heavy charts and downloadable reports. ━━━━━━━━━━━━━━━━━━━━━━ 📝 SUMMARY (Easy to Remember) Think of Grocery Delivery 🛒 You don’t bring the entire supermarket home. You: • Pack only what you need • Use smaller bags (compression) • Deliver only when required (lazy loading) • Use a fast scooter (CDN) instead of a truck That’s how large assets should be handled in React. ━━━━━━━━━━━━━━━━━━━━━━ 👇 Comment “React” if this series is helping you 🔁 Share with someone preparing for React interviews #ReactJS #WebPerformance #FrontendDevelopment #Optimization #Top150ReactQuestions #Lighthouse #LearningInPublic #Developers ━━━━━━━━━━━━━━━━━━━━━━

Frontend Interview Breakdown (Technical + Design + Behavioral) 🚀 Recently reviewed an interview process structured across three strong layers: core fundamentals, architectural depth, and leadership mindset. Here’s what a serious frontend interview can look like 👇 🟢 Round 1 – Technical Foundations This round checks if your basics are truly solid. 1️⃣ Explain the JavaScript event loop. How are microtasks and macrotasks scheduled? What runs first and why? 2️⃣ Build a custom React hook to debounce user input. Do you understand closures, timers, and cleanup? 3️⃣ Create a reusable dropdown component. Should support search + multi-select. How do you manage state? Accessibility? Keyboard navigation? 4️⃣ Optimize rendering for 10k+ rows. Do you know virtualization, memoization, and stable keys? 5️⃣ Controlled vs uncontrolled components. When would you use each in real-world forms? This round filters out candidates who only “use” React but don’t deeply understand it. 🟡 Round 2 – Advanced Technical / System Design Now the focus shifts to architecture and scale. 1️⃣ How would you structure a dashboard app with 100+ pages? Folder structure? State boundaries? Routing strategy? 2️⃣ Code splitting & lazy loading. How do they reduce bundle size and improve TTI? 3️⃣ Handling API rate limits gracefully. Retries? Backoff strategy? UI feedback? 4️⃣ Hydration in Next.js. Why do hydration mismatches happen? How do you prevent them? 5️⃣ Designing a shared component library. Versioning? Documentation? Storybook? Design tokens? 6️⃣ CSR vs SSR vs SSG. Trade-offs for SEO, performance, and scalability. 7️⃣ Architecture for 1M+ daily users. Caching, CDN, rendering strategy, monitoring, error boundaries. This is where architectural thinking matters more than syntax. 🔵 Round 3 – Managerial / Behavioral Strong engineers are also strong collaborators. 1️⃣ Tell me about a production bug that broke the UI. How did you debug, communicate, and fix it? 2️⃣ How do you balance technical debt with feature delivery? 3️⃣ Handling disagreements with designers or backend teams. 4️⃣ Explaining complex technical decisions to non-technical stakeholders. This round evaluates ownership, clarity, and maturity. 🎯 Reality Check Modern frontend interviews are not about memorizing hooks. They test: ✅ JavaScript execution model ✅ Rendering behavior ✅ Performance awareness ✅ Architectural decisions ✅ Communication skills If you prepare across all three layers, you stand out immediately. 👉 Follow Rahul R Jain for more real interview insights, React fundamentals, and practical frontend engineering content. #FrontendEngineering #ReactJS #NextJS #SystemDesign #WebPerformance #JavaScript #TechInterviews #SoftwareArchitecture #CareerGrowth

𝗜’𝘃𝗲 𝘁𝗮𝗸𝗲𝗻 𝗰𝗹𝗼𝘀𝗲 𝘁𝗼 𝟭𝟬𝟬 𝗳𝗿𝗼𝗻𝘁𝗲𝗻𝗱 𝗶𝗻𝘁𝗲𝗿𝘃𝗶𝗲𝘄𝘀. 𝗔𝗻𝗱 𝗵𝗲𝗿𝗲’𝘀 𝘀𝗼𝗺𝗲𝘁𝗵𝗶𝗻𝗴 𝗺𝗼𝘀𝘁 𝗱𝗲𝘃𝗲𝗹𝗼𝗽𝗲𝗿𝘀 𝗱𝗼𝗻’𝘁 𝗿𝗲𝗮𝗹𝗶𝘇𝗲: 𝗧𝗵𝗲𝘆 𝗮𝗿𝗲 𝗻𝗼𝘁 𝗿𝗲𝗷𝗲𝗰𝘁𝗲𝗱 𝗯𝗲𝗰𝗮𝘂𝘀𝗲 𝘁𝗵𝗲𝘆 𝗱𝗼𝗻’𝘁 𝗸𝗻𝗼𝘄 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁. 𝗧𝗵𝗲𝘆 𝗮𝗿𝗲 𝗿𝗲𝗷𝗲𝗰𝘁𝗲𝗱 𝗯𝗲𝗰𝗮𝘂𝘀𝗲 𝘁𝗵𝗲𝘆 𝗱𝗼𝗻’𝘁 𝘂𝗻𝗱𝗲𝗿𝘀𝘁𝗮𝗻𝗱 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗱𝗲𝗲𝗽𝗹𝘆. There’s a difference. If I ask: “What is a closure?” Most people answer: “A function that remembers its outer variables.” Correct. But if I follow up with: • Do closures store values or references? • Why don’t cyclic references break modern garbage collectors? • How can closures accidentally cause memory leaks? • What happens to closure variables during mark-and-sweep? That’s where answers collapse. Same with the event loop. Everyone says: “JS is single-threaded.” But senior interviews go into: • Microtasks vs macrotasks • Event-loop starvation • Why Promise callbacks run before setTimeout • How to yield control to keep UI responsive • Why the event loop belongs to the host environment, not the language And then further: • Hidden classes and inline caching • JIT optimization behavior • WeakMap vs native private fields • structuredClone vs JSON deep copy • Module resolution in ESM • How ECMAScript defines execution order This is the difference between “knowing JS” and understanding the engine. That’s exactly why I wrote The JavaScript Masterbook in a way so that it works a single source of in-depth JS concepts. You will get ✅ 180+ structured, interview-focused questions from fundamentals to spec-level depth. Each question covers: • One-line interview answer • Why it matters • Internal mechanics • Common misconceptions • Practice prompts 👉 Grab eBook Here: https://lnkd.in/gyB9GjBt Because in 2026, interviews are not about syntax. They are about clarity. If you’re preparing for serious frontend roles, depth in JavaScript is non-negotiable.

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