How and Why useEffect Runs Only Once with an Empty Dependency Array

𝟓 𝐑𝐞𝐚𝐜𝐭 𝐇𝐨𝐨𝐤𝐬 𝐄𝐯𝐞𝐫𝐲 𝐃𝐞𝐯𝐞𝐥𝐨𝐩𝐞𝐫 𝐒𝐡𝐨𝐮𝐥𝐝 𝐔𝐧𝐝𝐞𝐫𝐬𝐭𝐚𝐧𝐝 (𝐰𝐢𝐭𝐡 𝐑𝐞𝐚𝐥 𝐔𝐬𝐞 𝐂𝐚𝐬𝐞𝐬) When I first started working with React, I’ll be honest Hooks completely confused me. I knew they were powerful, but useState, useEffect, useRef… all blurred together. It wasn’t until I spent a quiet weekend building a small task tracker app that everything finally clicked. Every problem I ran into had a Hook that solved it beautifully. Here’s what I learned 1. 𝐮𝐬𝐞𝐒𝐭𝐚𝐭𝐞() / 𝐮𝐬𝐞𝐑𝐞𝐝𝐮𝐜𝐞𝐫()-𝐌𝐚𝐧𝐚𝐠𝐞 𝐒𝐭𝐚𝐭𝐞 𝐄𝐚𝐬𝐢𝐥𝐲 - I used these to handle user input and update UI instantly. - Simple, clean, and no messy class-based state handling. 𝐑𝐞𝐚𝐥 𝐜𝐚𝐬𝐞 : Managing form fields or to-do items dynamically. 2. 𝐮𝐬𝐞𝐂𝐨𝐧𝐭𝐞𝐱𝐭()-𝐒𝐡𝐚𝐫𝐞 𝐃𝐚𝐭𝐚 𝐖𝐢𝐭𝐡𝐨𝐮𝐭 𝐏𝐫𝐨𝐩 𝐃𝐫𝐢𝐥𝐥𝐢𝐧𝐠 - I used to pass props across 3–4 components. - With useContext(), I shared theme and login state directly. 𝐑𝐞𝐚𝐥 𝐜𝐚𝐬𝐞 : App-wide authentication or theme management. 3. 𝐮𝐬𝐞𝐑𝐞𝐟()-𝐀𝐜𝐜𝐞𝐬𝐬 𝐃𝐎𝐌 𝐄𝐥𝐞𝐦𝐞𝐧𝐭𝐬 𝐃𝐢𝐫𝐞𝐜𝐭𝐥𝐲 - useRef() helped me focus input fields and measure element sizes without re-rendering. 𝐑𝐞𝐚𝐥 𝐜𝐚𝐬𝐞 : Managing focus in custom input components. 4. 𝐮𝐬𝐞𝐄𝐟𝐟𝐞𝐜𝐭()-𝐂𝐨𝐧𝐧𝐞𝐜𝐭 𝐰𝐢𝐭𝐡 𝐭𝐡𝐞 𝐎𝐮𝐭𝐬𝐢𝐝𝐞 𝐖𝐨𝐫𝐥𝐝 - Fetching APIs, adding event listeners, or updating the title bar this hook handles all side effects. 𝐑𝐞𝐚𝐥 𝐜𝐚𝐬𝐞 : Fetching data from APIs when a component mounts. 5. 𝐮𝐬𝐞𝐌𝐞𝐦𝐨() / 𝐮𝐬𝐞𝐂𝐚𝐥𝐥𝐛𝐚𝐜𝐤()-𝐎𝐩𝐭𝐢𝐦𝐢𝐳𝐞 𝐏𝐞𝐫𝐟𝐨𝐫𝐦𝐚𝐧𝐜𝐞 - Once my app grew, I noticed re-renders slowing things down. - These two hooks became my secret performance weapons 𝐑𝐞𝐚𝐥 𝐜𝐚𝐬𝐞 : Caching computed values or memoizing functions in complex UIs. That small weekend project changed how I think about React. Hooks aren’t just features they’re a way to 𝐭𝐡𝐢𝐧𝐤 𝐦𝐨𝐫𝐞 𝐜𝐥𝐞𝐚𝐫𝐥𝐲 about your app’s logic and structure. If you’re learning React, don’t rush it. Build small. Break things. Learn by solving. Each Hook will make sense when it solves your real problem. #ReactJS #JavaScript #FrontendDevelopment #ReactHooks #WebDevelopment #CodingJourney #SoftwareEngineering

🚀 useEffect vs useEffectEvent 🚀 React’s Most Underrated Update Everyone knows useEffect. But only a few devs truly understand why React introduced useEffectEvent in React 19. And trust me this tiny hook changes how we handle side effects forever 👇 Before React 19, we’d often do this: useEffect(() => { const id = setInterval(() => { console.log(value); }, 1000); return () => clearInterval(id); }, [value]); Looks fine, right? But every time value changes, React clears and restarts the interval. 😬 Why? Because useEffect captures variables from its render (closure behavior). So if you omit dependencies, you get stale data. If you include them, you get unwanted re-runs. Classic React headache 😅 💡 The Fix — useEffectEvent React 19 introduces useEffectEvent to solve exactly this. It separates when your effect runs from what data it uses. Here’s how 👇 import { useEffect, useEffectEvent } from "react"; function Example({ value }) { const onTick = useEffectEvent(() => { console.log(value); // always fresh }); useEffect(() => { const id = setInterval(onTick, 1000); return () => clearInterval(id); }, []); // runs only once ✅ } Now the effect runs only once but still logs the latest value every time. No stale closures. No re-renders. No performance hit. ⚡ Think of it like this 👇 🕰️ useEffect → decides when to run ⚡ useEffectEvent → decides what happens inside Or simply put useEffect sets the timer, useEffectEvent updates the recipe inside it without restarting the timer 🍳 🎯 TL;DR ✅ useEffect — runs when dependencies change ✅ useEffectEvent — keeps logic fresh inside a stable effect ✅ Together → cleaner, faster, and bug-free React side effects So the next time you set up an interval, a subscription, or any long-running effect remember: you don’t need to re-run it, you just need useEffectEvent. #ReactJS #React19 #FrontendDevelopment #useEffect #useEffectEvent #JavaScript #ReactHooks #WebDevelopment #FrontendEngineer #CodeBetter #Performance #ModernReact #LearningInPublic

⚛️ React finally fixed async pain 😅 If you’ve ever built a form or data flow in React, you know the drill: isLoading, isSubmitting, try/catch, random spinners all over the place... Well, React 19 is changing that — with a new thing called <Activity />. If you’ve ever juggled loading states, transitions, and async UI behavior in React — you know the pain. Spinners everywhere, flags in state, useEffect chaos... you get it. Now React is saying: “What if async behavior was part of the UI itself?” 💡 What <Activity /> does <Activity /> is like a built-in wrapper for async actions — it tracks what’s happening inside your app (fetching, submitting, rendering) and lets you show loading or error states declaratively. Example: <Activity> <Form action="/submit"> <input name="email" /> <button type="submit">Send</button> </Form> <Activity.Pending>Submitting...</Activity.Pending> <Activity.Complete>Done!</Activity.Complete> <Activity.Error>Something went wrong</Activity.Error> </Activity> That’s it. No isLoading, no try/catch, no spaghetti logic. React just knows what state your async action is in — and renders the right UI. 🧠 Why it matters - Cleaner state management: No more endless useState for loading/error flags. - Better UX: Transitions feel smoother because React handles them at the framework level. - Fewer bugs: Less manual wiring = fewer race conditions and weird edge cases. Basically, <Activity /> takes one of the most annoying parts of frontend dev — async flow — and turns it into something elegant and readable. 🚀 My take React 19 feels like the framework is finally catching up to how we actually build apps today. Less boilerplate, more structure, better performance. I can’t wait to start using <Activity /> in production — especially in Next.js apps where async logic is everywhere. Have you played around with it yet? What do you think about this new direction React is taking? 👇 #reactjs #frontend #javascript #webdevelopment #nextjs #react19 #developerlife #programming

🚀 Next.js 16 Is Officially Here! I’m thrilled to share that Next.js v16 has now moved out of beta and is officially released a major milestone for the framework and for frontend development. Here’s why this matters (and why I’m pumped to adopt it): 🔥 What’s New & What’s Changed Turbopack is now fully stable and the default bundler for new Next.js projects expect dramatically faster builds and developer feedback loops. React Compiler support is integrated, enabling smarter rendering optimizations (like automatic memoization) with minimal manual effort. Smarter routing and navigation under the hood layout deduplication, incremental prefetching, and more efficient link handling; less overhead, smoother transitions. Overhauled caching APIs: new tools like updateTag() and enhanced revalidateTag() give you fine-grained control over cache invalidation and SWR-style revalidation. Updated defaults & breaking changes to watch out for including adjustments in next/image, removal of some deprecated flags, and new minimum Node.js / TypeScript constraints. ⚠️ What to Look Out for in Your Upgrade Some defaults have changed; review the migration guide carefully changes in routing, caching, and API defaults may require updates. Features previously behind flags are now baked in, so there’s less room for toggling. If your app relies on deprecated features (e.g. AMP, old runtime configs, certain experimental flags), you’ll need to refactor before upgrading. 💡 My Reflections & Invitation to Connect To me, Next.js 16 feels like a turning point not just an incremental upgrade, but a rebalancing towards performance, developer ergonomics, and more predictable application behavior. I’ll be upgrading one of my active projects soon to test things in real-world conditions. If you’re also planning the same, I’d love to exchange notes, glitches, and tips along the way. Let’s keep pushing what’s possible on the modern web faster, smarter, more resilient. 🧱 #Nextjs #Nextjs16 #NextjsUpdate #React #ReactJS #JavaScript #TypeScript #Frontend #FrontendDevelopment #WebDevelopment #WebDev #SoftwareDevelopment #Coding #Programmer #Fullstack #FullstackDeveloper #ModernWeb #Performance #UI #UX #Turbopack #ReactCompiler #Framework #OpenSource #Vercel #NextjsCommunity #NextjsDevelopers #TechNews #Innovation #DevCommunity #BuildInPublic #WebApps #JSFramework #CodeNewRelease #DevLife #SoftwareEngineer #NextjsEcosystem #WebPerformance

🚀 𝗥𝗲𝗮𝗰𝘁 𝟭𝟵’𝘀 𝘂𝘀𝗲𝗔𝗰𝘁𝗶𝗼𝗻𝗦𝘁𝗮𝘁𝗲: 𝗧𝗵𝗲 𝗡𝗲𝘄 𝗪𝗮𝘆 𝘁𝗼 𝗧𝗵𝗶𝗻𝗸 𝗔𝗯𝗼𝘂𝘁 𝗙𝗼𝗿𝗺𝘀 I was playing around with React 19’s new 𝘂𝘀𝗲𝗔𝗰𝘁𝗶𝗼𝗻𝗦𝘁𝗮𝘁𝗲 hook and honestly, it changes the way you think about forms. If you’ve lived in React Hook Form (RHF) land like me, you’re used to juggling useState everywhere for isLoading, error, and response. That muscle memory runs deep. But useActionState quietly breaks it. You pass it a Server Action, and React itself manages the entire submission lifecycle, pending ➜ success ➜ error. No useState. No useEffect. Just native React handling the roundtrip for you. 💡 𝗧𝗵𝗲 “𝗔𝗵𝗮!” 𝗠𝗼𝗺𝗲𝗻𝘁 — 𝗽𝗲𝗿𝗺𝗮𝗹𝗶𝗻𝗸 The optional permalink parameter completely flipped my mental model. It gives each form a stable identity, even before hydration. Imagine a feed of posts, each with its own “Like” form. If a user clicks before client JS loads, React can still match the server’s response to the right form — thanks to that stable permalink. That’s progressive enhancement, baked into React. Forms that actually work before JavaScript boots. 🔥 ⚙️ 𝗦𝗼... 𝗱𝗼 𝘄𝗲 𝘀𝘁𝗶𝗹𝗹 𝗻𝗲𝗲𝗱 𝗥𝗲𝗮𝗰𝘁 𝗛𝗼𝗼𝗸 𝗙𝗼𝗿𝗺? That was my first thought, too. My take: useActionState doesn't replace RHF, it supercharges it. This is the new pattern I'm exploring:  • Use RHF for what it does best: rich client-side validation and instant UX.  • Use useActionState to wrap the server submission and natively handle all the server state. (Full disclosure: This is from my weekend experiments. I haven't shipped this pattern to production yet, but I'm excited by the potential.) 🧭 𝗠𝘆 𝗧𝗮𝗸𝗲𝗮𝘄𝗮𝘆 useActionState isn’t replacing React Hook Form. It’s redefining the boundary between client and server state. No manual loading flags. No async juggling. Just React — managing form behaviour natively, even before hydration. If React 18 blurred the line between client and server, React 19’s useActionState quietly 𝗲𝗿𝗮𝘀𝗲𝗱 𝗶𝘁. 𝗖𝘂𝗿𝗶𝗼𝘂𝘀 𝗳𝗼𝗿 𝗺𝘆 𝗳𝗲𝗹𝗹𝗼𝘄 𝗱𝗲𝘃𝘀: How are you handling form validation in this new React 19 / Next.js 15 ? Sticking with RHF, or moving logic into Server Actions? #React19 #NextJS15 #FrontendArchitecture #ReactHooks #ServerActions #WebDev #DeveloperExperience #ReactHookForm

🚀 React vs. Angular vs. Vue — The #Frontend Showdown! When it comes to building modern web apps, the three titans — React, Angular, and Vue — often spark heated debates. Let’s break them down ⚛️ React: The Flexible Powerhouse Type: UI Library — gives you the “engine,” you build the car. Language: JavaScript (TypeScript optional). Data Flow: One-Way (predictable, but needs more setup for complex state). Structure: Very flexible — you choose your routing, state, and tools. Best For: Dynamic, component-driven UIs and single-page apps. 🏰 Angular: The Complete Fortress Type: Full-fledged Framework — comes with everything built-in. Language: TypeScript (mandatory). Data Flow: Two-Way Binding — automatic sync between UI & logic. Structure: Highly opinionated — great for consistency and large teams. Best For: Enterprise-level, complex applications where scalability matters. 🌱 Vue: The Elegant Middle Ground Type: Progressive Framework — combines simplicity with flexibility. Language: JavaScript (TypeScript supported). Data Flow: Mostly One-Way, but Two-Way available via v-model. Structure: Balanced — easy to start, yet powerful for scaling. Best For: Startups, prototypes, or projects needing fast delivery and clean syntax. 🧠 Quick Analogy #Angular is a pre-built mansion — everything’s ready, just move in. #React is a customizable engine — you design your own ride. #Vue is a cozy smart home — simple, elegant, and easy to expand. 💬 Which one powers your favorite frontend project — and why? #FrontendDevelopment #WebDevelopment #JavaScript #Coding #SoftwareDevelopment #LearnToCode #Programming #TechLearning #CodeForBeginners

Hey #SoftwareEngineers ! The web development landscape is moving faster than ever. From Rust-powered bundlers to AI-driven TypeScript features, staying current is key to building next-gen applications and hiring top talent. Here's a breakdown of the seismic shifts happening across the full-stack ecosystem in 2024-2025 that you need to know. ### Frontend Evolution: Performance is the New Standard The battle for the frontend is being won on the grounds of performance and developer experience. - **Next.js**: The framework is doubling down on server-centric development. With full support for React Server Components (RSC), it's drastically cutting down client-side JavaScript for faster loads . The game-changer? **Turbopack**, a Rust-based bundler that's up to 10x faster than Webpack, making build times feel instantaneous . Next.js 15 continues this trend, shipping with the Rust-based bundler and full React 19 support . - **React.js**: React 19, which landed in December 2024, is a major leap forward. It introduced "Actions" to simplify server-side data mutations directly from forms and a new `use` hook to seamlessly handle promises within components . By late 2025, React 19.2 introduced the `<Activity />` component to preserve UI state even when hidden, making for incredibly fluid user experiences . - **Vue.js**: Following Vue 2's end-of-life, the focus is squarely on Vue 3's performance. The upcoming "Vapor Mode" promises to boost speed by removing the virtual DOM entirely for certain use cases . Meanwhile, the ecosystem is maturing with tools like "Rolldown," another Rust-based bundler aimed at accelerating build performance . Developer satisfaction is high, with a 93.4% intention-to-use rate in 2024 . ### Backend Battleground: Nest.js vs. Express.js The backend choice often comes down to structure versus freedom. - **Express.js**: Still the king of minimalism and flexibility. Its lightweight nature makes it perfect for smaller projects and rapid prototyping where developers want complete architectural control . - **Nest.js**: For enterprise-scale applications, Nest.js's opinionated, modular architecture is winning hearts. Built with TypeScript at its core, it offers features like built-in Dependency Injection (DI), integrated testing with Jest, and streamlined API documentation with Swagger—promoting maintainability and consistency in large teams . ### The Unstoppable Rise of PostgreSQL PostgreSQL has cemented its status as the go-to database for modern applications. It's now the most-used database among developers, according to the StackOverflow Developer Survey 2025 . Recent versions have supercharged its capabilities: - **PostgreSQL 16** brought massive performance gains with parallel processing and SIMD acceleration for JSON operations . - **PostgreSQL 18** introduced native UUID v7 support and a new asynchronous I/O subsystem, making it even more powerful for data-intensive applications . Combined with serverles

An introduction to React Fiber (the algorithm behind React) React Fiber is the core reconciliation algorithm behind React. It was introduced in React 16. The old reconciler algorithm was called Stack Reconciler. The new Fiber architecture aims to provide the following benefits: -> Incremental rendering for better performance -> Smooth animations -> Responsiveness to user actions It allows to divide rendering work into chunks and prioritize updates. Some other features included returning multiple elements, better error handling, and portals. So, what is a fiber? A fiber is a simple Javascript object. It represents the React element or node of the Virtual DOM tree. As React renders the App for the first time, it goes through each node and creates a fiber node. Each fiber is connected to its parent, sibling, and child thus forming a linked list. In simple terms, we call it a tree of fibers or fiber tree. Now how does React Fiber work? When the App is first mounted, Fiber constructs a tree of components called current. The current tree is responsible for rendering the UI. Whenever there is an update or state change, Fiber constructs a tree in parallel called workInProgress. Fiber tree traversal happens like this: -> Start: Fiber starts traversal from the topmost React element and creates a fiber node for it. -> Child: Then, it goes to the child element and creates a fiber node for this element. This continues until the leaf element is reached. -> Sibling: Now, it checks for the sibling element if there is any. If there is any sibling, it traverses the sibling subtree until the leaf element of the sibling. -> Return: If there is no sibling, then it returns to the parent. React performs work on this workInProgress tree. The workInProgress tree now has updated elements in response to the update. In the commit phase, React switches the current tree with the updated workInProgress tree. This switch renders the new updates to the UI. This is how React Fiber works behind the scenes to update the UI and optimize React performance. This is a high-level explanation of how React Fiber algorithm works. Let me know in the comments: Would you like to go deeper into React algorithms and React internals? If you are into React development: Follow for more similar content on React performance and frontend optimization #React #ReactFiber #ReactJS #FrontendDevelopment #WebDevelopment #JavaScript #ReactPerformance #ReactInternals #ReactAlgorithm #ReactReconciliation #React16 #VirtualDOM #FrontendEngineer #MERNStack #NextJS #WebDevCommunity #LearnReact #ReactDevelopers #CodingTips #DevCommunity

🚀 Next.js 16 is Here — A Major Leap for Modern Web Development The newly released Next.js 16 introduces performance, developer-experience, and caching improvements that solidify its position as one of the most advanced React frameworks available. Here’s a breakdown of what’s new and why it matters 👇 1. Turbopack is Now the Default Bundler Turbopack officially replaces Webpack for new projects. Expect 2×-5× faster production builds and up to 10× faster Fast Refresh in development. This results in smoother iteration cycles and a snappier coding experience. 2. Filesystem Caching (Beta) A new filesystem cache enables the reuse of build artifacts across runs — a huge win for large projects, CI/CD pipelines, and teams managing monorepos. 3. Smarter Routing & Navigation Routing just got smarter with improved incremental prefetching and layout deduplication, meaning faster page transitions and reduced bandwidth consumption. 4. Enhanced Caching APIs revalidateTag(tag, cacheLife) introduces stale-while-revalidate behavior for fine-grained control. updateTag(tag) allows instant UI updates after server actions, ensuring users see changes immediately. These updates give developers powerful tools for balancing freshness and performance. 5. React 19.2 Support + New React Features Full compatibility with React 19.2, bringing in new APIs like useEffectEvent(), Activity, and View Transitions. The framework now supports smoother animations and more responsive UIs out of the box. 🔧 6. Build Adapters API (Alpha) The brand-new Build Adapters API opens doors for custom deployment workflows and integrations — ideal for advanced teams building across multiple environments or platforms. 7. Important Breaking Changes Requires Node.js 20.9+ and TypeScript 5.1+. AMP support has been removed. Updated defaults for next/image (cache TTL, image sizes, and quality settings). 💡 Final Thoughts Next.js 16 represents a bold step forward — prioritizing speed, scalability, and developer happiness. With Turbopack as the new standard and caching optimizations across the stack, the future of React-based full-stack development looks faster and smarter than ever. 👉 Try the beta today with: npx create-next-app@beta To learn NextJS 16, visit: https://lnkd.in/eDcVEPGA #Nextjs #React #WebDevelopment #Frontend #JavaScript #TypeScript #Performance #OpenSource #Vercel

🚀 Frontend frameworks aren’t as complex as they look Many beginners see Angular, React, Vue, or Svelte and think: “This is too complicated, I can’t start.” Even intermediate devs get overwhelmed by: package.json with hundreds of dependencies Angular/Vite/Webpack config files SSR, routing, lazy loading But here’s the truth: the runtime is actually simple. 🧩 The core idea Every modern frontend framework does one thing: 🔁 “Watch for data changes → update only the parts of the page that depend on that data.” Example (framework-agnostic): <p>Hello, {userName}</p> <button onclick="increment()">+1</button> The framework renders userName in the page. When userName changes → only that text updates. No full page reload. No magic. Just data → HTML → DOM update. ⚡ Reactive data Some frameworks (like Angular Signals, React state, Vue reactive) let you link variables to the UI: count = signal(0); // Angular count.set(1); // only updates the part of the page that uses `count` Tracks dependencies automatically Updates only what changed Makes the UI fast and efficient 🌐 Routing is just swapping components When you navigate to /dashboard or /profile: URL → Component → HTML → DOM Angular uses RouterModule React uses react-router Vue uses vue-router The framework just renders the correct component for the URL. That’s all routing is. ⚙️ Tooling is what feels heavy Yes, package.json, angular.json, TS configs, SSR setup, and dev pipelines make frontend seem complicated. But that’s infrastructure, not the runtime. At its core: HTML + dynamic data + event handlers. Every framework updates the DOM when data changes. Routing just swaps components for each URL. Tooling adds power, not fundamental complexity. Once you focus on data → HTML → DOM, frontend becomes approachable. #Frontend #WebDevelopment #Angular #React #Vue #JavaScript #Signals #Routing #DeveloperExperience #Programming #WebDev #DevCommunity