Why useEffect runs twice in React Strict Mode

🚀 Top 10 React Basic Interview Questions 🔹 1. What is useState? - > used to manage state in functional components const [count, setCount] = useState(0); 🔹 2. What is useEffect? -> handles side effects (API calls, subscriptions) useEffect(() => { console.log("Component Mounted"); }, []); 🔹 3. How to handle forms in React? (Controlled Components) const [input, setInput] = useState(""); <input value={input} onChange={e => setInput(e.target.value)} /> 🔹 4. How to fetch API data? useEffect(() => { fetch("/api") .then(res => res.json()) .then(data => console.log(data)); }, []); 🔹 5. What is conditional rendering? {isLoggedIn ? <Dashboard /> : <Login />} 🔹 6. How to pass data from parent to child? <Child name="Test" /> 🔹 7. How to optimize performance? (React.memo) export default React.memo(Component); 🔹 8. What is useCallback? -> memoizes functions const handleClick = useCallback(() => {}, []); 🔹 9. What is useMemo? -> memoizes values const value = useMemo(() => compute(), []); 🔹 10. How to handle list rendering? items.map(item => <li key={item.id}>{item.name}</li>); ✅ If you are preparing for ReactJs interview, save this for your next interview! 👉 Follow Tarun Kumar for tech content, coding tips, and interview prep 🚀 #ReactJS #FrontendDeveloper #JavaScript #WebDevelopment #CodingInterview #SoftwareEngineer #TechCareers #LearnReact

React Interview Question: What happens when setState is called? 💡 setState is used to update the state of a component but it doesn’t update immediately. 🔹 What actually happens when setState is called: - react schedules the state update (it doesn’t update instantly) - multiple setState calls may be batched for performance - react triggers the reconciliation process (Virtual DOM diffing) - only the changed parts of the UI are updated in the real DOM 🔹Key points to keep in mind: - setState is asynchronous (in most cases) - It may batch multiple updates together - It triggers a re-render of the component - react updates only what’s necessary (efficient DOM updates) 🔹State Update Patterns in React This pattern belongs to class components, not hooks setState({ count: count + 1 }); --> //Invalid in hooks In hooks, use the state setter function setCount(count + 1);  //basic update setCount(prev => prev + 1); // functional update (recommended for safety) In class components: this.setState({ count: this.state.count + 1 }); //direct update this.setState(prev => ({ count: prev.count + 1 })); // functional update (preferred) Connect/Follow Tarun Kumar for more tech content and interview prep #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #InterviewPrep

🚀 React Interview Question: How do you optimize React Context to reduce unnecessary re-renders? 💡 React Context is a common way to share data across components But if it’s not handled carefully, it can lead to extra re-renders, whenever the context value changes, all the components using it re-render. 🔹 1. Split your Context Don’t put everything in one place - keep contexts small and focused for better performance 🔹 2. Memoize the value Context updates are based on reference changes. - use useMemo to keep the value stable 🔹 3. Avoid inline functions New function creates a new reference, which causes a re-render - use useCallback 🔹 4. Use selector pattern Don’t consume the entire context if you only need one value 🔹 5. Keep state local when possible Not everything needs to live in Context 🔹 6. Use React.memo Helps prevent unnecessary child re-renders 🔹 Key Insight: React Context doesn’t check deep changes It only checks if the reference has changed So to optimize: - keep values stable - split contexts smartly - avoid unnecessary updates Connect/Follow Tarun Kumar for more tech content and interview prep #React #FrontendDevelopment #JavaScript #WebDev #SoftwareEngineering #CodingInterview

💡 Frontend Interview Task: Why Your Memoization Doesn’t Work I recently saw a common React interview pattern: Optimize a component using React.memo. Sounds simple but most solutions don’t actually work. 🧪 The Task 🔹 Prevent unnecessary re-renders 🔹 Use React.memo 🔹 Keep props stable ❌ Naive approach const Child = React.memo(({ onClick }) => { console.log("render"); return <button onClick={onClick}>Click</button>; }); function App() { return <Child onClick={() => console.log("click")} />; } Looks correct… but Child still re-renders every time. 🤔 What’s happening? Every render creates a new function: () => console.log("click") From React’s perspective: 👉 props changed → re-render So React.memo does nothing. ✅ Improved approach const onClick = useCallback(() => { console.log("click"); }, []); return <Child onClick={onClick} />; Now the reference is stable → memoization works. 🧠 Key takeaways 🔹 Memoization depends on stable inputs If props change on every render, React.memo can’t help 🔹 Functions and objects are the usual problem Inline values break referential equality 🔹 React.memo is not a performance fix It only works if your data flow is already correct 🚀 Why this matters This is one of those things that looks like an optimization but often adds complexity without improving performance. In many cases, fixing state placement and re-render patterns matters more than adding memoization. Small details like this are often what differentiate mid-level and senior frontend engineers in interviews. #react #frontend #javascript #performance #webdev #softwareengineering #reactjs

** Technical Interview Question ** Today I worked on a common but important interview question: 🔍 Find the first non-repeating element in an array 👉 Example: [4, 5, 1, 2, 0, 4] 👉 Output: 5 💡 My Approach: 1. First, I counted how many times each element appears 2. Then, I traversed the original array to find the first element that appears only once ⚡ Key Insights: Order matters — that’s why iterating over the original array is important Using a frequency map makes the solution efficient Time Complexity: O(n) Space Complexity: O(n) 🎯 Practicing these types of problems really helps in improving logic building and interview confidence, especially for Frontend / MERN Stack roles. Consistency is the key 🔥 #JavaScript #CodingInterview #ProblemSolving #MERNStack #FrontendDeveloper #ReactJS

🚀 𝐌𝐨𝐬𝐭 𝐩𝐞𝐨𝐩𝐥𝐞 𝐟𝐚𝐢𝐥 𝐍𝐨𝐝𝐞.𝐣𝐬 𝐢𝐧𝐭𝐞𝐫𝐯𝐢𝐞𝐰𝐬… 𝐧𝐨𝐭 𝐛𝐞𝐜𝐚𝐮𝐬𝐞 𝐭𝐡𝐞𝐲 𝐜𝐚𝐧’𝐭 𝐜𝐨𝐝𝐞. They fail because they forget the fundamentals. If your basics aren’t strong, even simple questions can feel difficult. So I came across a Node.js revision sheet that covers 120+ important questions in one place — perfect for quick prep before interviews. 🔍 𝐖𝐡𝐚𝐭 𝐢𝐭 𝐜𝐨𝐯𝐞𝐫𝐬: ✅ Event Loop, async behavior & non-blocking I/O ✅ Promises, async/await & real-world flow ✅ Express, routing & middleware ✅ Streams, buffers & core modules ✅ JWT authentication & security basics ✅ Scaling, clustering & system design ⚡ 𝐖𝐡𝐲 𝐢𝐭’𝐬 𝐮𝐬𝐞𝐟𝐮𝐥: ↳ Short, concise, and straight to the point ↳ Perfect for last-minute revision ↳ Covers both concepts + practical understanding 🎯 You don’t need more resources — you need to revise the right ones. 💾 Save this now — you’ll thank yourself before your next interview. 🚀 Follow for more practical dev content & resources. #NodeJS #BackendDevelopment #InterviewPrep #JavaScript #Developers #LearnToCode #TechCareers #DevCommunity #FullStackDeveloper #BackendDeveloper

𝐌𝐨𝐬𝐭 𝐬𝐭𝐮𝐝𝐞𝐧𝐭𝐬 𝐩𝐫𝐞𝐩𝐚𝐫𝐞 𝐑𝐞𝐚𝐜𝐭 𝐛𝐲 𝐰𝐚𝐭𝐜𝐡𝐢𝐧𝐠 𝐭𝐮𝐭𝐨𝐫𝐢𝐚𝐥𝐬. 𝐁𝐮𝐭 𝐢𝐧𝐭𝐞𝐫𝐯𝐢𝐞𝐰𝐬 𝐭𝐞𝐬𝐭 𝐜𝐥𝐚𝐫𝐢𝐭𝐲, 𝐧𝐨𝐭 𝐣𝐮𝐬𝐭 𝐜𝐨𝐝𝐢𝐧𝐠. So I created a practical resource to help you revise faster. 📘 116 Most Asked React Interview Questions (2026 Edition) Covers everything from Hooks to Performance and Architecture the topics that actually show up in interviews. If you're preparing for frontend or React roles, this will save you hours of scattered searching. Download it, revise a few questions daily, and keep it as your quick revision guide. If this helps you, share it with a friend who is preparing for React interviews. #reactjs #frontend #javascript #interview #placement #coding #softwareengineering

I bombed a React interview once. Not because I didn't know the answers — but because I answered the wrong question. 🧵 The interviewer asked: "What's the difference between useCallback and useMemo?" I gave a textbook answer. Correct. Complete. Totally missed the point. The real question was: "Do you know when NOT to use them?" That one experience made me rethink how I prepare. Here's what I now know goes into a truly strong React interview — 7 concepts that actually matter in production: ───────────────────────────── 1. useCallback vs useMemo Not just what they do — but why blindly using them can hurt performance more than help. Memoization has a cost. 2. React reconciliation + the key prop The key prop isn't just for lists. Misusing it causes components to silently remount. Most devs never debug this because they don't know to look for it. 3. Closures and stale state A useEffect that captures an old value of state — and you spend 2 hours wondering why your data is always one step behind. Classic stale closure. Once you see it, you can't unsee it. 4. Shallow copy vs deep copy in state updates {...obj} feels safe. But if your object has nested arrays or objects, you're still mutating shared references. React won't re-render. The UI lies to you. 5. Preventing re-renders in large trees React.memo alone isn't enough. If your callbacks aren't stable and your context isn't split — you're still re-rendering everything. The fix is a combination, not a single tool. 6. Controlled vs uncontrolled components Choosing wrong here leads to either overengineered forms or state that React can't track. Both hurt in different ways. 7. useEffect cleanup with async calls If you don't cancel async operations on unmount, you'll set state on a component that no longer exists. AbortController is underused. Race conditions are underestimated. ───────────────────────────── 3.6 years of React has taught me that the difference between good and great frontend engineers is almost never syntax. It's knowing why something breaks — before it breaks. 💬 What's the trickiest React bug you've ever debugged? Drop it below 👇 #ReactJS #Frontend #JavaScript #WebDevelopment #SoftwareEngineering #ReactDeveloper #TechCommunity

Last week, I was helping a junior dev prepare for interviews… He said, “I know JavaScript… but I freeze in interviews.” 😅 The problem? Most devs use JavaScript daily, but don’t deeply understand the core concepts interviewers love to test. So we simplified it 👇 ⚡ We focused on just a few key things: • Closures → how functions “remember” variables • Hoisting → why variables behave weirdly sometimes • Event Loop → how async code actually runs • Promises & Async/Await → cleaner async handling • This keyword → context confusion killer Instead of memorizing, we broke each into real-life examples. Like explaining closures as “a backpack that carries data forward.” 🎒 The result? Confidence > memorization. Big lesson 💡 You don’t need to know everything. You need to understand the why behind the basics. If you're preparing, I shared a simple breakdown here 👉 webdevlab.org Now I’m curious… Which JavaScript concept confused you the most at first? 🤔 #javascript #webdevelopment #frontend #codinginterview #developers

🚀 React Interview Question : What is the useReducer hook and when should you use it? 💡 useReducer is a React hook that lets you manage state using a centralized function (reducer) that handles all state updates based on actions. 🔹 Basic Syntax const [state, dispatch] = useReducer(reducer, initialState); state → current state dispatch → function to send actions reducer → function that decides how state changes 🔹 How it works const reducer = (state, action) => { switch (action.type) { case "INCREMENT": return { count: state.count + 1 }; case "DECREMENT": return { count: state.count - 1 }; default: return state; } }; dispatch({ type: "INCREMENT" }); 🔹 Why use useReducer? - helps manage complex state logic - keeps state updates organized and predictable - avoids messy multiple useState calls 🔹 When should you use it? - state has multiple related values - logic involves multiple conditions (switch/if) - state updates depend on previous state - for better structure & scalability 🔹 Example Use Cases - form handling with many fields - complex UI state (toggles, filters, steps) - managing state transitions (like loading → success → error) Follow Tarun Kumar for tech content, coding tips, and interview prep #ReactJS #JavaScript #WebDevelopment #FrontendDeveloper #Coding #Programming #Developers #SoftwareEngineer #Tech