Creating Custom Hooks in React: Reusable Logic

🚀 30 Advanced Frontend Interview Questions Every Developer Should Know (2026 Edition) If you're preparing for Frontend / MERN Stack interviews, these advanced-level questions can help you test your real understanding of modern web development. Whether you're a fresher, job seeker, or experienced developer, mastering these topics will make you stand out during technical interviews. Here are 30 Advanced Frontend Interview Questions 👇 1️⃣ What is the difference between Virtual DOM and Real DOM, and how does it improve performance? 2️⃣ Explain Reconciliation in React. How does the diffing algorithm work? 3️⃣ What are React Fiber and Concurrent Rendering? 4️⃣ What is Hydration in React and why is it important for SSR? 5️⃣ Difference between Server-Side Rendering (SSR), Static Site Generation (SSG), and CSR. 6️⃣ What are Higher Order Components (HOC) and when should they be used? 7️⃣ Explain React Hooks rules and why they exist. 8️⃣ What is the difference between useMemo, useCallback, and React.memo? 9️⃣ How does Code Splitting improve performance in large applications? 🔟 What are Web Workers and when should they be used? 11️⃣ Explain Event Delegation in JavaScript with a real example. 12️⃣ What is Debouncing vs Throttling and when should each be used? 13️⃣ How does JavaScript Event Loop work in the browser? 14️⃣ What is the difference between Microtasks and Macrotasks? 15️⃣ Explain Closures and their practical use in frontend applications. 16️⃣ What are Critical Rendering Path and Render Blocking Resources? 17️⃣ How can you optimize website performance for large applications? 18️⃣ What is Tree Shaking in JavaScript bundlers? 19️⃣ What is the difference between Shadow DOM and Virtual DOM? 20️⃣ What are Progressive Web Apps (PWA) and their benefits? 21️⃣ How does Lazy Loading of images/components work? 22️⃣ What is Content Security Policy (CSP) in frontend security? 23️⃣ Explain Cross-Origin Resource Sharing (CORS). 24️⃣ What is the difference between Authentication and Authorization in frontend apps? 25️⃣ What are Service Workers and how do they enable offline apps? 26️⃣ Explain state management patterns in large React apps. 27️⃣ What is the difference between Redux, Context API, and Zustand? 28️⃣ What are design patterns commonly used in frontend architecture? 29️⃣ How do you handle memory leaks in React applications? 30️⃣ What are Web Vitals (LCP, CLS, INP) and how do they impact performance? 🔥 Follow for more Frontend, MERN, and Developer Interview content. #frontenddeveloper #frontenddevelopment #mernstack #reactjs #javascript #webdevelopment #codinginterview #softwaredeveloper #developercommunity #techcareer #programming #learncoding #webdev #developerlife #softwareengineering #reactdeveloper #javascriptdeveloper #mernstackdeveloper #techjobs #fresherjobs #hiringdevelopers #jobseekers #codingquestions #interviewpreparation #csstudents #codinglife #100daysofcode

⚛️ Top 150 React Interview Questions – 75/150 📌 Topic: Hooks inside Loops / Conditions? ━━━━━━━━━━━━━━━━━━━━━━ 🔹 WHAT is it? React has a strict rule: ❌ Do not call Hooks inside loops, conditions, or nested functions. Hooks must always be called at the top level of your React function. ━━━━━━━━━━━━━━━━━━━━━━ 🔹 WHY does this rule exist? 🔢 Preserving Order React links state to hooks based on the order they are called. ⚠️ State Corruption If a Hook is skipped (inside a condition) or repeated (inside a loop), the order breaks and React assigns wrong state to wrong Hooks. ━━━━━━━━━━━━━━━━━━━━━━ 🔹 HOW do you handle logic correctly? ❌ WRONG — Hook inside logic if (user) { useEffect(() => { // never do this }); } ✅ RIGHT — Logic inside Hook useEffect(() => { if (user) { // logic goes here } }, [user]); 👉 Hooks first, logic later. ━━━━━━━━━━━━━━━━━━━━━━ 🔹 WHERE / Best Practices ✔ Top-Level Only Always declare all Hooks at the start of the component ✔ Handle Early Returns Carefully If you have: if (!data) return null; make sure all Hooks are declared above it ━━━━━━━━━━━━━━━━━━━━━━ 📝 SUMMARY (Easy to Remember) React Hooks are like numbered lockers 🔐 React doesn’t know locker names — it only knows Locker #1, #2, #3. If you skip Locker #2, React puts the stuff meant for #2 into #3, and everything gets mixed up. ━━━━━━━━━━━━━━━━━━━━━━ 👇 Comment “React” if this handbook is helping you 🔁 Share with someone preparing for React interviews #ReactJS #ReactInterview #ReactHooks #RulesOfHooks #JavaScript #Top150ReactQuestions #LearningInPublic #Developers ━━━━━━━━━━━━━━━━━━━━━━

⚛️ Top 150 React Interview Questions – 100/150 🚀 📌 Topic: Optimizing Bundle Size ━━━━━━━━━━━━━━━━━━━━━━ 🔹 WHAT is it? Optimizing bundle size means reducing the amount of JavaScript sent to the browser. Smaller bundles = Faster loading = Better performance. ━━━━━━━━━━━━━━━━━━━━━━ 🔹 WHY optimize bundle size? ⚡ Faster Loading Smaller files download quicker → faster Time to Interactive 📱 Better User Experience Prevents lag on low-end devices and slow 3G/4G networks 📈 SEO Advantage Search engines rank fast websites higher ━━━━━━━━━━━━━━━━━━━━━━ 🔹 HOW do you optimize it? 1️⃣ Code Splitting (Lazy Loading) const HeavyChart = React.lazy(() => import("./HeavyChart")); Loads heavy components only when needed. 2️⃣ Tree Shaking (Import Only What You Need) import { format } from "date-fns"; // NOT: import datefns from "date-fns" Removes unused code automatically during build. 3️⃣ Analyze Dependencies Use tools like: npx webpack-bundle-analyzer Find and remove heavy or unnecessary libraries. 4️⃣ Production Build Always run: npm run build Triggers minification and optimization automatically. ━━━━━━━━━━━━━━━━━━━━━━ 🔹 WHERE should you focus most? 📦 Large Libraries Be careful with lodash, moment.js, Material UI, etc. 🎯 Landing Pages First impression speed matters most here. 🏗️ Production Deployments Never deploy without optimized build. ━━━━━━━━━━━━━━━━━━━━━━ 📝 SUMMARY (Easy to Remember) Think of packing for a trip 🧳 If you pack your entire wardrobe, your suitcase becomes heavy and slow. Optimizing bundle size means packing light — taking only the code you truly need. ━━━━━━━━━━━━━━━━━━━━━━ 👇 Comment “React” if this handbook is helping you 🔁 Share with someone preparing for React interviews #ReactJS #ReactInterview #BundleOptimization #WebPerformance #JavaScript #Top150ReactQuestions #LearningInPublic #Developers ━━━━━━━━━━━━━━━━━━━━━━

🚀 Frontend Interview Questions & Answers (Angular / React / Vue Focus) Preparing for senior frontend interviews? Here are some commonly asked conceptual + architecture-level questions with crisp answers: 1️⃣ Virtual DOM – What & Why? Answer: Virtual DOM is a lightweight JavaScript representation of the real DOM. Frameworks like React and Vue compare the previous and current Virtual DOM (diffing) and update only the changed nodes in the real DOM (reconciliation). 👉 Improves performance by minimizing direct DOM manipulation (which is expensive). 👉 Enables declarative UI updates. Angular doesn’t use Virtual DOM; it uses change detection with zone-based tracking. 2️⃣ Cookie vs LocalStorage vs SessionStorage FeatureCookieLocalStorageSessionStorageSize~4KB~5-10MB~5-10MBExpiryCan set expiryNo expiryCleared on tab closeSent to serverYes (every request)NoNoUse caseAuth tokens (HTTP-only)Persist theme, preferencesTemporary session data 👉 For secure auth → Use HTTP-only cookies. 👉 For UI preferences → LocalStorage. 3️⃣ Multiple Tabs – If I Update in One Tab, Will It Reflect in Another? Depends on storage type: LocalStorage → Yes (via storage event listener). SessionStorage → No (isolated per tab). Redux/Context state → No (memory-based per tab). Real-time sync → Use WebSocket or BroadcastChannel API. 4️⃣ IIFE & Closure IIFE (Immediately Invoked Function Expression) (function() { console.log("Runs immediately"); })(); Used to create private scope. Closure A function remembering its lexical scope even when executed outside. function outer() { let count = 0; return function() { count++; return count; } } Used in: Data privacy Memoization Custom hooks 5️⃣ Error Boundary (React) Error Boundaries catch runtime errors in child components. 👉 Prevents whole app crash 👉 Used at layout-level components Angular uses global error handler service. 6️⃣ Redux Store – Complete Flow Component dispatches action Action → goes to Reducer Reducer returns new immutable state Store updates Subscribed components re-render Flow: Component → dispatch → action → reducer → store → UI update Middleware (like thunk/saga) handles async logic. 7️⃣ Web Components in React Web Components are reusable custom elements (<my-button>). most common Lit.js Custom events handled via addEventListener Useful when: Sharing components across Angular/React/Vue apps Microfrontend architecture 8️⃣ System Design Concepts Used in Frontend As a senior frontend engineer, I’ve applied: ✅ Lazy loading & code splitting ✅ Microfrontend architecture ✅ CDN caching strategy ✅ State normalization ✅ Debouncing & throttling ✅ Rate limiting UI actions ✅ Load balancing awareness ✅ WebSocket for real-time apps #Angular #React #Vue #FrontendDeveloper #WebDevelopment #JavaScript #Redux #SystemDesign #FrontendArchitecture #InterviewPreparation #VirtualDOM #Microfrontend

⚛️ Top 150 React Interview Questions – 74/150 📌 Topic: Rules of Hooks ━━━━━━━━━━━━━━━━━━━━━━ 🔹 WHAT is it? The Rules of Hooks are two strict rules that React enforces to ensure state and effect logic stays consistent between renders. They exist because React relies on the order in which Hooks are called. ━━━━━━━━━━━━━━━━━━━━━━ 🔹 WHY follow the Rules of Hooks? 🔁 Predictability React tracks hooks by call order. If the order changes, React can’t match state correctly. 🐞 Bug Prevention Prevents hard-to-debug issues where state gets mixed up or appears to be “lost” during re-renders. ━━━━━━━━━━━━━━━━━━━━━━ 🔹 HOW do you follow the rules? 📏 Rule 1: Call Hooks at the Top Level Do NOT call hooks inside loops, conditions, or nested functions. 📏 Rule 2: Call Hooks only from React Functions Hooks must be called from: • React function components • Custom Hooks Never from regular JavaScript functions. Example: // ✅ CORRECT function MyComponent() { const [count, setCount] = useState(0); } // ❌ INCORRECT if (condition) { const [count, setCount] = useState(0); } ━━━━━━━━━━━━━━━━━━━━━━ 🔹 WHERE / Best Practices ✔ Use ESLint Plugin eslint-plugin-react-hooks automatically catches rule violations ✔ Handle Early Returns Carefully If needed, place early returns after all Hook calls ━━━━━━━━━━━━━━━━━━━━━━ 📝 SUMMARY (Easy to Remember) The Rules of Hooks are like reserved seats in a theater 🎭 Everyone must sit in the same order every time. If the order changes, the show (your app) turns into chaos. ━━━━━━━━━━━━━━━━━━━━━━ 👇 Comment “React” if this handbook is helping you 🔁 Share with someone preparing for React interviews #ReactJS #ReactInterview #ReactHooks #RulesOfHooks #JavaScript #Top150ReactQuestions #LearningInPublic #Developers ━━━━━━━━━━━━━━━━━━━━━━

🚨 Senior-Level JavaScript Interview Questions That Expose Weak Fundamentals Many developers work with JavaScript daily — but senior interviews don’t test usage, they test depth of understanding. When concepts are shaky, follow-up questions quickly reveal the gaps. Let’s tighten the core areas interviewers probe most 👇 🧠 Closures — Why They Matter Closures let a function retain access to its outer scope even after that scope has finished executing. They power real patterns like encapsulation, memoization, hooks, and async callbacks. If you’ve written handlers or custom hooks, you’ve relied on closures already. ⚙️ Event Loop Priority — Promises vs Timers Execution order is not random. JavaScript processes: Call Stack → Microtask Queue → Macrotask Queue Promise callbacks run from the microtask queue, which is why they execute before setTimeout — even with zero delay. 🎯 The real rule behind "this" "this" is determined by invocation pattern, not where the function is defined. Arrow functions don’t bind their own "this"; they inherit it from the outer scope — one reason they’re widely used in component code. 🔥 var / let / const — What seniors mention Interviewers expect more than scope differences. Strong answers include hoisting behavior and the Temporal Dead Zone — especially how "let" and "const" stay uninitialized until declaration. 🚀 Debounce vs Throttle — Performance signals Debounce: trigger after activity stops (search inputs). Throttle: trigger at fixed intervals (scroll/resize). Knowing where to apply each shows practical performance awareness. ⚠️ Loose vs Strict Equality Loose equality performs type coercion and can produce surprising results. Strict equality avoids implicit conversion and leads to safer comparisons. Production code should default to strict checks. 🧩 Shallow vs Deep Copy — Source of hidden bugs Shallow copies keep nested references shared. Deep copies create fully independent structures. Modern environments support structuredClone for safe deep duplication. 💬 Interview reality check Most candidates don’t fail due to missing syntax knowledge. They fail when they cannot clearly explain behavior, trade-offs, and edge cases. 👉 Follow Rahul R Jain for more real interview insights, React fundamentals, and practical frontend engineering content. #JavaScript #JSInterviews #FrontendEngineering #WebDevelopment #AsyncJavaScript #PerformanceOptimization #ReactDevelopers #FullStack #TechInterviews #SeniorDeveloper

Basic Frontend Concepts Even Experienced Developers Forget in Interviews 🤯 After years of working with React, Angular, or Vue… It’s surprising how often interviews focus on: 👉 Basic HTML, CSS, and JavaScript. Here are a few fundamentals even experienced frontend devs sometimes miss: 🟠 HTML • Difference between div and semantic tags (section, article, nav) • What actually happens when you use type="button" vs default button • How the browser handles form submission • Inline vs block elements Frameworks abstract this — interviews don’t. 🔵 CSS • Specificity rules (why your style isn’t applying) • position: relative vs absolute vs fixed • How Flexbox calculates space • What triggers reflow vs repaint • Difference between em, rem, %, vh, vw CSS questions are simple — but tricky. 🟡 JavaScript • Closures • Event loop (microtask vs macrotask) • this keyword behavior • Hoisting • Shallow vs deep copy • Difference between == and === Not React hooks. Not Redux. Not fancy patterns. Just core JavaScript. The uncomfortable truth: In interviews, your fundamentals matter more than your framework. Frameworks change. Browser fundamentals don’t. If you’re preparing for frontend interviews: Revisit HTML. Revisit CSS. Revisit core JS. That’s where real confidence comes from 🚀 #FrontendDevelopment #JavaScript #HTML #CSS #WebDevelopment #InterviewPrep

🚀 Top 30 Frontend Developer Interview Questions (2026 Edition) If you're preparing for a frontend interview, these are the questions that test real understanding — not just syntax. --- 🔹 Core JavaScript 1️⃣ Explain the difference between "var", "let", and "const". 2️⃣ What is closure? Give a real-world use case. 3️⃣ How does the JavaScript event loop work? 4️⃣ Difference between synchronous and asynchronous code. 5️⃣ What are Promises and how do they differ from "async/await"? 6️⃣ Explain prototypal inheritance in JavaScript. 7️⃣ What is debouncing vs throttling? 8️⃣ How does "this" keyword behave in different contexts? 9️⃣ What is event delegation and why is it useful? 🔟 Difference between deep copy and shallow copy. --- 🔹 Browser & Web Fundamentals 1️⃣1️⃣ How does the browser render a webpage? (Critical Rendering Path) 1️⃣2️⃣ What is the DOM and how does it work? 1️⃣3️⃣ Difference between "localStorage", "sessionStorage", and cookies. 1️⃣4️⃣ What causes layout shift and how can you prevent it? 1️⃣5️⃣ Explain CORS and how frontend handles it. 1️⃣6️⃣ What are Web Workers and when should you use them? --- 🔹 HTML & CSS 1️⃣7️⃣ What is semantic HTML and why is it important? 1️⃣8️⃣ Difference between Flexbox and Grid — when to use each? 1️⃣9️⃣ What is CSS specificity and how is it calculated? 2️⃣0️⃣ How do you make a responsive design without frameworks? 2️⃣1️⃣ Explain "position: relative", "absolute", "fixed", and "sticky". 2️⃣2️⃣ What are pseudo-elements vs pseudo-classes? --- 🔹 Framework Knowledge (React / Angular / Vue Concepts) 2️⃣3️⃣ What problem do modern frameworks solve compared to vanilla JS? 2️⃣4️⃣ Explain component-based architecture. 2️⃣5️⃣ What is state management and why is it needed? 2️⃣6️⃣ Difference between controlled and uncontrolled data flow. 2️⃣7️⃣ How does virtual DOM (or change detection) improve performance? --- 🔹 Performance & Optimization 2️⃣8️⃣ How do you optimize frontend performance for large applications? 2️⃣9️⃣ What is lazy loading and code splitting? 3️⃣0️⃣ How do you debug a slow UI in production? --- 💡 These questions are designed to evaluate problem-solving, architecture thinking, and real-world experience — the skills that actually matter in production environments. #FrontendDevelopment #JavaScript #WebPerformance #CodingInterview #UIEngineering #Developers #TechCareers

⚛️ Top 150 React Interview Questions – 116/150 📌 Topic: Tree Shaking ━━━━━━━━━━━━━━━━━━━━━━ 🔹 WHAT is it? Tree Shaking is a term used in JavaScript for dead-code elimination. It relies on the static structure of ES6 module syntax (import / export) to remove unused code during the build process. Only the code that is actually imported and used remains in the final production bundle. ━━━━━━━━━━━━━━━━━━━━━━ 🔹 WHY use it? 📦 Smaller Bundle Size Removes functions or components that are exported but never used ⚡ Performance Faster download time and quicker execution 🧹 Clean Production Build Keeps final .js files lean and optimized ━━━━━━━━━━━━━━━━━━━━━━ 🔹 HOW to do it? ✅ Step 1: Use Named Exports (math.js) export const add = (a, b) => a + b; export const sub = (a, b) => a - b; ✅ Step 2: Import Only What You Need (app.js) import { add } from './math'; console.log(add(10, 5)); 👉 Result: The sub function is removed from the final production bundle. ⚠️ Important: Tree Shaking works only with ES Modules (import/export) not with CommonJS (require/module.exports). ━━━━━━━━━━━━━━━━━━━━━━ 🔹 WHERE to use it? 🛠️ Utility Libraries Import specific functions from libraries like lodash-es or date-fns 🎨 Component Libraries Import individual icons/components from large libraries like lucide-react 🚀 Production Builds Always build with: npm run build Bundlers like Webpack, Rollup, and Vite automatically apply Tree Shaking. ━━━━━━━━━━━━━━━━━━━━━━ 📝 SUMMARY (Easy to Remember) Think of a Live Tree 🌳 When you shake it, the dead leaves (unused code) fall off. Only the strong branches (used code) remain. That is Tree Shaking. ━━━━━━━━━━━━━━━━━━━━━━ 👇 Comment “React” if this series is helping you 🔁 Share with someone preparing for React interviews #ReactJS #TreeShaking #WebPerformance #FrontendDevelopment #BundleOptimization #Top150ReactQuestions #LearningInPublic #Developers ━━━━━━━━━━━━━━━━━━━━━━

🚀 Frontend / React Interview Experience - ResilienceSoft Date: 20 Jan 2026 Recently, I interviewed at ResilienceSoft, and these were some of the key questions discussed. hoping it helps other developers preparing for React & JavaScript interviews. ⚛️ React & Frontend Fundamentals 1. When did you get stuck while using React, and how did you fix it? 2. Why React.js? 3. What are state and props? 4. What is a hook? 5. If we have var, let, and const, why do we need state variables? 6. What is re-rendering, and why does it happen? 7. How do you pass parent data to the 5th child component? 8. Problems while passing props deeply 9. What is prop drilling? 10. Difference between Context API and Redux Toolkit 11. Difference between useMemo and React.memo 12. What happens if a component wrapped in memo() has its own state changes? 13. What happens if a child uses memo() and parent props don’t change? 14. Difference between useMemo and useCallback 🎨 HTML & CSS 15. What are semantic tags in HTML? 16. What is a pseudo-class in CSS? 17. How to center an element horizontally 18. Difference between relative and absolute 19. What is Flexbox 🧠 JavaScript Core Concepts 20. What is the event loop? 21. What is the call stack? 22. What is Web API? 23. What is the callback queue 24. What is the microtask queue 25. What is a promise 26. Different states of a promise and when they occur 27. What are async and await 28. What is a callback function 📦 JavaScript Variables & Scope 29. Difference between var, let, const 30. What is scope, block scope, and function scope 31. What is hoisting 32. Why do we get ReferenceError: Cannot access 'x' before initialization 33. What is the Temporal Dead Zone (TDZ) 34. Difference between map, filter, forEach 35. Difference between undefined and not defined Coding Questions 1. users = [{ id: 1, active: true }, { id: 2, active: false }] Given an array of users, find all active user ids 2. users = [{ id: 1, active: true }, null, {}, { id: 2, active: false }] Given an array of users, find all active user ids #interview #resiliencesoft #webdev #react