harshitha epuri’s Post

Mastering State Management in React! ⚛️ I recently dove deep into React Hooks, specifically useState and useEffect, to build this functional To-Do List. It’s one thing to understand the syntax, but another to implement: ✅ CRUD Operations: Adding, Editing, and Deleting tasks seamlessly. 💾 Persistence: Using localStorage via useEffect so your data doesn't vanish on refresh. 🔄 Conditional Rendering: Handling UI states for "Edit" vs "Add" modes. Check out the video to see the logic behind the UI! #ReactJS #WebDevelopment #FrontendEngineer #Javascript #ReactHooks #CodingLife #PortfolioProject

🚀 7 Days of Better React – Day 1 Old Approach → Better Approach Faced a small performance issue recently. A derived value was recalculating on every render. ❌ Old approach: const filteredUsers = users.filter(user => user.active); This runs on every render. ✅ Better approach: const filteredUsers = useMemo(() => { return users.filter(user => user.active); }, [users]); Now it recalculates only when users changes. Small optimization. Better performance. Cleaner behavior. Performance isn’t about big rewrites. It’s about small intentional improvements. #reactjs #frontenddeveloper #javascript #webdevelopment #performance

💻 Revisiting React Fundamentals – Understanding State Today I revisited one of the core concepts of React: State management using the useState hook. To reinforce the concept, I built a small Counter component that performs different operations such as: ✔️ Increment ✔️ Decrement ✔️ Reset ✔️ Multiply by 2 ✔️ Square of a number This simple exercise helped me understand how state changes trigger UI updates in React and how event handlers like onClick interact with state. Sometimes revisiting basic concepts helps strengthen the foundation before building more complex applications. I’ve attached a short screen recording and code snippets showing how the counter works. Always learning, always improving. 🚀 #ReactJS #FrontendDevelopment #WebDevelopment #JavaScript #LearningInPublic #ReactDeveloper

🚀 React Re-renders Why does a component re-render even when props look the same? React re-renders when reference changes, not value. If you pass new objects/functions every render, React treats them as new. Example: Passing `{ user }` where `user` is recreated each render will trigger child updates. In dashboards with 100+ rows, this causes lag. Fix: Memoize values and avoid inline object creation. #ReactJS #FrontendEngineering #JavaScript

Closures finally clicked for me — and most of my React bugs suddenly made sense. Key realization: Closures capture variables, not values. Every React render creates a new closure. That explains: stale state in setTimeout useEffect([]) freezing values why functional updates work why useRef fixes async bugs Once you see React through the lens of lexical environments, debugging stops being guesswork and becomes logic. Actively leveling up my JavaScript fundamentals to operate at a senior frontend level. 🚀 #JavaScript #Closures #ReactJS #FrontendEngineering #LearningInPublic

🔥 Stale Closures: The Silent Bug in React Your logic is correct. Your state is correct. Your UI is wrong. Why? Closures. In JavaScript, functions remember variables from when they were created. In React… that memory can become outdated. You click 3 times. It updates once. Not a React bug. Not a state bug. A stale closure. It usually hides inside: • setTimeout • useEffect • Event handlers • Async calls React doesn’t betray you. Your mental model does. Understand closures → You level up in React instantly. Ever lost hours to a “why is state not updating?” moment? 😅 #reactjs #javascript #frontenddevelopment #reactdeveloper #webdevelopment #codingtips #softwareengineering #devcommunity #techlife

REACT NOTES — PART 1 (Foundations) After understanding how JavaScript works, the next step is building interfaces that scale. React simplifies complex UIs by breaking them into small, reusable components. This post covers the core foundations: • Components and component structure • JSX and how React renders UI • Virtual DOM and efficient updates • Props for passing data • State for dynamic UI behavior • Event handling in React Before learning advanced patterns or frameworks, these fundamentals must be clear. 📌 Save this if you're starting with React or revising the basics. #React #FrontendDeveloper #WebDevelopment #JavaScript #InterviewPrep #LearningInPublic #Consistency

Controlled Components in React Today I learned about Controlled Components in React. A controlled component is a form element whose value is controlled by React state instead of the DOM. This means React manages the input values using state and updates them through event handlers. 📌 How It Works The input value is stored in state The input field uses that state as its value When the user types, an onChange event updates the state This way React fully controls the form data. Understanding controlled components helped me see how React manages form inputs efficiently. Continuing to build strong React fundamentals step by step 🚀 #ReactJS #FrontendDevelopment #WebDevelopment #LearningJourney #JavaScript

Why useEffect feels unpredictable (but isn’t) Most frustration with useEffect comes from three JavaScript behaviors: 1️⃣ Objects are compared by reference New object → new reference → effect runs again 2️⃣ Functions close over values If you don’t understand closures, dependency arrays feel confusing 3️⃣ State updates are scheduled They don’t run immediately, they’re batched None of this is React magic. It’s "JavaScript". When JS fundamentals are clear, useEffect becomes boring. And boring is good. #reactjs #javascript #frontend #softwareengineering #careeradvice