🚀 Day 5/30 – State in React One of the most important concepts 🔥 Today I learned: ✅ State stores dynamic data inside a component → It allows components to manage and update their own data ✅ When state changes → React re-renders the UI → React automatically updates only the changed parts (efficient rendering ⚡) ✅ Managed using useState hook → The most commonly used hook in functional components ✅ State updates are asynchronous → React batches updates for better performance 💻 Example: import { useState } from "react"; function Counter() { const [count, setCount] = useState(0); const handleClick = () => { setCount(prev => prev + 1); // safe update }; return ( <div> <h2>Count: {count}</h2> <button onClick={handleClick}>Increment</button> </div> ); } 🔥 Key Takeaway: State is what makes React components interactive, dynamic, and responsive to user actions. #React #State #FrontendDevelopment #JavaScript #WebDev #CodingJourney #LearnInPublic

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

Shipped my latest front-end project — an Async Weather Tracker built with vanilla JS. ☁️ Key features: - Live weather data via OpenWeatherMap API - async/await for all API calls - Search history stored in localStorage - Clean, minimal UI redesign Check it out here 👇 https://lnkd.in/g_kQZ6ad Still learning, still building. #JavaScript #FrontEnd #WebDevelopment #StudentProject

💡 Lifting State Up in React — One of the Most Important Concepts When working with React, one challenge we often face is sharing state between multiple components. That’s where lifting state up comes in. 👉 Instead of managing state in multiple child components, we move (or “lift”) the state to their closest common parent. Why does this matter? ✔ Ensures a single source of truth ✔ Keeps UI consistent and predictable ✔ Makes components more reusable and easier to debug 📌 Example: If two components need to reflect the same data (like a form input and a preview), managing state separately can lead to inconsistencies. By lifting the state to a parent component and passing it down via props, both stay in sync. ⚡ Pro Tip: Lifting state up is powerful, but don’t overdo it. For deeply nested components or complex state sharing, consider tools like Context API or state management libraries. Clean architecture isn’t just about writing code — it’s about placing state in the right place. #React #FrontendDevelopment #JavaScript #WebDevelopment #ReactJS #SoftwareEngineering

This is my Simple GitHub Issue Tracker Project! Key Features: • Login Functionality using Only JS. • Seamless switching between All, Open and Closed. • Show Issue Modal when Clicked Each Issue. • Added Search Functionaliy. • Clean, responsive, and user-friendly interface. This project helped me strengthen my JavaScript logic and UI handling skills. More improvements coming soon! Project Live Link: https://lnkd.in/g5vXKzma #WebDevelopment #JavaScript #Frontend #LearningJourney

1,200 lines of form code deleted from a production dashboard — and the forms actually work better now.   That's what happens when you swap React Hook Form for React 19's built-in Actions + useActionState on the right kind of project.   Here's the thing most tutorials won't tell you: this isn't a blanket "RHF is dead" story. It's a "know when to use what" story.   → Simple CRUD forms (login, contact, settings)? useActionState + useOptimistic handles it natively. No extra deps, no bundle cost, instant optimistic UI out of the box.   → Complex dynamic forms (nested arrays, conditional fields, 50+ field wizards)? React Hook Form still wins. React 19 has no built-in validation beyond HTML attributes — and managing deeply nested field arrays without RHF is pain you don't need.   → The middle ground is where it gets interesting. Forms with 5–15 fields and basic Zod validation? You can go either way. We leaned native and didn't look back.   The real unlock isn't "drop the library." It's that React's form primitives finally work well enough that you can evaluate each form on its own complexity instead of reaching for RHF by default on every project.   Three questions before you refactor: 1. Do any of your forms have dynamic field arrays? 2. Are you using RHF's validation resolver pattern heavily? 3. Is your form state shared across multiple components?   If you answered "no" to all three, you might be carrying a dependency you don't need.   What's your team's take still all-in on React Hook Form, or have you started migrating simpler forms to Actions?   #ReactJS #FrontendDevelopment #WebDev #JavaScript #React19 #FormHandling #DeveloperProductivity

Stop disabling the exhaustive-deps linter in your React Effects ⚛️. we all did the same dirty hack: // eslint-disable-next-line 👇. It is the most common frustrating scenario in React development: You write a useEffect to connect to a websocket or track an analytics event. Inside that effect, you need to read the current value of a state variable—like a shopping cart count or a UI theme. But the moment you read that state, the React linter screams at you to add it to the dependency array. If you add it, your effect re-runs every time the state changes (destroying your websocket connection!). If you don't add it, your build fails. So, we all did the same dirty hack: // eslint-disable-next-line. React finally solves this permanently with useEffectEvent. ❌ The Legacy Way (eslint-disable): Forces you to break the rules of React. Creates a massive risk for stale closures and hidden bugs. Makes your code harder to maintain and review. ✅ The Modern Way (useEffectEvent): Extracts your "event" logic cleanly out of your "lifecycle" logic! • Always Fresh: It guarantees your callback will always read the absolute latest props and state. • Non-Reactive: It is intentionally ignored by the dependency array. It will never cause your useEffect to re-run. • Clean Code: You can finally turn your linter rules back on and trust your dependencies again. The Shift: We are moving away from fighting the framework and using dedicated primitives to separate reactive synchronization from non-reactive events. #ReactJS #React19 #WebDevelopment #Frontend #JavaScript #CleanCode #SoftwareEngineering #TechTips #WebDev #WebPerf #Tips #DevTips #ReactTips #FrontendDeveloper #DeveloperTips

Interesting comparison between HTMX and React while implementing the same feature 👀 The article shows how a relatively simple UI feature took 3 days in React but only 3 hours using HTMX ⏱️ It’s a good reminder that technology choices can significantly affect complexity and development time. Sometimes a simpler approach can solve the problem more efficiently than adding additional abstraction layers. It also raises interesting questions about when complexity is actually necessary in system design. Curious to see how approaches like HTMX evolve alongside traditional frontend frameworks. 💡 Always interesting to see how different tools approach the same problem. #webdevelopment #softwareengineering #javascript #frontend #backend https://lnkd.in/ecpfhWgW

Topic: Stale Closures in React – The Hidden Bug You Don’t See Coming ⚠️ Stale Closures in React – The Bug That Looks Fine… Until It’s Not Your code works. No errors. No warnings. But suddenly… state behaves incorrectly 😐 Welcome to the world of stale closures. 🔹 What is a Stale Closure? When a function captures an old value of state instead of the latest one. 🔹 The Problem const [count, setCount] = useState(0); useEffect(() => { const interval = setInterval(() => { console.log(count); // ❌ always logs old value }, 1000); return () => clearInterval(interval); }, []); 👉 count is stuck at its initial value. 🔹 Why This Happens React closures capture values at render time, not at execution time. 🔹 Solutions ✅ 1. Add dependency useEffect(() => { console.log(count); }, [count]); ✅ 2. Use functional update setCount(prev => prev + 1); ✅ 3. Use useRef for latest value const countRef = useRef(count); countRef.current = count; 💡 Real-World Impact 👉 Timers 👉 WebSockets 👉 Event listeners 👉 Async callbacks 📌 Golden Rule If your logic depends on changing state, make sure it’s not using a stale snapshot. 📸 Daily React tips & visuals: 👉 https://lnkd.in/g7QgUPWX 💬 Have you ever debugged a stale closure issue for hours? 😅 #React #ReactJS #JavaScript #FrontendDevelopment #WebDevelopment #ReactHooks #DeveloperLife