Understanding useEffect Dependency Array in React

❓ Why does useEffect run twice in React? If you’ve ever noticed your useEffect running twice in development and thought, “Is my code broken?” — don’t worry, it’s not 😄 👉 This happens because of React Strict Mode. 🧠 In simple words: React runs your effect twice on purpose (only in development) to help you find bugs. It checks: Are you cleaning up properly? Does your effect cause side effects by mistake? So React does this: 1️⃣ Run the effect 2️⃣ Clean it up 3️⃣ Run it again If something breaks, React warns you early. ✅ Important to remember This happens only in development In production, useEffect runs once as expected It helps you write safer and cleaner code 📌 Tip: Always return a cleanup function from useEffect when needed. useEffect(() => { console.log("Effect running"); return () => { console.log("Cleanup"); }; }, []); React isn’t annoying you — it’s protecting you 😉 #ReactJS #useEffect #FrontendDevelopment #JavaScript #LearningReact

👋 Hey LinkedIn fam! Today I learned about the useEffect Hook in React, one of the most important hooks for handling side effects in functional components ⚛️ 🔍 What useEffect does: It runs code when something happens in a component — like when it mounts, updates, or unmounts. 🧠 Common uses: Fetching data from APIs Updating the DOM Setting up event listeners Cleanup tasks (like removing listeners or timers) 📌 Simple idea: useEffect(() => { ... }, [dependencies]) Empty dependency → runs once With dependencies → runs when values change It’s amazing how useEffect helps control component lifecycle without writing class components 🚀 #ReactJS #UseEffect #FrontendDevelopment #WebDevelopment #LearningJourney #JavaScript

Understanding React lifecycle helped me clear a lot of confusion around component behavior ⚛️ When working with parent and child class components, React follows a specific mounting order: Mounting order 🧩 1. Parent constructor 2. Parent render 3. Child constructor(s) 4. Child render(s) 5. Child componentDidMount(s) 6. Parent componentDidMount Key idea 💡 1. Rendering happens top to bottom 2. componentDidMount runs bottom to top In modern React, the same lifecycle logic is handled using hooks 🔁 1. componentDidMount → useEffect(() => {}, []) 2. componentWillUnmount → cleanup function inside useEffect Different syntax, same underlying behavior. #ReactJS #JavaScript #FrontendDevelopment #WebDevelopment

Recently, I realized most React bugs aren’t React bugs. They’re timing bugs. State didn’t “update wrong”. It updated later. Effect didn’t “run twice”. It ran exactly when React promised it would. React is not synchronous thinking wrapped in JSX. It’s a scheduling system. Once you understand that: • setState is a request, not a command • renders are cheap, side effects are not • React doesn’t break your logic, it exposes it The moment you stop fighting React’s timing, your components get simpler, and your bugs get boring. What was the React concept that finally “clicked” for you? #ReactJS #FrontendEngineering #WebDevelopment #JavaScript #ReactHooks

🚀 Day 866 of #900DaysOfCode ✨ Understanding the Virtual DOM in React In today’s post, I’ve broken down one of the core concepts that makes React so fast and efficient — the Virtual DOM. If you’ve ever wondered how React updates the UI so quickly, why diffing matters, or what actually happens behind the scenes when state changes — this post explains it all in a simple, beginner-friendly way. From how the Virtual DOM is created to how React efficiently updates only what’s needed, everything is covered in a clear and practical format. If you want to strengthen your React fundamentals, you’ll definitely enjoy today’s post. 👇 Have you ever explored how the Virtual DOM actually works? Let me know in the comments! #Day866 #learningoftheday #900daysofcodingchallenge #FrontendDevelopment #WebDevelopment #JavaScript #React #CodingCommunity #VirtualDOM

A clear and practical explanation of how the Virtual DOM makes React fast and efficient. #ReactJS #VirtualDOM #FrontendDevelopment #JavaScript #WebDevelopment

If you don’t understand these React concepts, you’ll struggle. React looks simple at first components, props, hooks… But real challenges start when logic and performance come into play. Here are some React concepts that truly decide your skill level 👇 🔹 Reconciliation & Virtual DOM Understanding how React decides what to re-render saves you from performance issues. 🔹 Keys in Lists Keys aren’t just warnings they help React track elements efficiently. 🔹 Closures in Hooks Most bugs in useEffect and useState come from misunderstood closures. 🔹 useMemo vs useCallback Optimization tools not default tools. Misuse can hurt more than help. 🔹 State Batching & Re-renders Knowing when and why a component re-renders makes debugging much easier. 👉 If React feels confusing sometimes, it’s not React it’s usually a JavaScript concept hiding underneath. Master the fundamentals, and React becomes predictable. 💬 Which React concept confused you the most when you started? #ReactJS #JavaScript #FrontendDevelopment #WebDevelopment #MERNStack #ReactHooks #CodingLife #DeveloperCommunity #FrontendDeveloper #SoftwareEngineering #LearnReact #ProgrammingTips #TechCareers #CodeNewbie

✨ Today, I worked on strengthening my React fundamentals ✨ Worked on Props in React — understanding how to pass data between components, use destructuring, and apply default props. 🔑 Key Points I Learned: • Props are used to pass data from parent to child • Props are read-only (immutable) • They help create reusable components • Destructuring props makes code cleaner and easier to read • Default props allow setting fallback values when no prop is provided • Props can pass text, numbers, and images • React follows one-way data flow 📌 Strengthening my React fundamentals step by step 🚀 #ReactJS #ReactProps #DefaultProps #Destructuring #FrontendDevelopment #JavaScript #LearningJourney

Optimize Re-renders with React.memo Avoid unnecessary re-renders in React functional components by using React.memo. It memoizes your component and only re-renders it when props change — great for performance! Typing in the input won’t trigger a re-render of the Child component because it’s wrapped with React.memo. Less re-render = smoother performance! #ReactJS #JavaScript #FrontendDevelopment #WebDevelopment #ReactTips #CodingTips

React Deep Dive – Day 2 Continuing the fundamentals, today I focused on why components re-render even when nothing “looks” different. What I revisited today: 1. Passing arrays or functions as props can trigger re-renders 2. Each parent render creates new references, even if the values are identical 3. From React’s perspective, a new reference means a changed prop 4. This is a common source of unintentional re-renders in real-world apps This is where: useMemo helps stabilize derived values useCallback helps preserve function references 💡 My takeaway: Memoization isn’t about adding hooks everywhere. It’s about being intentional with references when component boundaries matter. Part of my ongoing React Deep Dive — revisiting fundamentals with a performance lens. Day 3 coming up. #ReactJS #FrontendDevelopment #JavaScript #WebPerformance #LearningInPublic