React Component Lifecycle: Events, Re-renders, and useEffect

The Node.js Event Loop Explained (The Right Way) Here's the complete picture. The Core Truth is: For EVERY phase → Execute ONE macrotask → Execute ALL nextTick() → Execute ALL Promises → Move to next phase Why This Matters The Node.js event loop isn't a simple cycle like in browsers. It has 5 distinct phases, and microtasks run BETWEEN EVERY PHASE, not just once per loop. The 5 Phases: ⏱️ Timers — setTimeout, setInterval callbacks 📋 Pending Callbacks — Deferred I/O callbacks from the previous cycle 🔄 Poll — I/O events, network requests, file operations ✓ Check — setImmediate callbacks 🔚 Close — Socket and stream closures The Microtask Priority Here's the critical part: nextTick() ALWAYS runs before Promise callbacks. For each phase boundary: 1️⃣ process.nextTick() callbacks execute FIRST 2️⃣ Promise.then() callbacks execute SECOND 3️⃣ Then the next macrotask phase begins The Visualization The diagram shows the complete cycle with all phases and how microtasks fit between each one. Notice how every phase is followed by microtasks—this is the key difference from what most developers think. Drop a comment if this cleared it up! And if you've been caught by the I/O starvation bug, share your story 👇 #Node.js #JavaScript #EventLoop #Backend #WebDevelopment

🔥 Why useEffect Runs Twice in React Strict Mode If you’ve seen this while developing with React: JSX code : useEffect(() => { console.log("Effect ran"); }, []); You expect this to run once. But in development, the console shows: Effect ran Effect ran So… is React broken? Not really. 🧠 What’s Actually Happening When React Strict Mode is enabled, React intentionally runs some lifecycle logic twice in development. This includes useEffect. Why? Because React is checking if your effects are safe and predictable. 🔍 What React Is Testing React wants to detect bugs like: Side effects that are not cleaned up Code that relies on running only once Hidden memory leaks To do that, React: 1️⃣ Mounts the component 2️⃣ Runs the effect 3️⃣ Immediately unmounts it 4️⃣ Mounts it again If your cleanup logic is correct, everything still works. ✅ Example with Cleanup JSX code useEffect(() => { const id = setInterval(() => { console.log("running"); }, 1000); return () => clearInterval(id); }, []); This ensures no leftover side effects. 🎯 Important Note This only happens in development. Production builds run effects normally. #ReactJS #FrontendDevelopment #JavaScript #ReactHooks #WebDevelopment #LearningInPublic

🚀 Today I Learned: Different Ways to Handle Forms in React Today I explored multiple ways to handle forms in React, and it helped me understand the difference between Controlled and Uncontrolled Components. 🔹 Controlled Components In this approach, form data is handled by React state. Every input change updates the state using onChange, which makes React the single source of truth. ✅ Better control over form data ✅ Easy validation and dynamic behavior 🔹 Uncontrolled Components Here, form data is handled by the DOM itself instead of React state. We usually use refs to access the input values when needed. ✅ Less code for simple forms ✅ Useful when you don't need real-time state updates 💡 Learning both approaches made me realize that choosing the right method depends on the complexity of the form and the level of control needed. Every day I dive deeper into React fundamentals, and understanding concepts like these makes building real applications much easier. #React #WebDevelopment #JavaScript #FrontendDevelopment #LearningInPublic

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

Today I learned how useEffect cleanup actually works in React — and it completely changed how I think about side effects. When we use useEffect, it runs after render. But what many beginners ignore is the cleanup function. Why is cleanup important? Prevents memory leaks Stops unnecessary API calls Removes event listeners properly Clears intervals and timeouts Example: When you add an event listener inside useEffect, you must remove it when the component unmounts. Otherwise, it keeps running in the background. That’s where cleanup comes in. useEffect(() => { const handleResize = () => console.log("Resized"); window.addEventListener("resize", handleResize); return () => { window.removeEventListener("resize", handleResize); }; }, []); The function returned inside useEffect runs: Before the next effect runs When the component unmounts Small detail. Big difference in performance. React is simple — until you understand the details. #ReactJS #FrontendDeveloper #JavaScript #WebDevelopment #LearningInPublic #100DaysOfCode

🚀 How Redux Works (Explained Simply) If you’ve worked with React, you’ve probably heard about Redux. But how does Redux actually work? 🤔 Redux is a state management library that helps you manage your application’s state in a predictable and centralized way. Let’s break it down 👇 🧠 1. Store The Store is the central place where the entire application state lives. It acts as a single source of truth. 📩 2. Action An Action is a plain JavaScript object that describes what happened. Example: { type: "INCREMENT" } 🔄 3. Reducer A Reducer is a function that takes the current state and an action, then returns a new updated state. Important: Reducers must be pure functions and should never mutate the original state. 🔁 4. Dispatch When you dispatch an action, Redux sends it to the reducer, updates the state, and re-renders the UI accordingly. 🔥 Redux Data Flow: User Interaction → Dispatch Action → Reducer → New State → UI Updates ✅ Why Use Redux? 1 . Predictable state management 2 . Easier debugging with Redux DevTools 3 . Great for large-scale applications 4 . Centralized state handling Have you used Redux in your projects? What was the most challenging part for you? Let’s discuss in the comments 👇 #ReactJS #Redux #FrontendDevelopment #JavaScript #WebDevelopment

🚀 React Insight: Why key Matters in Lists If you’ve worked with lists in React, you’ve probably written something like this: {items.map((item) => ( <li key={item.id}>{item.name}</li> ))} But have you ever wondered why the key prop is so important? 🤔 React uses keys to identify which items in a list have: • changed • been added • been removed This helps React update the UI efficiently without re-rendering everything. ⚠️ What happens without proper keys? ❌ Components may re-render unnecessarily ❌ Component state can attach to the wrong item ❌ Performance issues in large lists 💡 Best Practices ✔️ Use a unique and stable identifier from your data (like id or uuid) => Bad practice: key={index} => Better approach: key={user.id} Using the array index as a key can cause bugs when the list reorders, adds, or removes items. ✨ Takeaway Keys aren’t just there to remove React warnings — they help React’s reconciliation algorithm update the DOM efficiently. Small detail. Big difference. #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #CodingTips #SoftwareEngineering

React keeps evolving, but my brain doesn’t refresh as fast as the docs—so I built a compact React A–Z cheat sheet I can rely on instead of my memory. This is a high‑density desk reference for working React devs: JSX and rendering basics, state management (from useState/useReducer/Context to Redux Toolkit and Zustand), modern hooks, React 19 features, data fetching, forms, styling, testing, and architecture—condensed into a few focused pages. Instead of juggling 20 documentation tabs, you can keep this one sheet open next to your editor, quickly find the concept or keyword you need, and get back to shipping features faster. It’s not a tutorial, it’s a quick “React control panel” for people who already build apps and just want to move faster with fewer interruptions. #ReactJS #React19 #JavaScript #Frontend #WebDevelopment #MERNStack #ReactHooks #ReduxToolkit #TypeScript #NextJS #Remix #ReactNative #Programming #CheatSheet #SoftwareEngineering

⚠️ One tricky thing in React that confused me at first: useEffect dependencies At first, I thought useEffect just runs magically. But the truth is very simple 👇 🧠 Think of useEffect like this: “React, run this code after render, and re‑run it only when I tell you to.” That “telling” happens through the dependency array. ✅ Examples (super simple) useEffect(() => {  console.log("Runs once"); }, []); ➡️ Runs only when component mounts but for the below case useEffect(() => {  console.log("Runs when count changes"); }, [count]); ➡️ Runs every time count changes 🚨 The tricky part If you use a variable inside useEffect but forget to add it as a dependency, React will use an old value (stale data). 🧠 Rule to remember: If you use it inside useEffect, it should be in the dependency array. Once I understood this, useEffect stopped feeling scary 😊 Just logic + clarity. #React #JavaScript #Hooks #useEffect #Frontend #LearningInPublic

Want to learn more about React hooks? I recently stumbled upon BigFrontEnd.dev and have been really enjoying it. I’ve been spending some time in the React section, which has exercises where you predict what gets printed to the console when using React hooks. It’s been a great way to better understand how state updates work, when React re-renders a component, and how closures can affect values inside hooks. They also have a solid JavaScript section. I started exploring those to get a better feel for what actually gets logged when you combine things like console.log, setTimeout, and Promises. It’s been helpful for reinforcing how JavaScript handles execution order and the event loop. If you’ve been wanting to dig a little deeper into React hooks or brush up on JavaScript behavior under the hood, I highly recommend it Please let me know if there are any other great resources you use as well. #react #reacthooks #state #javascript