React Interview Question: State and Ref Behavior

🚨 React Interview Question That Confuses 90% Developers Let’s test your React fundamentals 👇 import { useState } from "react"; export default function App() { const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); setCount(count + 2); setCount(count + 3); console.log(count); } return ( <> <h1>{count}</h1> <button onClick={handleClick}>Click</button> </> ); } 👉 What will be the output? 1️⃣ Console output? 2️⃣ Final UI value? ⚡ Bonus: Why doesn’t it become 3 (or even 6)? 👇 Think before reading the answer 👇 — — — — — — — — — — — — ✅ Answer Console → 0 UI → 3 🧠 Why? React batches state updates and treats them as async. All setCount calls use the same stale value (count = 0). So internally: 0 + 1 = 1 0 + 2 = 2 0 + 3 = 3 ✅ (last update wins) 🔥 Correct way (if you want cumulative updates): setCount(prev => prev + 1); setCount(prev => prev + 1); setCount(prev => prev + 1); 👉 Now React updates sequentially → Final = 3 💬 Takeaway: • State updates are async • React batches updates • Avoid stale values • Use functional updates when chaining Did you get it right? 👀 #ReactJS #FrontendInterview #JavaScript #ReactHooks #FrontendDeveloper

🚨 React Interview Question What will be the output? 👇 import { useState } from "react"; export default function App() { const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); setCount(count + 2); setCount(count + 3); console.log(count); } return ( <> <h1>{count}</h1> <button onClick={handleClick}>Click</button> </> ); } 👉 What will be: 1. Console output? 2. Final UI value? ⚡ Bonus: Why doesn’t it become 3? Drop your answers before checking comments 👀 #ReactJS #FrontendInterview #JavaScript #ReactHooks #FrontendDeveloper #ProductBasedCompany

🚀 React Interview Question: What is Lazy Loading in React? 💡 Lazy loading is a technique where components are loaded only when they are needed, instead of loading everything upfront. This helps improve performance and reduces initial load time. 🔹 How it works: Instead of importing components normally: import Dashboard from "./Dashboard"; You load them dynamically: const Dashboard = React.lazy(() => import("./Dashboard")); And wrap with Suspense: <Suspense fallback={Loading...}> 🔹 Why use Lazy Loading - faster initial page load - reduces bundle size - improves user experience 🔹 Real-world use case: Imagine a large app with multiple pages (Dashboard, Profile, Settings). Users don’t need all pages at once. - load only what the user visits. 🔹 Key Insight: - don’t load everything upfront. - load only when required. Connect/Follow Tarun Kumar for more tech content and interview prep 🚀 #ReactJS #Frontend #WebDevelopment #Performance #JavaScript #CodingInterview

𝐓𝐫𝐢𝐜𝐤𝐲 𝐑𝐞𝐚𝐜𝐭 𝐂𝐥𝐨𝐬𝐮𝐫𝐞 𝐈𝐧𝐭𝐞𝐫𝐯𝐢𝐞𝐰 𝐐𝐮𝐞𝐬𝐭𝐢𝐨𝐧 🤔 Many developers understand closures in JavaScript… but get confused when it comes to React. Question: What will be the output of this code? Example 👇 import React, { useState } from "react"; export default function App() { const [count, setCount] = useState(0); const handleClick = () => { setTimeout(() => { console.log(count); }, 1000); }; return ( <> Click </> ); } Now imagine: You click the button 3 times quickly and count updates each time What will be logged after 1 second? Answer 👇 It will log the SAME value multiple times ❌ Why? Because of closure. The setTimeout callback captures the value of count at the time handleClick was created. This is called a “stale closure”. Correct approach ✅ setTimeout(() => { setCount(prev => { console.log(prev); return prev; }); }, 1000); Or use useRef for latest value. Tip for Interview ⚠️ Closures + async code can lead to stale state bugs in React. Good developers know closures. Great developers know how closures behave in React. #ReactJS #JavaScript #Closures #FrontendDeveloper #WebDevelopment #ReactInterview #CodingInterview #ReactHooks

𝐑𝐞𝐚𝐜𝐭 𝐇𝐨𝐨𝐤𝐬 𝐈𝐧𝐭𝐞𝐫𝐯𝐢𝐞𝐰 𝐐𝐮𝐞𝐬𝐭𝐢𝐨𝐧 🤔 Many developers use useState and useRef… but don’t know the real difference. Question: What is the difference between useState and useRef? And which one causes re-render? Example 👇 import React, { useState, useRef } from "react"; export default function App() { const [count, setCount] = useState(0); const refCount = useRef(0); console.log("Render"); return ( <> <button onClick={() => setCount(count + 1)}> useState + <button onClick={() => { refCount.current += 1; console.log(refCount.current); }}> useRef + </button> </> ); } What happens here? Click useState button → Component re-renders Click useRef button → Component does NOT re-render Why? useState → updates state and re-renders component useRef → updates value without re-render Tip for Interview: useRef is used for storing mutable values without causing re-render. Good developers know hooks. Great developers know when to use them. #ReactJS #ReactHooks #useState #useRef #FrontendDeveloper #JavaScript #ReactInterview #CodingInterview #WebDevelopment

💡 Daily React/JavaScript Interview Tip State management questions aren’t about tools—they’re about decision-making. 👉 Weak answer: “I use Redux or Zustand for state management.” ✅ Stronger answer: “I start with React hooks like useState and useContext for local and simple global state. When the app grows and state becomes complex or shared across many components, I consider tools like Redux for strict structure and debugging, or Zustand for a lighter, simpler setup.” 🧠 What interviewers want to hear: You don’t over-engineer early You understand trade-offs between simplicity vs scalability You choose tools based on app size, complexity, and team needs ⚖️ Quick comparison: Hooks → simple, built-in, great for small to medium apps Redux → structured, predictable, ideal for large-scale apps Zustand → minimal boilerplate, fast, flexible alternative 📌 Tip: Always explain why you chose a state solution, not just what you used. #ReactJS #JavaScript #StateManagement #Redux #Zustand #FrontendDevelopment

 𝗘𝘀𝘀𝗲𝗻𝘁𝗶𝗮𝗹 𝗥𝗲𝗮𝗰𝘁𝗝𝗦 𝗖𝗼𝗻𝗰𝗲𝗽𝘁𝘀 𝗳𝗼𝗿 𝗜𝗻𝘁𝗲𝗿𝘃𝗶𝗲𝘄𝘀 React remains a core skill for modern frontend roles. Strong understanding goes beyond memorization—it’s about applying concepts effectively. 𝗞𝗲𝘆 𝗮𝗿𝗲𝗮𝘀 𝘁𝗼 𝗳𝗼𝗰𝘂𝘀 𝗼𝗻:  • How React works  • Component-based architecture  • Virtual DOM & performance  • Real-world application patterns Credit: owner Follow Alpna P. for more related content! 🤔 Having Doubts in technical journey? 🚀 Book 1:1 session with me : https://lnkd.in/gQfXYuQm 🚀 Subscribe and stay up to date: https://lnkd.in/dGE5gxTy 🚀 Get Complete React JS Interview Q&A Here: https://lnkd.in/d5Y2ku23 🚀 Get Complete JavaScript Interview Q&A Here: https://lnkd.in/d8umA-53 #ReactJS #FrontendDevelopment #WebDevelopment #JavaScript #InterviewPrep #SoftwareEngineering

🚀 React Interview Question: What are React Portals? 💡 React Portals allow you to render a component outside the main DOM hierarchy of your app. You can show a component in a different place in the DOM, even if it’s logically inside another component. 🔹Why do we need it? Sometimes UI elements like: - modals - popups - tooltips - dropdowns need to appear above everything else (no CSS overflow or z-index issues). React Portals help render them directly into <body> or another DOM node. 🔹Example: ReactDOM.createPortal( <Toast message="Saved successfully!" />, document.getElementById("notification-root") ); here, the toast message appears at the top of the screen, even if it is triggered from deep inside a component. 🔹Benefits of using React Portals - avoids CSS overflow issues - better control over UI layering - keeps component structure clean 🔹Use case: when you open a modal, it should not be restricted by parent styles — portals solve this perfectly. Connect Tarun Kumar for more tech content and interview prep #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #ReactInterview #Coding

Most developers use keys in React… But don’t understand them 👇 Here’s where things go wrong: Using index as key → Works initially → Breaks when list updates → Fix: Use stable unique IDs Ignoring reordering issues → Wrong UI updates → Fix: Keys must represent identity, not position Random keys (Math.random) → Forces full re-render every time → Fix: Keep keys stable across renders Duplicate keys → Unexpected behavior → Fix: Ensure uniqueness Thinking keys are optional → React warns for a reason → Fix: Always provide proper keys Why this matters: React uses keys to: → Track elements → Optimize rendering → Preserve component state Wrong keys = subtle, hard-to-debug issues. This is one of the most asked React interview topics. And one of the most misunderstood. What key strategy do you follow? #ReactJS #Frontend #JavaScript #WebDevelopment #SoftwareEngineering