React Lifecycle: Mounting, Updating, Unmounting

21 Days 21 web dev procject Day 6 of Building in Public 🚀 live demo : https://lnkd.in/gYuw98q9 Today I focused on improving the UI and fixing issues in my React project. Worked on component structure, responsive layout, and debugging some annoying build errors. Things I learned today: • Proper component separation makes debugging easier • Small UI fixes can dramatically improve user experience • Build errors usually come from simple mistakes (wrong imports, wrong paths) Slow progress is still progress. #buildinpublic #webdevelopment #reactjs #javascript #100daysofcode

🚀 Stale Closures Why does state inside setTimeout show old values? Functions capture variables at creation time. If state changes later, the timeout still holds old reference. In OTP flows or retry logic, this creates incorrect behavior. Use functional updates or refs when dealing with async callbacks. #ReactJS #JavaScript #AsyncProgramming #Frontend

🚀 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

I often see developers wrap components with React.memo expecting magic improvements. But memoization only works when props are stable. If you pass a new object, array, or function on every render, React sees a new reference and re-renders anyway. Example in the screenshot below The real fix is not “wrap everything with memo”. It’s: • Stable references • Controlled state boundaries • Smaller components • Clean architecture Performance problems usually start with structure, not React itself. Optimize intentionally. Not blindly. #ReactJS #FrontendDevelopment #JavaScript #WebPerformance #SoftwareEngineering #CleanCode #FullStackDeveloper

React Tip: Structure your component files Many React components become difficult to maintain because everything is written in random order inside one file. A simple structure improves readability a lot. Recommended order inside a component: 1. Imports 2. Props / Types 3. Helper or utility functions 4. State and Effects (useState, useEffect, etc.) 5. Guard clauses (loading / error handling) 6. JSX return Why this helps: • Faster understanding of the code • Easier debugging • Cleaner code reviews • Better collaboration in teams In React, performance matters — but readability matters just as much. Well-structured components make large applications easier to scale and maintain. #ReactJS #FrontendDevelopment #JavaScript #CleanCode

Today I want to share an amazing React feature that many developers don't know about. It allows you to create components using a class instead of a function. This gives you access to powerful tools like lifecycle methods, this.state, and this.setState(). 2026 is the new 2016 🤣 #React #JavaScript #Frontend #WebDevelopment #SoftwareEngineering

Understanding React Components React applications are built using components, which are reusable and independent pieces of UI. Instead of writing one large file, we break the UI into smaller parts Types of Components  1)Functional Components 2)Class Components In modern React, we mainly use functional components, which are simple JavaScript functions that return JSX. Core Rules of React Components Component Name Must Start with Uppercase Must Return a Single Parent Element Do Not Modify Props Understanding components made React feel more structured and practical. Building step by step and strengthening fundamentals 🚀 #ReactJS #FrontendDevelopment #WebDevelopment #LearningJourney #JavaScript

Why does this log 1, not 2? Most people say: “Because React batches updates.” That’s only half the story. The real reason? Stale closures. Inside this render, count is 0. Both setCount(count + 1) calls use that same captured value. So React receives: 1) set to 1 2) set to 1 Not: 1) set to 1 2) set to 2 This question isn’t about memorizing hooks. It tests whether you understand how React renders create new function scopes — and how state updates are queued. #react #javascript #frontend

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

After talking about useMemo, it’s hard not to mention useCallback. I often see it added everywhere as a “performance fix”, even when there’s no real problem to solve. useCallback is useful when function identity actually matters, usually when passing callbacks to memoized components or dependency arrays. In many cases, it just adds noise and makes the code harder to read. As with most things in React, clarity should come first. Optimization should be intentional, not automatic. #React #JavaScript #Frontend #SoftwareEngineering