Crack React Interviews with Basic Knowledge

Recently attended an interesting frontend interview for a product-based project. Sharing some of the questions/topics discussed — might help others preparing 👇 🔹 React & Performance - How do you optimize React bundle size? (code splitting, lazy loading, tree shaking) - What are techniques to improve initial load time? 🔹 React Query - How does caching work in React Query? - Difference between stale time vs cache time - How would you handle refetching and background updates? 🔹 JavaScript Concepts - What is debouncing? Where have you used it in real projects? - Difference between debouncing and throttling 🔹 Redux - How do you handle error states in Redux? - Best practices for managing API errors globally 🔹 Accessibility (Important 🔥) - How do you build a website for specially-abled users? - What are ARIA roles and when do you use them? - How do you ensure keyboard navigation and screen reader support? 🔹 Scenario-Based - How would you design API error handling across the application? - What approach would you take to improve performance of a slow UI? 💡 Key takeaway: Interviews are focusing heavily on real-world scenarios, performance, and accessibility — not just theory. #frontend #reactjs #javascript #webdevelopment #interviewpreparation #redux #reactquery #accessibility

🚀 𝐅𝐫𝐨𝐧𝐭𝐞𝐧𝐝 𝐈𝐧𝐭𝐞𝐫𝐯𝐢𝐞𝐰 𝐒𝐞𝐫𝐢𝐞𝐬 – 𝐃𝐚𝐲 𝟕 𝐀𝐟𝐭𝐞𝐫 𝐠𝐢𝐯𝐢𝐧𝐠 𝟓𝟎+ 𝐟𝐫𝐨𝐧𝐭𝐞𝐧𝐝 𝐢𝐧𝐭𝐞𝐫𝐯𝐢𝐞𝐰𝐬 𝐢𝐧 𝐭𝐡𝐞 𝐥𝐚𝐬𝐭 𝟑 𝐦𝐨𝐧𝐭𝐡𝐬, 𝐈 𝐫𝐞𝐚𝐥𝐢𝐳𝐞𝐝 𝐬𝐨𝐦𝐞𝐭𝐡𝐢𝐧𝐠: 𝐓𝐡𝐞 𝐭𝐡𝐢𝐬 𝐤𝐞𝐲𝐰𝐨𝐫𝐝 𝐢𝐬 𝐰𝐡𝐞𝐫𝐞 𝐦𝐚𝐧𝐲 𝐝𝐞𝐯𝐞𝐥𝐨𝐩𝐞𝐫𝐬 𝐠𝐞𝐭 𝐞𝐱𝐩𝐨𝐬𝐞𝐝. 𝐓𝐨𝐝𝐚𝐲’𝐬 𝐪𝐮𝐞𝐬𝐭𝐢𝐨𝐧 👇 🔹 What will this print? const obj = { name: "Swapnil", greet: function () { console.log(this.name); } }; obj.greet(); setTimeout(obj.greet, 0); Take 10 seconds. Think carefully. ✅ Correct Output: Swapnil undefined 🔥 Why? 1️⃣ First call: obj.greet(); Here, greet is called as a method of obj. So: 👉 this refers to obj Output: Swapnil 2️⃣ Second call: setTimeout(obj.greet, 0); Now we are passing the function reference. It is no longer called as a method of obj. So: 👉 "this" becomes the global object (or undefined in strict mode) And since the global object doesn’t have name, we get: undefined 🧠 What Interviewers Are Testing They want to see if you understand: -How "this" is determined -Call-site based binding -Difference between method call vs function call -How context can be lost Not memorized definitions. 🎯 Interview-Level Insight "this" depends on HOW a function is called, not where it is written. 🚀 Bonus Fix If you want it to work: setTimeout(obj.greet.bind(obj), 0); Now this will stay bound to obj. Tomorrow: We’ll break down 👉 Arrow Function vs Normal Function (this trap continues) Follow for Day 8 🔥 #javascript #frontend #interviewprep #webdevelopment #reactjs #coding #thiskeyword

Day 51/100 Day 28 of 30 – React Series 💡 Today’s Topic: Top React Interview Questions If you're preparing for React interviews, these are the most frequently asked questions in React. Save this post 📌 🧠 Core React Questions 👉 What is React? 👉 What is Virtual DOM? 👉 Difference between Real DOM vs Virtual DOM? 👉 What are components? ⚛️ JSX & Components 👉 What is JSX? 👉 Difference between Functional vs Class Components? 👉 What are props? 👉 What is prop drilling? 🔁 Hooks (Very Important 🔥) 👉 What is useState? 👉 What is useEffect? 👉 What is useRef? 👉 Difference between useMemo vs useCallback? 👉 What are custom hooks? 🔄 State Management 👉 What is lifting state up? 👉 Context API vs Redux? 👉 What is global state? ⚡ Performance Optimization 👉 What is React.memo? 👉 When to use useMemo? 👉 When to use useCallback? 👉 How to prevent unnecessary re-renders? 🌐 Routing & Advanced Concepts 👉 What is React Router? 👉 What are keys in React? 👉 What is lazy loading? 👉 What are Error Boundaries? 🎯 Coding Questions 👉 Reverse a string using React state 👉 Build a counter app 👉 Create a form with validation 👉 Fetch API data and display list 💡 Pro Tips for Interviews ✅ Explain concepts with examples ✅ Focus on hooks (very important) ✅ Practice real-world scenarios ✅ Be clear about performance optimization 🧠 Bonus: 1-Line Answers Virtual DOM → Fast UI updates useEffect → Side effects useRef → No re-render storage React.memo → Prevent re-renders Master these questions → You’re ready for React interviews 🚀 #React #JavaScript #FrontendDeveloper #WebDevelopment #100DaysOfCode #FullStackDeveloper

🚀 Frontend / React Interview Roadmap (Optimized) 🗓️ Phase 1 (Week 1–2): JavaScript Strong Foundation Sabse important hai JavaScript. 70% interviews yahin se hote hain. Important Topics :->> 1. Execution Context 2. Hoisting 3. Scope (Block vs Function) 4. Closures 5. Event Loop 6. Call stack 7. Promise & Async/Await 8. Prototype 9. this keyword 10. Debounce & Throttle 11. Shallow vs Deep Copy ⚛️ Phase 2 (Week 3–4): React Deep Concepts Agar tum **React interview clear karna chahte ho to ye topics must hain. Core Topics:--> 1. Virtual DOM 2. Reconciliation 3. Rendering phases 4. Hooks lifecycle 5. Controlled vs Uncontrolled 6. Context API 7. Error Boundaries 8. Code Splitting 9. Lazy Loading ✨React Optimization :--> 1. React.memo 2. useMemo 3. useCallback 4. Lazy loading 5. Virtualization 6. Debouncing Follow: Nikhil Sharma #React #interview #interviewprepration #roadmap #follow #javascript #developer #community #bestway #optimization #Reactinterview #frontend #frontendinterview

🚀 𝐅𝐫𝐨𝐧𝐭𝐞𝐧𝐝 𝐈𝐧𝐭𝐞𝐫𝐯𝐢𝐞𝐰 𝐒𝐞𝐫𝐢𝐞𝐬 – 𝐃𝐚𝐲 𝟔 𝐀𝐟𝐭𝐞𝐫 𝟓𝟎+ 𝐟𝐫𝐨𝐧𝐭𝐞𝐧𝐝 𝐢𝐧𝐭𝐞𝐫𝐯𝐢𝐞𝐰𝐬 𝐢𝐧 𝐭𝐡𝐞 𝐥𝐚𝐬𝐭 𝟑 𝐦𝐨𝐧𝐭𝐡𝐬, 𝐈 𝐧𝐨𝐭𝐢𝐜𝐞𝐝 𝐬𝐨𝐦𝐞𝐭𝐡𝐢𝐧𝐠 𝐢𝐧𝐭𝐞𝐫𝐞𝐬𝐭𝐢𝐧𝐠: 𝐌𝐨𝐬𝐭 𝐝𝐞𝐯𝐞𝐥𝐨𝐩𝐞𝐫𝐬 𝐤𝐧𝐨𝐰 𝐬𝐞𝐭𝐓𝐢𝐦𝐞𝐨𝐮𝐭 𝐢𝐬 𝐚𝐬𝐲𝐧𝐜. 𝐕𝐞𝐫𝐲 𝐟𝐞𝐰 𝐮𝐧𝐝𝐞𝐫𝐬𝐭𝐚𝐧𝐝 𝐌𝐢𝐜𝐫𝐨𝐭𝐚𝐬𝐤𝐬 𝐯𝐬 𝐌𝐚𝐜𝐫𝐨𝐭𝐚𝐬𝐤𝐬. Today’s question 👇 🔹 What will this print? 𝐜𝐨𝐧𝐬𝐨𝐥𝐞.𝐥𝐨𝐠("𝐀"); 𝐬𝐞𝐭𝐓𝐢𝐦𝐞𝐨𝐮𝐭(() => { 𝐜𝐨𝐧𝐬𝐨𝐥𝐞.𝐥𝐨𝐠("𝐁"); }, 𝟎); 𝐏𝐫𝐨𝐦𝐢𝐬𝐞.𝐫𝐞𝐬𝐨𝐥𝐯𝐞().𝐭𝐡𝐞𝐧(() => { 𝐜𝐨𝐧𝐬𝐨𝐥𝐞.𝐥𝐨𝐠("𝐂"); }); 𝐬𝐞𝐭𝐓𝐢𝐦𝐞𝐨𝐮𝐭(() => { 𝐜𝐨𝐧𝐬𝐨𝐥𝐞.𝐥𝐨𝐠("𝐃"); }, 𝟎); 𝐜𝐨𝐧𝐬𝐨𝐥𝐞.𝐥𝐨𝐠("𝐄"); Take 10 seconds. . . . . . . . . . . Think about execution order. ✅ Correct Output: A E C B D 🔥 Why? Because JavaScript processes tasks in this order: 1️⃣ Synchronous Code (Call Stack) Runs first. A E 2️⃣ Microtask Queue Promises go here. Microtasks always run before macrotasks. C 3️⃣ Macrotask Queue setTimeout goes here. Executed in order they were added. B D 🧠 The Golden Rule After the call stack is empty: 👉 Process ALL microtasks 👉 Then take ONE macrotask 👉 Repeat This rule is what most people miss. 🎯 What Interviewers Are Testing They want to see if you understand: -Execution order -Queue priority -Event loop cycle -Why setTimeout(..., 0) is NOT immediate Not just definitions. 🚀 Pro Tip If asked: “What’s the difference between Microtask and Macrotask?” Say: 𝐌𝐢𝐜𝐫𝐨𝐭𝐚𝐬𝐤𝐬 (𝐥𝐢𝐤𝐞 𝐏𝐫𝐨𝐦𝐢𝐬𝐞𝐬) 𝐚𝐫𝐞 𝐞𝐱𝐞𝐜𝐮𝐭𝐞𝐝 𝐢𝐦𝐦𝐞𝐝𝐢𝐚𝐭𝐞𝐥𝐲 𝐚𝐟𝐭𝐞𝐫 𝐭𝐡𝐞 𝐜𝐮𝐫𝐫𝐞𝐧𝐭 𝐬𝐲𝐧𝐜𝐡𝐫𝐨𝐧𝐨𝐮𝐬 𝐞𝐱𝐞𝐜𝐮𝐭𝐢𝐨𝐧 𝐜𝐨𝐦𝐩𝐥𝐞𝐭𝐞𝐬, 𝐛𝐞𝐟𝐨𝐫𝐞 𝐚𝐧𝐲 𝐦𝐚𝐜𝐫𝐨𝐭𝐚𝐬𝐤𝐬 𝐬𝐮𝐜𝐡 𝐚𝐬 𝐬𝐞𝐭𝐓𝐢𝐦𝐞𝐨𝐮𝐭 𝐚𝐫𝐞 𝐩𝐫𝐨𝐜𝐞𝐬𝐬𝐞𝐝. That’s a strong answer. Tomorrow: The this Keyword (Classic Interview Trap). Follow for Day 7 🔥 #javascript #frontend #interviewprep #webdevelopment #eventloop #reactjs #coding

📌 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 & 𝗥𝗲𝗮𝗰𝘁 𝗜𝗻𝘁𝗲𝗿𝘃𝗶𝗲𝘄 𝗖𝗵𝗲𝗰𝗸𝗹𝗶𝘀𝘁 — 𝗦𝗮𝘃𝗲 𝗧𝗵𝗶𝘀 𝗙𝗼𝗿 𝗟𝗮𝘁𝗲𝗿 🚀 #Day33 If you're preparing for interviews, focus on: 🧠 Core JS Fundamentals ⚡ Async & Event Loop 🧩 Array/Object Logic 🏗 Advanced Concepts (Prototype, Bind, Debounce) 💻 Coding Without Built-ins ⚛️ React Hooks & Architecture 🚀 React Native New Architecture (Fabric, TurboModules, Hermes) Master fundamentals. Practice logic daily. Understand architecture deeply. 📌 Save this for your next interview round. Follow Arun Dubey for more related content! #JavaScript #FrontendDevelopment #ReactJS #WebDevelopment #Interviewquestions #CodingInterview

🚀 Day 3/30 – Frontend Interview Series 📌 Topic: Debouncing vs Throttling If you’ve ever worked on search inputs, scroll events, or button clicks — you’ve probably faced performance issues. 👉 That’s where Debouncing and Throttling come into play. 🔹 What is Debouncing? Debouncing ensures that a function is called only after a certain delay once the user stops triggering the event. 📌 Example: Search input field (API call after user stops typing) function debounce(fn, delay) { let timer; return function (...args) { clearTimeout(timer); timer = setTimeout(() => { fn.apply(this, args); }, delay); }; } 👉 Use when: ✔ API calls ✔ Input validation ✔ Auto-save 🔹 What is Throttling? Throttling ensures that a function is called at most once in a given time interval, no matter how many times the event is triggered. 📌 Example: Scroll or resize events function throttle(fn, limit) { let flag = true; return function (...args) { if (flag) { fn.apply(this, args); flag = false; setTimeout(() => { flag = true; }, limit); } }; } 👉 Use when: ✔ Scroll events ✔ Window resize ✔ Button spam prevention #JavaScript #FrontendDeveloper #ReactJS #WebDevelopment #InterviewPrep #CodingInterview #100DaysOfCode

🚀 𝐅𝐫𝐨𝐧𝐭𝐞𝐧𝐝 𝐈𝐧𝐭𝐞𝐫𝐯𝐢𝐞𝐰 𝐒𝐞𝐫𝐢𝐞𝐬 – 𝐃𝐚𝐲 𝟓 𝐀𝐟𝐭𝐞𝐫 𝐠𝐢𝐯𝐢𝐧𝐠 𝟓𝟎+ 𝐟𝐫𝐨𝐧𝐭𝐞𝐧𝐝 𝐢𝐧𝐭𝐞𝐫𝐯𝐢𝐞𝐰𝐬 𝐢𝐧 𝐭𝐡𝐞 𝐥𝐚𝐬𝐭 𝟑 𝐦𝐨𝐧𝐭𝐡𝐬,  𝐈 𝐜𝐚𝐧 𝐜𝐨𝐧𝐟𝐢𝐝𝐞𝐧𝐭𝐥𝐲 𝐬𝐚𝐲: 𝐈𝐟 𝐲𝐨𝐮 𝐝𝐨𝐧’𝐭 𝐮𝐧𝐝𝐞𝐫𝐬𝐭𝐚𝐧𝐝 𝐭𝐡𝐞 𝐄𝐯𝐞𝐧𝐭 𝐋𝐨𝐨𝐩, 𝐲𝐨𝐮 𝐰𝐢𝐥𝐥 𝐬𝐭𝐫𝐮𝐠𝐠𝐥𝐞 𝐢𝐧 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭 𝐢𝐧𝐭𝐞𝐫𝐯𝐢𝐞𝐰𝐬. Today’s question 👇 🔹 What will this code print? console.log("start"); setTimeout(() => { console.log("timeout"); }, 0); Promise.resolve().then(() => { console.log("promise"); }); console.log("end"); Take a moment. Think carefully. . . . . . 🔹 Correct Output: start end promise timeout 🔥 Why? Because of the Event Loop. JavaScript is: Single-threaded But asynchronous Let’s break it down 👇 ✅ Step 1: Synchronous code runs first console.log("start"); console.log("end"); So we get: start end ✅ Step 2: Microtasks run next Promises go into the Microtask Queue. Microtasks always execute before macrotasks. So: promise ✅ Step 3: Macrotasks run last setTimeout goes into the Macrotask Queue. Even with 0ms, it waits until: Call stack is empty Microtask queue is empty So finally: timeout 🧠 What Interviewers Are Testing They want to see if you understand: -Call Stack -Microtask Queue -Macrotask Queue -Execution order -How async actually works Not just that “setTimeout is async”. 🎯 Interview Tip If asked about the Event Loop: Don’t say: JavaScript runs async code later. Say: 𝐓𝐡𝐞 𝐞𝐯𝐞𝐧𝐭 𝐥𝐨𝐨𝐩 𝐜𝐨𝐧𝐭𝐢𝐧𝐮𝐨𝐮𝐬𝐥𝐲 𝐜𝐡𝐞𝐜𝐤𝐬 𝐭𝐡𝐞 𝐜𝐚𝐥𝐥 𝐬𝐭𝐚𝐜𝐤. 𝐖𝐡𝐞𝐧 𝐭𝐡𝐞 𝐬𝐭𝐚𝐜𝐤 𝐢𝐬 𝐞𝐦𝐩𝐭𝐲, 𝐢𝐭 𝐩𝐫𝐨𝐜𝐞𝐬𝐬𝐞𝐬 𝐭𝐡𝐞 𝐦𝐢𝐜𝐫𝐨𝐭𝐚𝐬𝐤 𝐪𝐮𝐞𝐮𝐞 𝐛𝐞𝐟𝐨𝐫𝐞 𝐦𝐨𝐯𝐢𝐧𝐠 𝐭𝐨 𝐭𝐡𝐞 𝐦𝐚𝐜𝐫𝐨𝐭𝐚𝐬𝐤 𝐪𝐮𝐞𝐮𝐞. 𝐓𝐡𝐚𝐭 𝐬𝐨𝐮𝐧𝐝𝐬 𝐬𝐭𝐫𝐨𝐧𝐠. Tomorrow: We’ll break down Microtask vs Macrotask properly with tricky examples. Follow for Day 6 🚀 #javascript #frontend #webdevelopment #interviewprep #reactjs #coding #eventloop

⏳ React Interview in 48–72 Hours? Stay Focused. Not Frantic. When time is limited, your goal isn’t to learn every advanced pattern - it’s to demonstrate strong fundamentals, clear thinking, and practical experience. This is not the moment to experiment with new state libraries or rebuild your entire app architecture. Avoid: ❌ Switching to a new framework or meta-framework ❌ Deep-diving into rare edge-case optimizations ❌ Memorizing obscure hook patterns ❌ Jumping between too many tutorials Instead, double down on the React concepts interviewers consistently evaluate. ✅ 6 High-Impact React Areas to Prioritize 1️⃣ Core Fundamentals JSX, components, props, composition Functional vs class components (know the difference) 2️⃣ State & Lifecycle useState, useEffect Re-render cycle Dependency arrays & cleanup functions 3️⃣ Component Communication Props drilling Lifting state up Controlled vs uncontrolled components 4️⃣ Performance Basics React.memo useMemo vs useCallback Key prop in lists Avoiding unnecessary re-renders 5️⃣ Hooks Deep Understanding Rules of Hooks Custom hooks When not to use useEffect 6️⃣ Real-World Patterns Conditional rendering Forms handling API calls & async data fetching Error handling Clear reasoning > copy-paste solutions. Understanding re-renders > memorizing syntax. If you can explain how React updates the UI and why your design decisions make sense - you’ll stand out. Focus on fundamentals. Communicate confidently. Build structured answers. #ReactJS #FrontendDevelopment #JavaScript #CodingInterview #WebDevelopment #InterviewPreparation #CareerGrowth

🚀 One of the most common React interview questions — and most developers answer it wrong. “What’s the difference between useMemo and useCallback?” The most common wrong answer: ❌ “They both prevent re-renders.” Here’s the precise answer: 👉 useMemo caches a computed value 👉 useCallback caches a function reference // useMemo — cache the result of an expensive calculation const sortedList = useMemo(() => { return items.sort((a, b) => a.price - b.price); }, [items]); // useCallback — cache the function itself const handleClick = useCallback(() => { doSomething(id); }, [id]); When to use useMemo: → Expensive calculations (e.g., filtering or sorting large arrays) → Creating objects/arrays passed as props to memoized children When to use useCallback: → Functions passed as props to memoized child components → Functions used in useEffect dependency arrays ⚡ The golden rule: Don’t use either by default. Profile first. Premature memoization adds complexity without real benefit — React is already fast. ✅ Only optimize when you can measure the problem. Curious — what’s the trickiest React hook question you’ve been asked in an interview? 👇 #ReactHooks #JavaScript #FrontendInterview #ReactJS #WebDev