Mastering useEffect Hook for React Side Effects

DAY 4 | WHY DOES REACT BREAK THE UI INTO COMPONENTS? 🧩 Earlier, the whole page was written as one big block. One small change → risk of breaking something else. React changed this idea. React says: 👉 break the UI into small, independent pieces. Each piece: 🔹 has its own logic 🔹 handles its own UI 🔹 doesn’t disturb others So instead of fixing a whole page, you fix only the part that matters. That’s why React apps are built with components, not pages. #ReactJS #FrontendDevelopment #WebDevelopment #JavaScript #LearnInPublic #CodingJourney #SoftwareEngineering

Something new I learned about React today… I thought setState() updates immediately. But React batches state updates. Example: 👉 setCount(count + 1); 👉 setCount(count + 1); You might expect +2… But it becomes +1. Why? React queues updates and processes them together in the next render cycle. Both calls use the same previous count value. Why does React do this? Because DOM updates are expensive. Batching helps: ✅ Reduce unnecessary re-renders ✅ Improve performance ✅ Keep UI updates efficient Correct way when depending on previous state: 👉 setCount(prev => prev + 1); 👉 setCount(prev => prev + 1); 💡 Realization: State updates are scheduled, not instant. #ReactJS #JavaScript #FrontendDevelopment #WebDevelopment #SoftwareEngineering #CodingJourney #LearningInPublic #DeveloperLife #ReactInternals #FrontendEngineer #TechInterview #StateManagement

One thing I’ve been revisiting lately in React is component simplicity. Over time, it’s easy for components to grow: • too many responsibilities • too much state • logic that’s hard to reason about What I’m trying to be more intentional about now: → Smaller, focused components → Clear data flow → Pushing complex logic out of the UI when possible Nothing groundbreaking but these small decisions make a big difference as an app scales. Curious to hear: what’s one React practice you’ve consciously improved over time? #ReactJS #FrontendDevelopment #JavaScript #CleanCode #SoftwareEngineering

This surprised me when I first learned React: JSX is not a feature of the browser. And it’s not magic either. Every JSX element you write eventually becomes a React.createElement() call. That’s the whole relationship. JSX is just a 𝗱𝗲𝘃𝗲𝗹𝗼𝗽𝗲𝗿 𝗳𝗿𝗶𝗲𝗻𝗱𝗹𝘆 𝘀𝘆𝗻𝘁𝗮𝘅. React.createElement() is what React actually understands. When you write JSX, you’re optimizing 𝗿𝗲𝗮𝗱𝗮𝗯𝗶𝗹𝗶𝘁𝘆. When React runs your code, it only sees 𝗽𝗹𝗮𝗶𝗻 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗼𝗯𝗷𝗲𝗰𝘁𝘀. Understanding this changed how I debugged React apps. Errors stopped feeling 𝗺𝘆𝘀𝘁𝗲𝗿𝗶𝗼𝘂𝘀. Components felt less magical and more predictable. JSX makes React pleasant to write. createElement makes it possible to run. Different layers. Same outcome. #React #JavaScript #FrontendEngineering #SoftwareDesign

🚀 Before I go on vacation, here’s a quick React cheat sheet I always come back to: useState vs useRef vs None (Local Variable) One of the most common questions I still see (and honestly, I also had doubts for a long time) is: 👉 “When should I use useState, useRef, or just a normal variable?” So I made this quick breakdown 👇 ✅ useState → when the UI must update ✅ useRef → when you need to persist a value across renders without triggering a re-render ✅ None / Local variable → when the value can be derived or calculated This becomes especially important when working with things like: BLE streams / sensors timers / intervals performance-critical screens 🌴 I’m about to go on vacation for a few days, so I’ll be offline for a bit, but I wanted to share this before leaving! 💬 What’s one React hook you think is misunderstood the most? #react #reactnative #javascript #typescript #frontend #softwareengineering

🚀 Day 886 of #900DaysOfCode ✨ React vs ReactDOM — Why Are They Different? Many developers use React and ReactDOM every day, but very few stop to ask why they are actually separate. In today’s post, I’ve explained the difference between React and ReactDOM in a simple and intuitive way — focusing on what role each one plays and why this separation exists in the first place. Once you understand this, things like rendering, platform independence, and how React works across web and native platforms start making much more sense. 👇 Was this separation ever confusing to you? Share your thoughts in the comments! #Day886 #learningoftheday #900daysofcodingchallenge #FrontendDevelopment #WebDevelopment #JavaScript #React #CodingCommunity #ReactDOM

Today I finally understood how React works behind the scenes, and it made everything click: 🔹 Virtual DOM keeps a lightweight UI copy 🔹 Reconciliation compares changes efficiently 🔹 Fiber schedules and prioritizes rendering work 🔹 React DOM updates only the required parts of the real DOM 📌 Key takeaway: React doesn’t re-render the whole page — it calculates minimal changes and updates only what’s needed, making apps fast and smooth. Understanding the fundamentals makes React feel less like magic and more like logic 💙 #ReactJS #FrontendDevelopment #LearningInPublic #JavaScript #Hitesh Choudhary

React 19.2 just changed the game with the <Activity> component! 🚀 Forget annoying loading spinners and lost form data when navigating back and forth. This is the performance boost we’ve been waiting for. ⚡️ Why it’s a total game-changer: <Activity mode="hidden">: Hides the DOM and pauses effects but preserves your state perfectly. 💾 Instant Back Button: No re-fetching or re-renders when returning to a page. 🔙 Background Pre-rendering: Load your next page before the user even clicks. 💨 Native-App Feel: Transitions are now buttery smooth. 🥞 Also in 19.2: useEffectEvent to finally kill dependency array headaches. 🧠 Better async script handling & DevTools integration. 🛠️ If you’re still on React 18, it's time to level up. The upgrade is smooth and the performance gains are massive. 📈 Are you using React 19 yet? Which feature is your favorite? 👇 #ReactJS #WebDev #Frontend #JavaScript #Coding #PerformanceOptimization

📌Built a RANDOM ADVICE GENERATOR using React at iNetz Technologies Private Ltd that fetches real-time advice from a public API and updates the UI dynamically with every click. What looks simple on the surface helped me understand some core React concepts deeply🚀 Here’s what I implemented: 🔹 Connected to a public API using fetch() 🔹 Used async/await for handling asynchronous data 🔹 Managed state using useState 🔹 Tracked side effects with useEffect 🔹 Built a dynamic counter to track user interactions 🔹 Designed a clean, responsive UI with CSS Key Takeaways: ◾️Understanding how React re-renders on state updates ◾️Handling side effects properly ◾️Working with external APIs ◾️Improving component structure and readability 🌀Small projects. Consistent practice. Continuous improvement. 🚀 #React #FrontendDeveloper #JavaScript #WebDevelopment #CodingJourney

🚨 Stop using useEffect for everything in React. If you're still using useEffect to: • Derive state from props • Transform data for rendering • Handle simple computations You're probably writing more bugs than you think. 💡 React tip: 1️⃣ Derived data belongs in useMemo, not useEffect 2️⃣ Event-driven logic belongs in handlers 3️⃣ Effects are for synchronization with external systems The less useEffect you write, the more predictable your component becomes. Clean React code is about eliminating unnecessary effects. What’s one place you removed useEffect and simplified your code? #ReactJS #FrontendDevelopment #JavaScript #SoftwareEngineering #CleanCode