Day 3 — useEffect ⚡ Why was useEffect even created? Things were working before it too! 🤔 Simple answer: →without it, your API fired on every render → infinite loops & duplicate requests. Use useEffect when: → Fetch data on mount → Subscribe & cleanup events → DOM manipulation → React to dependency changes What's your biggest useEffect mistake? 👇 #ReactJS #useEffect #JavaScript #30DaysOfReact #LearningInPublic

⚛️ React Concept: useEffect Explained Simply The "useEffect" hook lets you handle side effects in functional components — like API calls, subscriptions, and DOM updates. 🔹 It runs after the component renders 🔹 You can control when it runs using the dependency array Basic syntax: useEffect(() => { // side effect logic return () => { // cleanup logic (optional) }; }, [dependencies]); 📌 Common use cases: • Fetching data from APIs • Adding event listeners • Handling timers 📌 Best Practice: Always define dependencies correctly and use cleanup functions to avoid memory leaks. #reactjs #frontenddevelopment #javascript #webdevelopment #softwareengineering

useEffect is probably the most powerful - and most misused - hook in React. 🎯 Arun explained it really well, sharing this because I've made  these exact mistakes in real projects: → Forgetting the cleanup function - memory leaks in production 😅 → Wrong dependency array - stale data showing up in dashboards → Fetching data inside useEffect - unnecessary re-renders and   race conditions What changed for me: ✅ Always write cleanup for subscriptions and event listeners ✅ Use React Query for data fetching — avoids most useEffect complexity ✅ Think twice before adding objects/arrays as dependencies 2.5 years of React and useEffect still teaches me something new. What's your most common useEffect mistake? Drop it below 👇 #ReactJS #Frontend #JavaScript #WebDevelopment #FrontendDeveloper

⚠️ Part 2 of 10: I think `useEffect` gets overused. A lot. I get why. Something changes. You want something else to update. `useEffect` feels like the move. But a lot of React complexity starts right there. State changes. Effect runs. Another state changes. Now you're tracing logic across multiple places for something that maybe could’ve been calculated directly. Once I started asking: “Is this syncing with something external?” instead of “How do I make this run after render?” my code got a lot easier to follow. That one shift cleaned up a lot for me. What’s your most overused React habit? #React #useEffect #ReactHooks #FrontendDevelopment #JavaScript #TypeScript #CleanCode

⚠️ Common Confusions about Control Flow : Switch case: switch-case executes all cases after a match unless you break. else if : else if chain works top-down — order matters. You can use truthy/falsy values directly in if . 🧠 Mindset Control flow = conditional storytelling. It helps your program make choices and respond differently to different inputs. Write readable branches. Avoid nesting too deep — use early return if needed.  #react #javascript #JS #ABK #code

Why do we need the 𝘂𝘀𝗲𝗠𝗲𝗺𝗼 hook when we can perform heavy calculations inside 𝘂𝘀𝗲𝗦𝘁𝗮𝘁𝗲, which runs only once? The key difference is flexibility and reactivity. 𝘂𝘀𝗲𝗠𝗲𝗺𝗼 can run once or re-run when specific values change. It accepts two arguments: 1. A callback function 2. A dependency array You can pass values in the dependency array, and whenever any of those values change, React re-invokes the callback function. This ensures you always have the latest values inside the callback. Real-world use case: Validating edit form values on initial load and re-validating when certain conditions or inputs change. #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #ReactHooks #PerformanceOptimization #CodingTips

useEffect — The Hook That Confused Me (Until I Got This) useEffect was confusing until I understood one thing: dependencies control everything. The Rule: javascript // Runs ONCE after mount useEffect(() => { fetchData(); }, []); // Runs when userId changes useEffect(() => { fetchUser(userId); }, [userId]); // Runs on EVERY render (avoid!) useEffect(() => { console.log('render'); }); What I Learned the Hard Way: Missing dependencies = stale data Adding everything = infinite loops Cleanup functions matter (especially for subscriptions) My Checklist: What should trigger this effect? Do I need to clean up? Can this cause unnecessary renders? What's your React Hook survival tip? #ReactJS #JavaScript #FrontendDeveloper #WebDev #CodingTi

🚀 💡 JavaScript Tricky Question Explanation const arr = [4, 10, 2, 8]; const result = arr.find(num => num > 5) + arr.findIndex(num => num > 5); console.log(result); 👉 Output: 11 👉 Explanation: * find() returns the first value > 5 → `10` * findIndex() returns its index → `1` * Final result → `10 + 1 = 11` ⚡ Both stop at the **first match** #JavaScript #WebDevelopment #Frontend #CodingInterview #JSConcepts

JavaScript Brain Teaser: The this Trap... Looks simple… but there’s a catch hiding in plain sight const obj = { name: "Deepak", first: function () { console.log("First:", this.name); }, second: () => { console.log("Second:", this.name); } }; obj.first(); obj.second(); Drop your answers in the comments Let’s see who truly understands what’s happening under the hood #JavaScript #CodingChallenge #Frontend #InterviewPrep #WebDevelopment

📌 Part 8 of 10: A lot of React bugs make more sense once you realize state behaves more like a snapshot than a live variable. That idea sounds small. But once it clicks, a lot of confusing behavior starts making more sense. Why logs can feel misleading. Why updates don’t look immediate. Why handlers sometimes “see” older values than people expect. Once I really understood that, I stopped fighting React as much. I started designing with it instead. What React concept took longer to click for you than expected? #React #ReactJS #StateManagement #JavaScript #FrontendDevelopment #Debugging #TypeScript