React JS Interview Coding Questions for Mid-Senior Developers

I’ve been going through similar ReactJS interview rounds recently, and this list is very accurate. What I’ve realized is: 👉 Most people can build features 👉 But interviews focus more on scalability, edge cases, and “why this approach” Especially follow-up questions like: - re-render optimization - state structure - API handling at scale These are what actually decide selection. Worth revising if you're preparing for SDE II frontend roles 🚀

🚀 React Interview Question: How to create and use Custom Hooks in React? 💡 A Custom Hook in React is a reusable function that lets you extract and share logic across components. Instead of duplicating logic (like API calls, form handling, or event listeners), you can move it into a custom hook and reuse it anywhere. 🔹 Why use Custom Hooks? - reusability - cleaner components - better separation of concerns - easier testing & maintenance 🔹 How to create a Custom Hook? - create a function starting with use import { useState, useEffect } from "react"; function useFetch(url) { const [data, setData] = useState(null); useEffect(() => { fetch(url) .then(res => res.json()) .then(data => setData(data)); }, [url]); return data; } 🔹 How to use it in a component? function Users() { const data = useFetch("https://lnkd.in/gxkxVfEt"); return ( <div> {data ? data.map(user => <p key={user.id}>{user.name}</p>) : "Loading..."} </div> ); } 🔹 Key Rules - always start with use - can use other hooks inside (useState, useEffect, etc.) - must follow React Hook rules Follow Tarun Kumar for more tech content and interview prep #ReactJS #CustomHooks #FrontendDevelopment #JavaScript #WebDevelopment #CodingInterview #SoftwareEngineering #TechContent #Developers

🚀 Interview Experience – Frontend (React/JavaScript) | Persistent Systems Recently had an interesting interview experience with Persistent Systems and wanted to share some of the questions/topics that were discussed. It was a great mix of practical coding, core JavaScript concepts, and frontend fundamentals. 🔹 Coding / Problem-Solving 1. A parent div with 3 child divs. You need to place first at bottom-left and second at bottom-middle and third one at bottom-right. 🔹 JS output-based questions: 🌞 (function () { try { throw new Error(); } catch (x) { var x = 1, y = 2; console.log(x); } console.log(x); console.log(y); })(); 🌞 console.log(0 || 1); //1 console.log(1 || 2); //1 console.log(0 && 1); //0 console.log(1 && 2); // 2 🌞 (function(){ var a = b = 3; })(); console.log(a); console.log(b); 🌞 Create a React component that allows a user to select a file and simulate an upload process. When the user clicks the upload button, display a progress bar that gradually fills from 0% to 100% and show the upload percentage. The progress bar should update dynamically using React state. 🔹 Core JavaScript Concepts 1. Currying (currying vs normal functions) 2. call, apply, bind – when to use 3. Event loop 4. Promises: Promise.all, Promise.allSettled, Promise.race 5. Debouncing vs Throttling 6. Sync vs Deferred execution 7. Object & Array Destructuring 8. Difference between for...of and for...in . 🔹 React Topics 1. Hooks 2. useState – async or sync? How it works internally 3. Error Boundaries 4. Redux / Redux Toolkit flow 🔹 HTML & CSS Fundamentals 1. Box Model 2. CSS Specificity 3. Pseudo-classes and Pseudo-elements 4. Accessibility. Responsive Design techniques 🔹 Testing - Writing test cases (basic understanding expected) 💡 Overall, the interview focused more on fundamentals + real-world implementation rather than just theory. Would love to hear if you've come across similar questions or patterns! 👇 #PersistentSystems #Frontend #JavaScript #ReactJS #WebDevelopment #InterviewExperience #CodingInterview #Learning #CareerGrowth

Day 25/30 — Next.js Interview Prep "How do you optimize performance in a Next.js app?" (This question separates mid-level from senior developers) Most devs build Next.js apps that work. But interviewers want to know — can you make them fast? Here are 5 performance optimization techniques you must know: 1️⃣ Use the <Image> Component Never use a raw <img> tag in Next.js. The built-in Image component gives you lazy loading, WebP format, and automatic resizing — out of the box. 2️⃣ Code Splitting with dynamic() Don't load what the user doesn't need yet. Use dynamic() to import heavy components only when they're needed. → Smaller bundle = faster load time. 3️⃣ Choose the Right Data Fetching Strategy getStaticProps → for content that rarely changes getServerSideProps → for real-time data ISR (revalidate) → best of both worlds Most candidates get this wrong in interviews. Know when to use each. 4️⃣ Optimize Fonts & Scripts Use next/font to eliminate layout shift. Use next/script to control when third-party scripts load. These two alone can boost your Lighthouse score significantly. 5️⃣ Caching with revalidate Set a revalidation time on static pages so your app serves cached content fast — and refreshes in the background silently. Performance optimization = the skill that gets you hired at top companies. 💬 Which of these did you already know? Drop a number (1–5) in the comments! Follow me for Day 26 tomorrow — we're diving into MERN stack system design questions. 🔥 #NextJS #WebDevelopment #InterviewPrep #JavaScript #100DaysOfCode #LinkedInTech #MERNStack #SoftwareEngineering #FrontendDevelopment #TechTwitter

Recently, I interviewed for multiple Senior React.js & Tech Lead roles — and noticed a pattern. Most interviewers asked basic but frequently repeated questions that test your clarity of concepts + coding approach. Here are the Top 10 common questions I was asked 👇 1️⃣ Call, Apply, Bind → Difference + Polyfill implementation 2️⃣ Flatten an Array without Array.flat() 👉 Input: [1,2,3,[4,5,6,[7,8,[10,11]]],9] 👉 Output: [1,2,3,4,5,6,7,8,10,11,9] 3️⃣ Inline 5 divs in a row without flex/margin/padding (Hint: display: inline-block) 4️⃣ Find sum of numbers without a for loop (Hint: reduce() / recursion) 5️⃣ Deep Copy vs Shallow Copy — behavior & how to achieve it 6️⃣ Promise & Async/Await output puzzle 7️⃣ Find first repeating character (e.g., "success" → "c") 8️⃣ Stopwatch Implementation (Start, Stop, Reset + live timer) 9️⃣ Build a To-Do List (Vanilla JS/React) → optimize re-renders 🔟 Currying for Infinite Sum 👉 sum(10)(20)(30)() → 60 👉 sum(10)(20)(30)(40)(50)(60)() → 210 𝐠𝐞𝐭 𝐞𝐛𝐨𝐨𝐤 𝐰𝐢𝐭𝐡 (detailed 232 ques = 90+ frequently asked Javascript interview questions and answers, 70+ Reactjs Frequent Ques & Answers, 50+ Output based ques & ans, 23+ Coding Questions & ans, 2 Machine coding ques & ans) 𝐄𝐛𝐨𝐨𝐤 𝐋𝐢𝐧𝐤: https://lnkd.in/gJMmH-PF Follow on Instagram : https://lnkd.in/gXTrcaKP #javascript #javascriptdeveloper #reactjs #reactnative #vuejsdeveloper #angular #angulardeveloper

Recently, I interviewed for multiple Senior React.js & Tech Lead roles — and noticed a pattern. Most interviewers asked basic but frequently repeated questions that test your clarity of concepts + coding approach. Here are the Top 10 common questions I was asked 👇 1️⃣ Call, Apply, Bind → Difference + Polyfill implementation 2️⃣ Flatten an Array without Array.flat() 👉 Input: [1,2,3,[4,5,6,[7,8,[10,11]]],9] 👉 Output: [1,2,3,4,5,6,7,8,10,11,9] 3️⃣ Inline 5 divs in a row without flex/margin/padding (Hint: display: inline-block) 4️⃣ Find sum of numbers without a for loop (Hint: reduce() / recursion) 5️⃣ Deep Copy vs Shallow Copy — behavior & how to achieve it 6️⃣ Promise & Async/Await output puzzle 7️⃣ Find first repeating character (e.g., "success" → "c") 8️⃣ Stopwatch Implementation (Start, Stop, Reset + live timer) 9️⃣ Build a To-Do List (Vanilla JS/React) → optimize re-renders 🔟 Currying for Infinite Sum 👉 sum(10)(20)(30)() → 60 👉 sum(10)(20)(30)(40)(50)(60)() → 210 𝐠𝐞𝐭 𝐞𝐛𝐨𝐨𝐤 𝐰𝐢𝐭𝐡 (detailed 232 ques = 90+ frequently asked Javascript interview questions and answers, 70+ Reactjs Frequent Ques & Answers, 50+ Output based ques & ans, 23+ Coding Questions & ans, 2 Machine coding ques & ans) 𝐄𝐛𝐨𝐨𝐤 𝐋𝐢𝐧𝐤: https://lnkd.in/gJMmH-PF Follow on Instagram : https://lnkd.in/gXTrcaKP #javascript #javascriptdeveloper #reactjs #reactnative #vuejsdeveloper #angular #angulardeveloper

🚀 React JS Interview Questions You Should Prepare in 2026 If you're preparing for a frontend role, especially in React, these are the questions you’ll most likely face 👇 🧠 Core React Concepts ✔ What is Virtual DOM and how does it work? ✔ Difference between state and props? ✔ What are hooks and why are they used? ✔ Explain component lifecycle ⚛️ Hooks (Very Important) ✔ What is useState and useEffect? ✔ When does useEffect run? ✔ What are custom hooks? ✔ Difference between useMemo and useCallback 🔄 State Management ✔ When to use Context API vs Redux? ✔ How does Redux work internally? 🌐 API & Async Handling ✔ How do you fetch data in React? ✔ How do you handle loading & error states? ⚡ Performance Optimization ✔ What is lazy loading? ✔ What is memoization in React? ✔ How to avoid unnecessary re-renders? 🧪 Testing ✔ How do you test React components? ✔ Have you used Jest? 🚀 Advanced (Stand Out Questions) ✔ What are Server Components in Next.js? ✔ Difference between CSR, SSR, and SSG? ✔ How does reconciliation work? 💡 Real Interview Tip: Don’t just answer theory. 👉 Always explain with a real project example 🔥 Pro Tip: If you can confidently answer these, you're already ahead of 70% of candidates. 💬 What’s the toughest React question you’ve faced in an interview? #ReactJs #FrontendDevelopment #WebDevelopment #JavaScript #TechInterviews #SoftwareEngineering #Developers #CareerGrowth #NextJS #CodingInterview

React.js Interview Questions ? Today’s focus Custom Hooks in React — a very popular FAANG interview topic to test code reusability & clean architecture. Problem Statement Create a reusable logic to handle API fetching (loading, error, data). Custom Hook + Clean Code Solution import { useState, useEffect } from "react"; // Custom Hook function useFetch(url) { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const fetchData = async () => { try { setLoading(true); const response = await fetch(url); const result = await response.json(); setData(result); } catch (err) { setError("Something went wrong"); } finally { setLoading(false); } }; fetchData(); }, [url]); return { data, loading, error }; } // Component Usage function App() { const { data, loading, error } = useFetch( "https://lnkd.in/eb7DsqQu" ); if (loading) return <p>Loading...</p>; if (error) return <p>{error}</p>; return ( <ul> {data.map((user) => ( <li key={user.id}>{user.name}</li> ))} </ul> ); } export default App; Interview Concepts Covered: - Custom Hooks (Code Reusability) - Separation of Concerns - API Handling (Loading, Error, Data) - Clean & Scalable Architecture Interview Questions: - What are Custom Hooks? Why do we use them? - Difference between Custom Hook vs Utility Function? - Can we use hooks inside loops/conditions? (No) - How to make this hook more reusable (pagination, caching)? Key Takeaway: Top companies expect you to write clean, reusable, and scalable code, not just working solutions. #ReactJS #FrontendInterview #CustomHooks #WebDevelopment #JavaScript #100DaysOfCode

❌ Most developers fail frontend interviews for one reason. It’s not React. It’s not Angular. It’s not Vue. It’s JavaScript. In interviews, no one cares if you can build components quickly. They care if you understand what’s happening underneath. Can you explain closures? Do you really understand async/await? What happens with “this” in different contexts? Framework knowledge might get you shortlisted. JavaScript knowledge gets you selected. Frameworks are just abstractions. Interviews are designed to test fundamentals. If your JavaScript is strong: You can reason through problems You can write logic without relying on libraries You can adapt to any stack If it’s weak: You get stuck on basic questions You depend on memorized patterns You struggle to explain your own code Reality: Companies hire problem solvers, not framework users. So before jumping to another framework, ask yourself — 👉 Can you confidently explain JavaScript fundamentals? Don't forget to like this post and follow for more🙃 #javascript #frontenddeveloper #interviewpreparation #webdevelopment #reactjs #angular #vuejs

💡 **Daily React/JavaScript Interview Tip**Promises aren’t just about `.then()`—they’re about **handling multiple async operations efficiently**.👉 Weak answer:“Promise.all runs multiple promises.”✅ Stronger answer:“I use different Promise methods depending on the scenario—like `Promise.all` for parallel execution when all must succeed, and `Promise.allSettled` when I need results regardless of failures.”⚡ Quick breakdown:* `Promise.all` → fails fast if one promise rejects* `Promise.allSettled` → waits for all, returns success + failure results* `Promise.resolve` → wraps a value into a resolved promise* `Promise.reject` → creates an immediately rejected promise🧠 Example:```js id="1j9k2x"const p1 = Promise.resolve(1);const p2 = Promise.reject('Error');const p3 = Promise.resolve(3);Promise.allSettled([p1, p2, p3]).then(console.log);```👉 Output:[{ status: 'fulfilled', value: 1 },{ status: 'rejected', reason: 'Error' },{ status: 'fulfilled', value: 3 }]📌 Tip: Don’t just explain what each method does—explain **when and why you’d use it in real-world scenarios**.#JavaScript #Promises #AsyncJavaScript #WebDevelopment #TechInterviews