Frontend Interview Prep in 2 Days: Focus on Fundamentals

One Frontend Interview Question That Never Goes Away: async vs defer This is one of the most commonly asked frontend interview questions — and many candidates answer it without understanding why it exists. Before talking about async and defer, you must understand how the browser parses HTML. 🧠 How HTML Parsing Actually Works When the browser loads a page, it parses HTML from top to bottom. If it encounters a <script> tag without async or defer: 1. HTML parsing stops 2. The JavaScript file is downloaded 3. The script is executed 4. HTML parsing resumes ⚠️ This is blocking behavior, and it can significantly slow down page load and delay rendering. 🚀 What async Does With async: Script downloads in parallel while HTML continues parsing Script executes as soon as it finishes downloading HTML parsing pauses only during execution Execution order is NOT guaranteed ✅ Best suited for: Scripts that are independent Scripts that don’t rely on DOM or other scripts 📌 Common examples: Analytics Ads Tracking scripts 🕒 What defer Does With defer: Script downloads in parallel with HTML parsing Execution is delayed until HTML parsing completes Scripts execute in the same order they appear in the document ✅ Best suited for: Scripts that depend on the DOM Scripts that rely on other scripts 🧠 Easy Rule to Remember Independent + performance-focused → async DOM-dependent + ordered execution → defer Understanding this small detail shows interviewers that you know how browsers work — not just JavaScript syntax. And yes, it directly impacts page performance and frontend architecture. 👉 Follow Rahul R Jain for more real interview insights, React fundamentals, and practical frontend engineering content. #JavaScript #FrontendDevelopment #WebPerformance #BrowserInternals #WebDev #FrontendInterview #LearningInPublic

𝗜𝗳 𝘆𝗼𝘂 𝗵𝗮𝘃𝗲 𝘆𝗼𝘂𝗿 𝗳𝗿𝗼𝗻𝘁𝗲𝗻𝗱 𝗶𝗻𝘁𝗲𝗿𝘃𝗶𝗲𝘄 𝗶𝗻 𝗷𝘂𝘀𝘁 𝟮 𝗱𝗮𝘆𝘀, 𝗱𝗼𝗻'𝘁 𝗽𝗮𝗻𝗶𝗰 𝗮𝗻𝗱 𝗱𝗼𝗻'𝘁 𝘁𝗿𝘆 𝘁𝗼 𝗰𝗼𝘃𝗲𝗿 𝗲𝘃𝗲𝗿𝘆𝘁𝗵𝗶𝗻𝗴, 𝗷𝘂𝘀𝘁 𝘀𝘁𝘂𝗱𝘆 𝘁𝗵𝗲𝘀𝗲 𝘁𝗼𝗽𝗶𝗰𝘀. If your interview is close, this is the highest-ROI prep list: 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗳𝘂𝗻𝗱𝗮𝗺𝗲𝗻𝘁𝗮𝗹𝘀 (𝗻𝗼𝗻-𝗻𝗲𝗴𝗼𝘁𝗶𝗮𝗯𝗹𝗲) • var, let, const + block/function scope • Hoisting & Temporal Dead Zone • Closures & lexical environment • this binding, call / apply / bind, arrow functions • Prototype chain & inheritance • ES6 classes vs prototypes (what is syntax sugar, what is not) 👉 These explain why most bugs happen. 𝗘𝘅𝗲𝗰𝘂𝘁𝗶𝗼𝗻 & 𝗮𝘀𝘆𝗻𝗰 𝗯𝗲𝗵𝗮𝘃𝗶𝗼𝗿 • Event loop: call stack, task queue, microtask queue • Promises & chaining • async / await patterns (error handling, sequencing) • Stale closures in async code 👉 Almost every “why does this behave weirdly?” question lives here. 𝗗𝗮𝘁𝗮 & 𝗿𝗲𝗳𝗲𝗿𝗲𝗻𝗰𝗲𝘀 • Equality & coercion (== vs ===, truthy/falsy) • Deep vs shallow copy • Object & array references • map, filter, reduce, find, some, every 👉 Interviewers love probing reference bugs. 𝗕𝗿𝗼𝘄𝘀𝗲𝗿 & 𝗗𝗢𝗠 (𝗼𝗳𝘁𝗲𝗻 𝘂𝗻𝗱𝗲𝗿𝗲𝘀𝘁𝗶𝗺𝗮𝘁𝗲𝗱) • DOM events & event delegation • Reflow vs repaint (what actually triggers them) • Debouncing vs throttling • requestAnimationFrame (when and why) 👉 This separates frontend engineers from React users. 𝗡𝗲𝘁𝘄𝗼𝗿𝗸 & 𝘀𝗶𝗱𝗲 𝗲𝗳𝗳𝗲𝗰𝘁𝘀 • Fetch API • AbortController (why cancellation matters) • CORS basics (what FE controls vs what it doesn’t) • Web storage vs cookies (when to use what) 👉 Real-world frontend is async + network heavy. 𝗣𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲 & 𝗮𝗿𝗰𝗵𝗶𝘁𝗲𝗰𝘁𝘂𝗿𝗲 𝘀𝗶𝗴𝗻𝗮𝗹𝘀 • Pure functions & testable code • When memoization helps vs hurts • Web Workers (what problems they actually solve) 👉 You don’t need mastery you need reasoning. 𝗛𝗼𝘄 𝘁𝗼 𝘀𝘁𝘂𝗱𝘆 𝘁𝗵𝗲𝘀𝗲 𝗶𝗻 𝟮 𝗱𝗮𝘆𝘀 Don’t memorize definitions. For each topic, practice answering: Why does this exist? What breaks if I misuse it? Where have I seen this bug in real code? That’s how interviews probe. My eBook will save you weeks of scattered prep. 📘 300+ JS and ReactJS questions 📘 60 System Design Question (HLD and LLD) 👉✅️Grab ebook here: https://lnkd.in/g9hdUJkf #frontend #javascript #reactjs #interviewpreparation #frontenddeveloper #webdevelopment #career

𝗜’𝘃𝗲 𝘁𝗮𝗸𝗲𝗻 𝗰𝗹𝗼𝘀𝗲 𝘁𝗼 𝟭𝟬𝟬 𝗳𝗿𝗼𝗻𝘁𝗲𝗻𝗱 𝗶𝗻𝘁𝗲𝗿𝘃𝗶𝗲𝘄𝘀. 𝗔𝗻𝗱 𝗵𝗲𝗿𝗲’𝘀 𝘀𝗼𝗺𝗲𝘁𝗵𝗶𝗻𝗴 𝗺𝗼𝘀𝘁 𝗱𝗲𝘃𝗲𝗹𝗼𝗽𝗲𝗿𝘀 𝗱𝗼𝗻’𝘁 𝗿𝗲𝗮𝗹𝗶𝘇𝗲: 𝗧𝗵𝗲𝘆 𝗮𝗿𝗲 𝗻𝗼𝘁 𝗿𝗲𝗷𝗲𝗰𝘁𝗲𝗱 𝗯𝗲𝗰𝗮𝘂𝘀𝗲 𝘁𝗵𝗲𝘆 𝗱𝗼𝗻’𝘁 𝗸𝗻𝗼𝘄 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁. 𝗧𝗵𝗲𝘆 𝗮𝗿𝗲 𝗿𝗲𝗷𝗲𝗰𝘁𝗲𝗱 𝗯𝗲𝗰𝗮𝘂𝘀𝗲 𝘁𝗵𝗲𝘆 𝗱𝗼𝗻’𝘁 𝘂𝗻𝗱𝗲𝗿𝘀𝘁𝗮𝗻𝗱 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗱𝗲𝗲𝗽𝗹𝘆. 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.

⚛️ Top 150 React Interview Questions – 22/150 📌 Topic: How to Update State in React? This is a core React skill — and a common source of bugs if done incorrectly. 🔑 What is the correct method? In Functional Components, React gives you an updater function from the useState hook. You must never modify state directly. ❌ Incorrect: count = count + 1; (React won’t know the value changed, so the UI won’t update) ✅ Correct: setCount(count + 1); (This tells React to re-render the component) ⚡ Why use the updater function? React performs batching — it may group multiple state updates together for performance. Using the setter function ensures React’s reconciliation process runs correctly and the UI stays in sync. 🛠️ How to update different types of state? A. Simple values (numbers / strings): setCount(5); setName("Amit"); B. Based on previous state (Best Practice): If the new state depends on the old state, always use a callback: setCount(prevCount => prevCount + 1); This avoids bugs caused by React’s asynchronous updates. C. Objects & Arrays (Immutability): // Object setUser({ ...user, age: 25 }); // Array setItems([...items, newItem]); 🚫 Where people go wrong Updating state inside render: Calling setState directly in the component body causes an infinite render loop. Expecting immediate updates: Logging state right after setState still shows the old value because updates are scheduled, not instant. 📝 Final takeaway: Updating state is like publishing a new edition of a book 📘 You don’t edit the old copy (mutation). You publish a new version and give it to the reader (React). 👇 Comment “React” if this series is helping you 🔁 Share with someone preparing for React interviews #ReactJS #FrontendDevelopment #ReactInterview #JavaScript #WebDevelopment #LearningInPublic #Top150ReactQuestions

⚛️ Top 150 React Interview Questions – 26/150 📌 Topic: The useEffect Hook & Dependency Array 🔹 WHAT is useEffect? useEffect is a React Hook used to perform side effects in a component. A side effect is anything that affects something outside the component’s render, such as: Fetching data from an API Setting up a timer Subscriptions Manual DOM changes 🔹 WHY do we need useEffect? A React component’s main job is to calculate and return UI. If you place side-effect code (like an API call) directly inside the component body: It runs on every re-render Can cause performance issues Can lead to infinite loops useEffect gives you control over when that code should run. 🔹 HOW do you use useEffect? Syntax: useEffect(() => { // side effect code }, [dependencyArray]); The first argument is the effect logic The second argument decides when the effect runs 🔹 WHERE does the Dependency Array matter? The Dependency Array is the trigger list. No array useEffect(() => {}) Runs after every render (usually a mistake) Empty array useEffect(() => {}, []) Runs only once (after first render) → API calls, timers With dependencies useEffect(() => {}, [count]) Runs on mount and whenever count changes Cleanup happens by returning a function inside useEffect (e.g. clearing timers, unsubscribing). 📝 Summary for your notes: useEffect is like a Post-it note for React: “After you finish rendering the UI, go do this task.” The Dependency Array decides whether that task should run again or not. 👇 Comment “React” if this series is helping you 🔁 Share with someone preparing for React interviews #ReactJS #FrontendDevelopment #ReactInterview #JavaScript #WebDevelopment #LearningInPublic #Top150ReactQuestions

I once walked out of a #React interview thinking: “I know React… why did this feel so hard?” The questions weren’t tricky. They were fundamental. ❌ “Explain Virtual DOM” ❌ “Props vs State” ❌ “Why keys matter?” ❌ “useEffect dependencies?” That’s when I realized something important 👇 Most React interviews don’t test how much you’ve built — They test how clearly you understand what you already use every day. Curated with: ✅ Basic → Intermediate → Advanced questions ✅ Clear, interview-friendly explanations ✅ Real concepts interviewers care about Perfect if you’re: 🎯 Preparing for frontend/full-stack interviews 🎯 Switching companies 🎯 Revising React after long project work Because in interviews, confidence comes from clarity, not cramming. 📎 ReactJS Interview Questions PDF attached 👉 Follow Ankit Sharma Sharma for interview prep, system design, and practical engineering insights. #ReactJS #FrontendInterviews #JavaScript #WebDevelopment #SDE #InterviewPreparation

𝗦𝘁𝗿𝘂𝗴𝗴𝗹𝗶𝗻𝗴 𝘄𝗶𝘁𝗵 𝗥𝗲𝗮𝗰𝘁 𝗜𝗻𝘁𝗲𝗿𝘃𝗶𝗲𝘄𝘀? 𝗖𝗵𝗲𝗰𝗸 𝘁𝗵𝗶𝘀 𝗼𝘂𝘁! I recently came across an amazing resource for anyone preparing for React interviews: GreatFrontEnd. 𝗪𝗵𝗮𝘁 𝗜 𝗹𝗼𝘃𝗲 𝗮𝗯𝗼𝘂𝘁 𝗶𝘁: ✅ 𝗔𝗹𝗹 𝗹𝗲𝘃𝗲𝗹𝘀: Covers everything from Beginner to Advanced concepts. ✅ 𝗜𝗻-𝗱𝗲𝗽𝘁𝗵 𝗘𝘅𝗽𝗹𝗮𝗻𝗮𝘁𝗶𝗼𝗻𝘀: It doesn’t just give you the answer; it explains the "why" and the process behind it. ✅ 𝗣𝗿𝗮𝗰𝘁𝗶𝗰𝗮𝗹 𝗤𝘂𝗲𝘀𝘁𝗶𝗼𝗻𝘀: Real-world coding challenges and theory that actually clear up the fundamentals. If you want to level up your frontend game, I highly recommend checking it out! https://lnkd.in/gmzBtjfg #ReactJS #WebDevelopment #Frontend #InterviewPrep #GreatFrontEnd #Coding #SoftwareEngineering #CareerGrowth

💡 Interview Question I Faced (JavaScript – Async) ❓ Question Write a function runSequential(tasks) that: • Executes each async task one after another (❌ not in parallel) • Stops immediately if any task fails • Returns a Promise • tasks is an array of functions, each returning a Promise 🧩 Given Input const tasks = [ () => Promise.resolve("Task 1 done"), () => new Promise(res => setTimeout(() => res("Task 2 done"), 500)), () => Promise.resolve("Task 3 done"), // () => Promise.reject("Task 3 error") ]; ✅ Expected Output ["Task 1 done", "Task 2 done", "Task 3 done"] If any task fails 👇 Task 3 error ⸻ ✅ Solution (Correct & Interview-Ready) async function runSequential(tasks) { const results = []; try { for (let task of tasks) { const result = await task(); // execute sequentially results.push(result); } return results; } catch (error) { throw error; // stop immediately on failure } } ▶️ Usage runSequential(tasks) .then(res => console.log("All Done:", res)) .catch(err => console.error("Error:", err)); ⸻ 🧠 Key Learnings • await inside for...of → sequential execution • Promise.all() → ❌ parallel (not suitable here) • async function always returns a Promise • Error handling is automatic with try/catch ⸻ 📌 My Takeaway I couldn’t complete this during the interview ❌ But I went back, learned it properly, and now I can confidently solve it ✅ 👉 Interviews don’t test what you already know 👉 They test how fast you can learn and adapt Learn continuously. Grow daily. Be interview-ready. #JavaScript #AsyncAwait #Promises #InterviewQuestion #LearningJourney #WebDevelopment #NeverStopLearning

⚛️ Top 150 React Interview Questions – 37/150 📌 Topic: Importance of ‘Keys’ in Lists 🔹 WHAT is it? A Key is a special string attribute that you must include when rendering lists in React. Keys help React identify which items in an array have changed, been added, or been removed, giving each element a stable identity. 🔹 WHY is it designed this way? React uses a process called Reconciliation (Diffing) to update the UI efficiently. Performance: Instead of re-rendering every item, React uses keys to match existing elements and only move the DOM nodes that actually changed. State Preservation: Keys ensure that internal state (like text inside an input field) stays with the correct item even when the list is sorted or shuffled. Accuracy: They prevent “ghosting” bugs where data from a deleted row appears in a different row. 🔹 HOW do you do it? (The Implementation) Keys must be added to the outermost element inside the .map(). Correct Way (Using Unique IDs): function UserList({ users }) { return ( <ul> {users.map((user) => ( <li key={user.id}>{user.name}</li> ))} </ul> ); } 🔹 WHERE are the best practices? When to Use: Always use keys whenever you render a list from an array. Use Stable IDs: Prefer unique IDs from your data (like database IDs) instead of array indexes, especially if the list can be reordered. Avoid Random Keys: Never use Math.random() as a key. It forces components to remount on every render, causing performance issues and state loss. 📝 Summary for your notes: Keys are like Roll Numbers in a classroom 🎓 Even if students change seats, the teacher (React) can still identify everyone correctly using their roll number. 👇 Comment “React” if this series is helping you 🔁 Share with someone preparing for React interviews #ReactJS #FrontendDevelopment #ReactInterview #JavaScript #WebDevelopment #LearningInPublic #Top150ReactQuestions

⚛️ Top 150 React Interview Questions – 28/150 📌 Topic: The useRef Hook 🔹 WHAT is useRef? useRef is a React Hook that returns a mutable ref object. Think of it as a box that can hold any value (like a DOM element or a variable) that stays the same between re-renders. ⚠️ Most important rule: Changing a ref does NOT cause the component to re-render. 🔹 WHY do we need useRef? 1️⃣ Accessing the DOM Sometimes you need to: Focus an input field Measure the size of a div React handles most DOM work automatically, but useRef gives you a direct grab handle when needed. 2️⃣ Storing values without re-rendering useState → value change = UI re-render useRef → value change = NO UI re-render So if you want to track something (like click count) without refreshing the screen, useRef is the right tool. 🔹 HOW do you use useRef? Syntax: const myRef = useRef(initialValue); It returns an object with one property: myRef.current Example: Focusing an Input function TextInputWithFocusButton() { const inputEl = useRef(null); // 1. Create the ref const onButtonClick = () => { inputEl.current.focus(); // 3. Use 'current' }; return ( <> <input ref={inputEl} type="text" /> {/* 2. Attach the ref */} <button onClick={onButtonClick}>Focus the input</button> </> ); } 🔹 WHERE is useRef used? Managing Focus → Search bar auto-focus Media Playback → Control <video> / <audio> Third-Party Libraries → D3.js, Google Maps (need direct DOM access) Storing Previous Values → Track earlier state values 📝 Summary for your notes: useRef is like a Laser Pointer 🔦 — it lets you point directly at something on the screen (DOM). It’s also like a Secret Notebook 📒 where you store data without forcing the UI to update. 👇 Comment “React” if this series is helping you 🔁 Share with someone preparing for React interviews #ReactJS #FrontendDevelopment #ReactInterview #JavaScript #WebDevelopment #LearningInPublic #Top150ReactQuestions