DEV Community: Hanzla Baig

The Life of a Developer in One Loop ❤

Hanzla Baig — Wed, 25 Mar 2026 13:21:43 +0000

Ever notice how being a developer is basically living in a constant loop of:

Wake up → Coffee → Code → Debug → Repeat

Some days, you’re the hero fixing bugs at 2 AM and the next day, you’re staring at your console wondering why nothing works. But here’s the funny part—every broken build, every weird error, every mysterious undefined is secretly teaching you more than any tutorial ever could.

We love automating things, yet somehow we end up spending hours manually debugging the thing we automated. We fight with Git like it’s our mortal enemy, only to realize we actually love it… eventually. And yes, there will always be that one commit you wish you could erase from history.

But despite the chaos, there’s nothing quite like that moment when your code finally runs perfectly on the first try… and then you realize you forgot to save.

Shoutout to all the developers who have ever:

Googled an error message like it’s sacred scripture
Spent more time naming variables than writing logic
Accidentally broken production at least once
Felt a weird pride when a project finally works

If you’re a dev, you get it. If you’re not… just know, we have fun in our own chaotic way.

💻 Keep coding, keep breaking things, and keep laughing at the madness.

React Is Not Slow — Your Architecture Is

Hanzla Baig — Fri, 16 Jan 2026 13:10:28 +0000

I'm going to say something that might sting a little: if your React application is slow, it's almost certainly not React's fault. I've been building production React applications for years now, and I've seen this pattern repeat itself over and over again. A team builds something, it starts getting sluggish, and suddenly React becomes the scapegoat. "React is too slow," they say. "We should've used Svelte," someone suggests in a retrospective. "Maybe we need to rewrite this in vanilla JavaScript," another developer proposes, half-seriously.

Here's the uncomfortable truth: React is fast. Incredibly fast, actually. What's slow is the architecture you built on top of it. The tangled mess of components that re-render on every keystroke. The global state that's subscribed to by half your application. The 500-line component that's trying to do everything at once because "it's all related functionality." The Context providers nested twelve levels deep, each one triggering cascading updates through your component tree like dominoes falling in slow motion.

I'm not here to shame anyone. I've made every single one of these mistakes myself, often multiple times, because that's how you actually learn this stuff. You don't learn good React architecture from reading the docs once and building a todo app. You learn it by shipping a feature, watching it grind your app to a halt, spending three days debugging why a dropdown causes the entire page to freeze, and finally understanding—deeply, viscerally understanding—what you did wrong. This blog post is the distillation of all those painful lessons, the architectural mistakes I've made and seen others make, and what I've learned about building React applications that actually perform well.

Why Developers Think React Is Slow

Let's start by acknowledging that the perception of React being slow is incredibly common, especially among developers who are either new to React or who learned it in a specific way that encourages bad patterns. And honestly, I get it. When you first start building with React, everything seems fine. Your todo app renders instantly. Your small dashboard feels snappy. Then your application grows, you add more features, more state, more components, and suddenly everything feels sluggish. The interface starts lagging. Inputs feel unresponsive. You open the React DevTools profiler and see this horrifying cascade of components re-rendering, and you think, "This framework is the problem."

But here's what's actually happening: you're running into the natural consequences of architectural decisions you made when your app was small, decisions that don't scale. The problem isn't that React is slow—it's that React is extremely good at exposing bad architecture. React will happily re-render your entire component tree on every state change if you tell it to. It will dutifully run every expensive calculation you put in your render functions. It will obediently trigger effects and updates in whatever tangled dependency chain you've created. React is not opinionated enough to stop you from doing these things, which means it's incredibly easy to build something that performs poorly if you don't understand what you're doing.

One of the biggest reasons developers perceive React as slow is poor component structure. I see this constantly: components that are too big, too complex, and doing way too much. A single component handling data fetching, state management, business logic, conditional rendering for a dozen different scenarios, and managing side effects all at once. When that component re-renders—and it will re-render often because it's touching so much state—everything inside it runs again. Every function gets redefined. Every calculation gets recomputed. Every child component receives new props and has to decide whether it needs to re-render. This isn't React being slow; this is you forcing React to do an enormous amount of work every single update cycle.

Another massive issue is unnecessary re-renders. This is probably the number one performance problem I see in React applications, and it stems from a fundamental misunderstanding of how React's rendering model works. Developers will structure their state in a way that causes huge portions of their component tree to re-render when only a tiny piece of data changes. They'll lift state way too high up the tree because "these components need to share data," not realizing that they've just made 47 components re-render every time a user types in a search box. They'll create Context providers for convenience without understanding that every component consuming that context will re-render whenever any value in that context changes, even if they're only using a small piece of it.

And then there's the overuse of state. Not all data needs to be state. I've reviewed codebases where literally everything is in state, including data that could be derived from other state, data that never changes, data that's only used in event handlers, and data that should actually be refs. Every piece of unnecessary state is another potential trigger for re-renders, another moving part that makes your application harder to reason about and slower to update. React's useState and useReducer hooks are powerful, but with great power comes great responsibility, and apparently also the great temptation to put absolutely everything into state "just in case."

Bad data flow decisions compound all of these problems. When you don't have a clear strategy for how data moves through your application, you end up with state scattered everywhere—some in components, some in Context, some in a global store, some in URL params, some in refs, some passed through props five levels deep. Nobody knows where the source of truth is. Updates are unpredictable. You fix a performance issue in one place and cause three new ones somewhere else. This isn't a React problem; this is a failure to design a coherent data architecture.

The Architectural Mistakes That Kill Performance

Let me walk you through the specific architectural mistakes that I see destroying React application performance. These aren't obscure edge cases or advanced optimization failures. These are fundamental design problems that slow down applications, make them hard to maintain, and lead developers to incorrectly blame React.

Massive components that do everything. This is the cardinal sin of React architecture. You've seen these components. Hell, you've probably written these components. I know I have. They're 500, 800, sometimes over a thousand lines long. They manage five different pieces of state. They have ten useEffect hooks, half of which have dependency arrays that nobody fully understands anymore. They fetch data, process it, display it, handle user interactions, manage forms, coordinate with other parts of the application, and probably make coffee too if you dig deep enough into the code.

These monolithic components are performance killers because when they re-render, everything inside them runs. Every single line of JSX gets processed. Every inline function gets redefined. Every calculation happens again. And because they're often at the root of some section of your UI, their re-renders cascade down to dozens or hundreds of child components. The worst part is that these components usually re-render way more than necessary because they're touching so much state. A user updates a form field? Re-render the whole thing. Data comes back from an API? Re-render the whole thing. A child component calls a callback? You guessed it—re-render the whole thing.

The reason this happens is usually because developers start with a simple component that does one thing well, and then they keep adding to it. "Oh, we need to handle this edge case, I'll just add a bit more state." "This related functionality needs access to the same data, I'll just put it in here." "We need to coordinate these two things, might as well keep them together." Before you know it, you have a component that's responsible for an entire feature area, and extracting logic from it seems impossible because everything is so tangled together.

Prop drilling chaos. Prop drilling gets a bad rap, and honestly, a lot of that criticism is deserved. But the real problem isn't prop drilling itself—it's what prop drilling represents: a failure to properly structure your component hierarchy. When you're passing props down through five or six levels of components, that's usually a sign that your component tree doesn't match your data flow. You've created intermediate components that don't actually care about the data they're passing through, they're just dumb conduits, and every time you need to add a new piece of data or change how something works, you have to modify every single component in that chain.

But here's where it gets really bad for performance: developers often "solve" prop drilling by lifting state higher and higher up the tree, thinking they're making things simpler. Now the state lives in some common ancestor component that's far removed from where the data is actually used, and every update to that state causes a huge portion of your component tree to re-render. You've traded the inconvenience of prop drilling for a massive performance problem, and you probably didn't even realize you were making that trade-off.

Global state abuse. Oh man, global state. This is where things get spicy. Global state management libraries like Redux, Zustand, MobX, and others are incredibly useful tools. They're also incredibly easy to misuse, and when you misuse them, you create performance nightmares. I've seen applications where almost all state is global. Every piece of UI state, every form value, every loading flag, every error message—it's all in the global store. The reasoning is usually something like "we might need this data somewhere else" or "it's easier to access from anywhere" or "this is how we do state management."

The problem is that when everything is in global state, everything is connected to everything else. Components subscribe to slices of the global store, but often they subscribe to more than they need, or the slices aren't granular enough, or the selectors aren't optimized. A user types in a search input in one corner of your application, updating global state, and suddenly twenty components in completely unrelated parts of your UI are re-rendering because they're subscribed to the same store slice or because you didn't properly implement selector equality checks.

Global state should be for actually global concerns: user authentication, theme preferences, data that truly needs to be shared across distant parts of your application. It should not be your default choice for all state. Yet time and time again, I see developers reach for the global store first, local component state second, and then wonder why their application is slow and hard to reason about.

Context API misuse. The Context API is one of React's best features and also one of its most dangerous. Context is fantastic for dependency injection, theming, providing stable values throughout a tree, and avoiding prop drilling for data that truly needs to be accessed at multiple levels. But Context has a fundamental characteristic that many developers don't fully appreciate: when a Context value changes, every component consuming that Context re-renders. Every single one. Even if they're only using a tiny piece of the Context value.

I've seen developers create a single massive Context provider for an entire feature area, stuffing everything into one Context value—user data, UI state, API responses, form values, you name it. Then they sprinkle useContext calls throughout dozens of components, and suddenly the entire feature re-renders whenever any piece of that Context changes. A loading flag flips from true to false? Everything re-renders. A form field updates? Everything re-renders. Some unrelated data gets updated? You get the idea.

The solution isn't to avoid Context—it's to use it thoughtfully. Multiple smaller Contexts are often better than one large one. Context values should change infrequently. If you need frequently-changing values to be available throughout a tree, Context probably isn't the right tool—you need a proper state management solution with subscriptions, or you need to rethink whether that data really needs to be globally available.

Treating React like jQuery. This is a more subtle mistake, but it's incredibly common among developers who came to React from imperative programming backgrounds or who haven't fully internalized React's declarative model. These developers write React code that's constantly fighting against React's design. They store references to DOM nodes and manipulate them directly. They try to coordinate updates imperatively instead of declaratively. They reach for useEffect for things that should just be derived state or regular event handlers. They treat state updates like direct mutations instead of transitions from one UI state to another.

This approach leads to confusing code that's hard to reason about and often performs poorly because you're working against React's optimizations instead of with them. React is designed around the idea that you describe what the UI should look like for any given state, and React figures out how to make that happen efficiently. When you try to manually orchestrate things imperatively, you bypass those optimizations and create code that's both slower and more bug-prone.

How React Actually Works (And Why It's Fast By Design)

To understand why React is not inherently slow, you need to understand what React actually does under the hood. I'm not going to walk you through the source code—that's not useful for most developers—but I am going to explain the conceptual model that makes React fast by design, because once you understand this, a lot of performance optimization becomes intuitive.

React's core job is to keep your UI in sync with your state. That's it. That's the whole ballgame. You have some state, and you have a description of what the UI should look like for that state, and React's job is to make the actual DOM match that description. The genius of React is in how it does this efficiently, even when state changes frequently and the UI descriptions are complex.

Reconciliation is the process React uses to figure out what actually needs to change in the DOM when your state updates. This is crucial because DOM manipulation is expensive—it's one of the slowest things you can do in a web browser. Creating DOM nodes, updating them, removing them, and especially causing layout recalculations and repaints—all of this is computationally expensive. So React's fundamental goal is to minimize DOM operations.

Here's how it works conceptually: when your state changes and React needs to re-render, it doesn't immediately touch the real DOM. Instead, React calls your component functions to get a description of what the UI should look like—this description is your JSX, which becomes a tree of React elements. React then compares this new tree with the previous tree it rendered last time. This comparison process is reconciliation, and React's algorithm for doing this efficiently is pretty clever.

React walks through the tree, comparing elements. If an element's type hasn't changed (still a div, still the same component), React can reuse the existing DOM node and just update its properties. If the type changed (was a div, now a span), React knows it needs to destroy the old DOM node and create a new one. For lists of elements, React uses keys to match up which elements correspond to which, so it can efficiently handle reordering, additions, and deletions without recreating everything.

The Virtual DOM is often misunderstood. It's not some magical performance silver bullet—in fact, maintaining the Virtual DOM has overhead. The Virtual DOM is simply React's way of representing your UI as JavaScript objects (React elements) instead of actual DOM nodes. The advantage is that comparing JavaScript objects is much faster than manipulating the real DOM, so React can diff the old and new Virtual DOM trees, figure out the minimal set of changes needed, and then apply those changes to the real DOM in a batch.

Some people criticize the Virtual DOM as unnecessary overhead, and in some cases they're right—frameworks that compile to optimal imperative updates can be faster for certain workloads. But the Virtual DOM gives React a huge advantage: it makes React declarative and predictable. You don't have to manually track what changed and update the DOM accordingly. You just describe the entire UI for your current state, and React figures out the efficient way to make it happen. This makes React code much easier to write and maintain than imperative DOM manipulation, and for most applications, the performance is more than good enough.

Rendering versus committing is a crucial distinction that many developers don't understand. When React "renders" a component, it just calls your component function to get a React element tree. This is a pure operation—it doesn't cause side effects, doesn't touch the DOM, doesn't do anything except execute JavaScript to build a description of what the UI should be. Rendering is relatively cheap because it's just running JavaScript functions.

The "commit" phase is when React actually applies changes to the DOM. After React has rendered your components and diffed the new tree against the old one, it enters the commit phase and performs the actual DOM mutations. This is more expensive because DOM operations are expensive. But here's the key insight: React batches commits. Even if multiple state updates happen in quick succession, React groups them together, renders once, and commits once. This batching is a massive performance win.

Understanding this distinction helps you understand why some things cause performance problems and others don't. A component re-rendering is not necessarily expensive—it's just JavaScript execution. What's expensive is when that re-render leads to actual DOM updates, especially if those updates are large or cause layout recalculations. And what's really expensive is when you cause React to render and commit multiple times in rapid succession, bypassing the batching optimizations.

React is fast by design because it's built around these principles: minimize expensive DOM operations, batch updates, reuse existing work when possible, and give developers a declarative API that lets React handle the optimization details. When people say React is slow, what they usually mean is that their application is causing React to do far more work than necessary—rendering huge component trees on every update, triggering excessive DOM mutations, or bypassing React's optimizations through poor architectural choices.

The performance characteristics of React are actually pretty straightforward: rendering components is cheap until you have huge components or very deep trees, commits are expensive but React minimizes them, and side effects (like API calls, animations, or complex calculations) are as expensive as you make them. If you design your architecture around these characteristics—keep components small and focused, minimize unnecessary re-renders, and be thoughtful about expensive operations—React will be blazingly fast.

The Performance Killers Nobody Talks About

Everyone talks about re-renders and memoization, but there are performance killers in React applications that don't get nearly enough attention. These are the issues that cause real, user-facing slowness, yet they often go undiagnosed because developers are too busy optimizing the wrong things.

Over-fetching data is probably the most common performance problem in modern React applications, and it's barely a React issue—it's an API design and data fetching issue. Your component loads, fetches data from an API, gets back a massive JSON payload with ten times more data than you need, parses it all, processes it all, stores it all in state, and then renders based on a tiny slice of it. Then you do this for five different endpoints on the same page load, and you wonder why your application feels slow.

The problem is compounded when you're fetching data in individual components without coordination. Component A fetches data. Component B fetches overlapping data. Component C fetches related data. None of them know about each other. You end up with waterfall requests—A loads, triggers B to load, which triggers C to load—when you could have fetched all the necessary data in parallel or in a single request. Or worse, you have multiple components fetching the same data because you didn't implement any caching or deduplication.

The solution isn't in React—it's in your data layer. You need proper API design that returns only what you need. You need a data fetching strategy that coordinates requests and caches results. Libraries like React Query, SWR, or Apollo Client solve a lot of these problems, but only if you use them thoughtfully. I've seen developers use these libraries and still over-fetch constantly because they didn't design their queries properly or because they're invalidating caches too aggressively.

Poor memoization strategy is another silent killer. And by "poor strategy," I don't just mean "not memoizing enough"—I mean having no coherent strategy at all. Developers either memoize nothing and suffer through unnecessary re-renders, or they memoize everything "just in case" and end up with code that's harder to read, harder to maintain, and sometimes actually slower because they're paying the memoization overhead for things that didn't need it.

Here's the thing about memoization: it's not free. Every useMemo, useCallback, and React.memo call has overhead. You're trading CPU cycles spent on memoization checks against CPU cycles spent on re-rendering or recomputing. For simple components and cheap calculations, the memoization overhead can actually be more expensive than just doing the work again. I've profiled applications where aggressive memoization made things slower because developers were memoizing simple arithmetic or shallow component renders that would have been faster to just recompute.

The right strategy is to memoize selectively based on actual measurement. Profile your application, identify the expensive operations, and memoize those. Don't memoize preemptively. Don't wrap every function in useCallback "because it's a dependency." Don't throw React.memo on every component "for optimization." Understand what's actually expensive in your application and optimize that specifically.

Expensive calculations inside render is such an obvious mistake when you see it, but it's incredibly common. I've seen render functions that do complex data transformations on large arrays. Render functions that perform expensive regular expression operations on every render. Render functions that recursively traverse object trees or do distance calculations or parse dates in loops. All of this work happening on every single render, even when none of the relevant data has changed.

The insidious part is that these expensive calculations often start out small and innocent. You have a simple sort or filter operation on a small array, and it's fine. Then your data set grows. Or you add another transformation. Or you nest these operations. Before you know it, you're spending 50 milliseconds on calculations in your render function, and your UI feels sluggish because React can't commit the update until your render function finishes running.

This is where useMemo actually shines—not for memoizing components or callbacks, but for memoizing expensive derived state. If you have a calculation that depends on props or state but doesn't need to run on every render, memoize it. If you're transforming data structures in your render body, that's a code smell. Pull it out, memoize it, and only recompute when the dependencies actually change.

Bad list rendering is another performance killer that deserves way more attention than it gets. Rendering lists efficiently in React requires understanding a few key concepts that many developers ignore or misunderstand. First, keys. Everyone knows you need keys, but not everyone knows that keys need to be stable and unique. Using array indices as keys is fine if your list never reorders and items are never added or removed from anywhere but the end. Otherwise, you're going to confuse React's reconciliation and cause unnecessary DOM operations.

But keys are just the start. The bigger issue is what you're rendering in each list item. If your list items are complex components that take many props, and those props change frequently, you're going to render your entire list constantly. This is especially brutal for long lists—imagine a list of 500 items where each item re-renders on every parent update because you're passing down inline functions or derived data that gets recreated on every render.

For very long lists, you need virtualization—rendering only the items that are currently visible and recycling DOM nodes as the user scrolls. Libraries like react-window and react-virtualized exist for this reason. But even for moderately sized lists, you need to be thoughtful about minimizing list item re-renders through proper memoization, stable prop references, and component design that limits what data each item depends on.

What Good React Architecture Actually Looks Like

Let me paint you a picture of what good React architecture actually looks like in practice. This isn't about following some dogmatic pattern or religiously applying a specific state management library. Good architecture is about understanding the principles of component design, state management, and data flow, and applying them thoughtfully to your specific application's needs.

Component responsibility boundaries are the foundation of good React architecture. Each component should have a single, clear purpose. Not a single line of code—a single conceptual responsibility. A button component renders a button. A form component manages form state and validation. A list component renders a list. A data fetching component fetches data and passes it to presentational components. When a component starts doing multiple things, when you struggle to name it clearly, when you find yourself reaching for "and" in the component name—that's a signal to split it up.

The way I think about component boundaries is to ask: if this piece of state changes, what needs to re-render? If the answer is "just this small part of the UI," then that state should live in a component as close to that UI as possible. If the answer is "several different parts of the UI that aren't directly related," then you might need lifted state or a more sophisticated state management solution. But if the answer is "everything, even though most of it doesn't care," then your component boundaries are wrong.

Good component design also means thinking about what data a component owns versus what data it receives. A component should own state that's entirely internal to its operation—form field values, open/closed states for dropdowns, animation states, things like that. A component should receive data through props when that data is determined by parent components or external state. Mixing these concerns—having components that both own critical state and receive critical state—leads to confusion and bugs.

Smart versus dumb components is an older pattern that fell out of fashion for a while, but the underlying principle is still incredibly valuable. You want a clear separation between components that contain logic, manage state, and handle side effects (smart components, sometimes called container components) and components that just receive data through props and render UI (dumb components, sometimes called presentational components).

This separation gives you several huge benefits. First, your presentational components become incredibly easy to test—you just pass in props and verify the output. Second, they become highly reusable—the same presentational component can be used with different data sources and in different contexts. Third, your application becomes much easier to reason about because you can look at a component and immediately know whether it's going to do anything surprising or if it's just going to render what you give it.

In practice, this means you might have a UserProfile component that fetches user data, manages editing state, and handles save operations, and then it renders a UserProfileView component that just takes that data as props and displays it. The smart component is ugly and imperative and full of business logic. The presentational component is clean and declarative and easy to understand. You've separated concerns, and your architecture is better for it.

State colocation is one of those principles that sounds simple but has profound implications. State should live as close as possible to where it's used. If only one component needs a piece of state, that state should live in that component. If several sibling components need to share state, it should live in their nearest common ancestor. If components across your entire application need access to state, then and only then should it be in global state.

The reason this matters so much for performance is that React's re-rendering is based on state changes. When state changes, React re-renders the component that owns that state and all of its descendants. If you lift state higher than necessary, you're re-rendering a bigger portion of your tree than you need to. If you put state in a global store when it's only used in one small section of your UI, you're paying the coordination and subscription overhead for no benefit.

I've reviewed applications where almost all state was lifted to the root component or put in Redux, and the developers justified this by saying "we might need it somewhere else later" or "it's easier to have all state in one place." But when I asked them to identify which state was actually shared across multiple parts of the UI, it was maybe 10% of what they had lifted. The other 90% was causing unnecessary re-renders and making the application harder to understand.

Composition over configuration is another principle that dramatically improves React architecture. Instead of creating configurable components with lots of props and conditional rendering logic, create simple, focused components and compose them together to build more complex UIs. Instead of a Button component with props for isLoading, isDisabled, hasIcon, iconPosition, variant, size, and ten other configuration options, create simple composable pieces and let the consuming code combine them as needed.

Composition leads to more flexible and maintainable code because you're not trying to anticipate every possible use case in a single component. You're creating building blocks that can be combined in ways you might not have predicted. It also tends to lead to better performance because simpler components with fewer props are easier for React to optimize and less likely to re-render unnecessarily.

A concrete example: instead of a Card component that has props for headerContent, bodyContent, footerContent, isCollapsible, isExpanded, and various styling options, create Card, CardHeader, CardBody, and CardFooter components that can be composed together. The parent code becomes more verbose, but it's also more flexible and clearer. Each piece does one thing well, and performance characteristics are more predictable.

How to Actually Fix Performance Problems

Let's get practical. You've identified that your React application has performance problems. You've measured, you've profiled, and you know where the bottlenecks are. How do you actually fix them? And just as importantly, how do you know when to fix them and when to leave well enough alone?

When to optimize and when not to is the first question you need to answer, and it's not always obvious. The conventional wisdom is "don't optimize prematurely," which is good advice but not very actionable. Here's my rule: optimize when you have evidence of a user-facing performance problem and you've identified the cause through profiling. Don't optimize based on assumptions about what might be slow. Don't optimize because a component "feels" like it might re-render too much. Don't optimize because you read a blog post about React performance and now you're worried.

Performance optimization has costs. It makes your code more complex. It makes it harder for other developers (including future you) to understand what's happening. It introduces potential bugs when your memoization dependencies are wrong or your optimization assumptions become invalid. You should only pay these costs when you're getting clear benefits in return, and the only way to know that is through measurement.

When you do optimize, start with the biggest problems first. If you have a component that takes 200ms to render and another that takes 5ms, fix the 200ms one first. This sounds obvious, but I've seen developers spend days optimizing small issues while ignoring the elephant in the room. Profile your application under realistic conditions—realistic data sizes, realistic user interactions, realistic network conditions—and fix the problems that actually impact users.

How to think about useMemo, useCallback, and React.memo is crucial because these are the main tools React gives you for performance optimization, and they're widely misunderstood. These tools are not magic. They're trade-offs. They have overhead. They add complexity. They should be used judiciously, not reflexively.

useMemo is for expensive calculations. If you're doing complex data transformations, sorting large arrays, performing recursive operations, or calculating derived state that's expensive to compute, useMemo can help. It caches the result and only recomputes when dependencies change. But if your calculation is simple—basic arithmetic, accessing object properties, simple array operations on small arrays—useMemo's overhead might exceed the cost of just doing the calculation again.

useCallback is for stable function references. This is useful when you're passing callbacks to child components that are wrapped in React.memo or when function identity matters for dependency arrays. But here's the thing: in many cases, creating a new function on each render is completely fine. Functions are cheap. If your child component isn't memoized or the render is cheap anyway, useCallback adds overhead for no benefit.

React.memo is for preventing component re-renders when props haven't changed. It's great for expensive components that receive the same props frequently, like list items in a long list or complex visualizations that are expensive to render. But for simple components—a button, a text label, a simple div with a few children—the memo check might be more expensive than just re-rendering. Measure first.

The pattern I follow is: write code without memoization first, profile to identify actual performance problems, then add memoization surgically to fix those specific problems. Don't memoize preemptively. Don't wrap everything in useMemo and useCallback "just to be safe." Start simple, measure, optimize what matters.

Measuring before optimizing can't be stressed enough. React DevTools has an excellent profiler that shows you exactly what's rendering, how long it takes, and why it rendered. Use it. Record a profile of a slow interaction. Look at the flame graph. Identify which components are taking the most time. Look at what caused them to render—was it a props change, a state change, a context update? Once you know what's slow and why, you can fix it intelligently.

Network performance matters too. Use your browser's network tab. Are you making too many requests? Are your requests too slow? Are you fetching data you don't need? Are you triggering waterfalls? Sometimes what feels like a React performance problem is actually a data fetching problem. You can optimize your React code all day, but if you're waiting 2 seconds for an API response, your app will still feel slow.

Real user monitoring is valuable for production applications. Tools that track actual user experience metrics—First Contentful Paint, Time to Interactive, interaction latency—give you insight into what real users experience, not just what you see in your development environment. Sometimes performance problems only manifest at scale, with slow devices, or with poor network conditions. Synthetic benchmarks in your dev environment won't catch those.

Bad Architecture vs Good Architecture: A Real Comparison

Let me contrast what bad versus good architecture looks like in practice, with specific examples of how architectural choices cascade into performance problems or smooth user experiences.

Bad architecture: You're building a dashboard with multiple widgets that display different kinds of data. You decide to manage all the state in a single component at the root of the dashboard. This root component fetches all the data for all widgets on mount. It stores everything—data for each widget, loading states, error states, filter selections, sort orders, pagination state—in a massive state object. Each widget is a child component that receives its slice of data through props that are derived in the root component's render function. When any piece of state changes—a user changes a filter, data comes back from an API, a widget refreshes—the entire dashboard re-renders. All widgets re-render, even though only one widget's data changed. The derived data calculations run again for all widgets. The entire component tree gets processed. The UI feels sluggish because every interaction causes a large re-render cycle.

Good architecture: The same dashboard, but structured differently. Each widget is a self-contained component that manages its own data fetching, loading states, and error handling. The root dashboard component just renders the widgets and provides shared context like the current user or theme. Each widget only re-renders when its own state changes. When one widget fetches new data, the others are unaffected. Filtering a widget only re-renders that widget. The dashboard is fast because work is localized—only the part of the UI that needs to update actually updates.

Bad architecture: You have a form with twenty fields. Every field is controlled—you have state for each field value. You lift all this state to the form's parent component. You have an onChange handler that updates state on every keystroke. Because all the state is in the parent, every keystroke triggers a re-render of the entire form and all twenty fields. Each field re-renders because it receives new props on every update, even if its own value didn't change. The form feels laggy because you're processing twenty field components on every keystroke. You try to fix it by wrapping each field in React.memo, but that doesn't help much because the field components are receiving new onChange handlers on every render (they're defined inline in the parent's render function). You add useCallback to stabilize the handlers, which helps some, but the form is still slow because you're fundamentally doing too much work.

Good architecture: Each form field is its own component with its own internal state. Fields are uncontrolled by default—they manage their own values until form submission. When you need to validate or submit the form, you read the values from the fields. This way, typing in one field only re-renders that field. The rest of the form is unaffected. The form feels instant because each interaction is localized to a single component. For fields that need to interact with each other (like a "password confirmation" field that needs to validate against the "password" field), you lift just that shared state to the nearest common ancestor, not all state to the form root.

Bad architecture: You need to share some user data across multiple parts of your application. You create a UserContext that includes everything about the user—profile data, preferences, recently viewed items, shopping cart, notification settings, UI state like which modals are open, everything. You wrap your entire application in this UserContext provider. Now you have dozens of components throughout your app consuming this context with useContext(UserContext). When any piece of the user data updates—the user changes their theme preference, adds an item to their cart, dismisses a notification—every single component consuming UserContext re-renders. A user typing in a search box that updates a "recent searches" array in the UserContext causes your navigation bar, your sidebar, your footer, and twenty other components to re-render even though they don't care about recent searches. You try to fix this by splitting the context into smaller pieces, but now you have eight different context providers nested at the root, and you're not sure which components should consume which contexts. The performance is still bad because your context values aren't stable—you're creating new objects on every render, which causes all consumers to re-render even when the actual data hasn't changed.

Good architecture: You create multiple, focused context providers. AuthContext for authentication state (user ID, auth token, login/logout functions). ThemeContext for theme preferences. CartContext for shopping cart state. Each context has a single, well-defined purpose. Context values are stable—you use useMemo to ensure that the context value object only changes when the actual data inside it changes. Components only consume the contexts they actually need. Your navigation bar consumes AuthContext and ThemeContext but not CartContext. Your product list doesn't consume any contexts at all—it receives data through props. When cart data changes, only components that care about the cart re-render. The rest of your application is unaffected.

Bad architecture: You're building a data table with sorting, filtering, and pagination. All the logic lives in one giant component. The component maintains state for the current page, sort column, sort direction, filter values, and the data itself. Every time any of these change, the entire table re-renders. You're rendering all rows in the dataset, even though only 20 are visible at a time—you're just hiding the others with CSS. The row rendering logic is complex, with lots of conditional formatting based on cell values, and it's all inline in the main component's render function. The component is 800 lines long. Sorting the table feels slow because you're re-rendering potentially thousands of hidden rows. Changing filters is slow because you're running the filter logic on the entire dataset and then re-rendering everything. The code is hard to modify because all the logic is tangled together.

Good architecture: The table is composed of several focused components. A Table component handles layout. A TableHeader component handles the column headers and sorting UI. A TableBody component handles rendering visible rows. A useTableData custom hook handles the data fetching, filtering, sorting, and pagination logic. The hook returns only the data for the current page, already filtered and sorted. Row components are simple, memoized presentational components. When you sort, the hook recalculates which rows should be visible, and only those rows get rendered. The table only renders what's actually visible on screen—20 rows, not 2000. Each piece of the system has a clear responsibility. The code is maintainable because you can modify the filtering logic without touching the rendering code, or update how rows display without touching the data management logic.

Bad architecture: You have a complex workflow with multiple steps—a checkout process, a multi-step form, a wizard interface. You manage all the state for all steps in a single reducer at the root. Every step is a separate component, but they all receive the entire state object as props. You pass down dispatch functions to allow steps to update state. As users move through the workflow, you keep all previous steps mounted in the DOM (just hidden with display: none) because you need to preserve their state. The entire workflow re-renders whenever state changes, even though only one step is visible at a time. You have conditional logic scattered throughout to handle different workflow states. Some steps have their own internal state that conflicts with the centralized state, leading to bugs where the UI gets out of sync.

Good architecture: Each step is a self-contained component that manages its own internal state. A workflow manager component handles navigation between steps and maintains only the minimal shared state (current step index, data that needs to persist across steps). When you navigate to a step, that step mounts, initializes its state from any persisted data, and operates independently. When the step completes, it calls a callback with its final data, which the workflow manager stores. Previous steps unmount—they're not kept in the DOM. This keeps memory usage down and ensures only the current step re-renders when its state changes. The workflow manager doesn't know or care about the internal workings of each step; it just coordinates the flow.

The Truth Developers Don't Want to Hear

Here's where I'm going to be blunt, because I think this needs to be said: blaming React for performance problems is often intellectual laziness. It's easier to say "React is slow" than to admit "I structured this poorly" or "I don't fully understand how React works" or "I made architectural decisions that seemed fine at the time but don't scale."

I get it. I really do. When you're under pressure to ship features, when you're working with tight deadlines, when you're learning React while building production applications, you make mistakes. You take shortcuts. You do things the quick way instead of the right way. You think "I'll refactor this later" but later never comes because there's always another feature, another deadline, another fire to put out. Before you know it, you have an application with architectural problems baked into its foundation, and those problems are now incredibly difficult to fix because so much code depends on the current structure.

But here's the thing: acknowledging this is the first step to actually getting better. Every senior React developer I know has built terrible React applications. We've all created components that were too big, state that was too global, re-renders that were too frequent. We've all looked at our own code six months later and wondered what we were thinking. The difference between a developer who grows and one who stagnates is whether they learn from these mistakes or just keep blaming the tools.

React gives you an enormous amount of rope to hang yourself with. It's not opinionated enough to prevent you from making bad architectural decisions. It won't stop you from putting everything in global state. It won't force you to split up your 1000-line component. It won't automatically optimize away your unnecessary re-renders. This is both a strength and a weakness. The flexibility that makes React powerful for building complex UIs also makes it easy to build poorly-performing UIs if you don't understand what you're doing.

Some frameworks are more opinionated and thus harder to misuse. Svelte compiles away a lot of potential performance problems. Solid.js has fine-grained reactivity that makes unnecessary re-renders much less common. Angular has strong conventions about how to structure applications. These frameworks make certain classes of mistakes harder to make, and that's genuinely valuable, especially for teams that don't have deep expertise in frontend performance.

But switching frameworks isn't a magic solution. If you don't understand why your React application is slow, you'll probably build a slow Svelte application too, just with different performance characteristics and different footguns. The fundamental principles of good frontend architecture—component design, state management, data flow, performance-conscious rendering—apply regardless of which framework you use. A developer who doesn't understand these principles will struggle with any framework.

I've seen teams rewrite applications from React to something else, and you know what happens? Sometimes they get better performance, because they're effectively doing a full architectural redesign and they learn from their mistakes. Sometimes they get worse performance, because they bring their bad habits to the new framework. And sometimes they get the same performance, because the framework was never the bottleneck—their API design, their data fetching strategy, their component architecture, those were the real problems, and those problems follow you regardless of which view layer you use.

React's performance characteristics are well-understood. The rendering model is documented. The reconciliation algorithm is explained. The profiling tools exist. The best practices are written down, discussed in conferences, debated in blog posts. If your React application is slow, the information you need to fix it is available. What's required is the intellectual honesty to diagnose the real problem instead of blaming the framework, and the discipline to actually refactor your architecture instead of just slapping useMemo on everything and hoping it gets better.

I say this with empathy, not judgment, because I've been there. I've been the developer who thought Redux would solve all my state management problems, only to discover I'd just moved the complexity to a different place. I've been the developer who wrapped every component in React.memo because I read that it improves performance, only to discover I'd made my code harder to maintain for negligible benefit. I've been the developer who blamed React's re-rendering model for my application's slowness when the real problem was that I was fetching data inefficiently and calculating expensive derived state on every render.

The path to building fast React applications isn't about learning secret optimization tricks or advanced techniques that only senior developers know. It's about understanding the fundamentals deeply, thinking carefully about architecture before you build, measuring instead of guessing, and being willing to refactor when you realize your initial approach doesn't scale. It's about being honest about what you don't know and taking the time to learn it properly instead of cargo-culting patterns you don't understand.

Closing: React Is Not the Problem

So let's bring this all back to where we started. React is not slow. React is a tool, and like any tool, its performance depends on how you use it. A hammer isn't defective because you tried to use it to cut wood. A car isn't slow because you left the parking brake on. And React isn't slow because you structured your application in a way that causes excessive re-renders, poor data flow, and architectural complexity that works against React's design.

The React applications you've used that feel fast—and there are plenty of them, from complex enterprise applications to consumer products used by millions—aren't fast because their developers discovered some secret optimization technique. They're fast because they were built with solid architectural principles: components with clear responsibilities, state that lives at the appropriate level, data flow that's predictable and efficient, and optimization applied judiciously where measurement shows it matters.

When you encounter a performance problem in a React application, the question shouldn't be "Is React the right choice?" The question should be "What architectural decision led to this problem?" Is state lifted too high? Are components doing too much? Is data being fetched inefficiently? Are expensive calculations running on every render? Is the component tree structure causing excessive re-renders? These are the real questions, and these are the questions that have actionable answers.

Building fast React applications is a skill, and like any skill, it requires learning, practice, and sometimes painful mistakes. You have to build something slow to really understand why it's slow. You have to debug performance problems to internalize how React's rendering model works. You have to refactor bad architecture to appreciate good architecture. This learning process is frustrating, but it's also how you get better.

The good news is that React gives you all the tools you need to build performant applications. The reconciliation algorithm is efficient. The hooks API gives you fine-grained control over rendering and side effects. The profiling tools let you see exactly what's happening. The component model encourages good architectural patterns if you're thoughtful about how you use it. React's not perfect—no framework is—but it's more than capable of handling complex, performant UIs when used well.

So the next time you're tempted to blame React for performance problems, take a step back. Profile your application. Identify what's actually slow. Understand why it's slow. Then fix your architecture. Split up that massive component. Move that state closer to where it's used. Stop re-rendering components that don't need to update. Optimize your data fetching. Apply memoization where it actually matters. Make conscious, measured architectural decisions instead of reaching for patterns because you saw them in a tutorial.

React is not slow. Your architecture is. And the beautiful thing about architecture is that you can change it. It takes work, it takes learning, it takes discipline, but you can do it. You can build fast React applications. Millions of developers have done it before you, and you can too.

The framework isn't the limitation. Your understanding and application of good architectural principles is the limitation. Invest in deepening that understanding, building that skill, developing that discipline. Measure, learn, refactor, improve. That's the path to building React applications that perform well.

React is a powerful, flexible, and yes, fast tool for building user interfaces. Use it well.

Hanzla BaigFollow

Front-end dev & Founder at TheBitForge. I ship clean UI with HTML, CSS, JS, and a splash of Java—building fast, accessible web products with old-school craft and a future-first mindset.

Thanks for reading! 🙏🏻 I hope you found this useful ✅ Please react and follow for more 😍 Made with 💙 by Hanzla Baig

The Death of Vanilla JavaScript (And Why It's Actually Stronger Than Ever)

Hanzla Baig — Wed, 14 Jan 2026 17:18:57 +0000

Every few months, someone on Twitter declares that Vanilla JavaScript is dead. They'll post a screenshot of a basic DOM manipulation task, compare it to a React hook, and triumphantly proclaim that "nobody writes JavaScript like this anymore." The tweet gets thousands of likes from developers who've never actually shipped a production app without a framework. The comments section fills with hot takes about how "you'd be insane to start a project without Next.js" or how "raw JavaScript is just technical debt waiting to happen."

And yet, here's the thing nobody wants to admit: Vanilla JavaScript isn't just alive—it's thriving in ways that would have seemed impossible a decade ago. The JavaScript that exists in browsers today bears almost no resemblance to the clunky, inconsistent mess we were dealing with in 2010. The language has evolved so dramatically, and browser APIs have become so powerful, that the entire premise of the "Vanilla JS is dead" argument falls apart the moment you actually examine it.

I've been writing JavaScript professionally since the jQuery era, back when cross-browser compatibility was a legitimate nightmare and you couldn't trust that basic array methods would work the same way in IE8 as they did in Firefox. I've lived through AngularJS's meteoric rise and equally dramatic fall. I've watched React go from a weird library that mixed HTML with JavaScript to the de facto standard for frontend development. I've seen developers add hundreds of megabytes of dependencies to projects that could have been solved with fifty lines of code. And through all of this, I've watched Vanilla JavaScript quietly become more powerful, more elegant, and more practical than it's ever been.

The narrative that Vanilla JavaScript is dead isn't just wrong—it reveals a fundamental misunderstanding of what JavaScript actually is, how frameworks work, and where the web platform is heading. This isn't about being anti-framework or pro-framework. It's about understanding that the foundation of everything we build on the web is stronger than ever, and that dismissing it is like a carpenter saying they don't need to understand wood because they have power tools.

Why People Keep Declaring "Vanilla JS is Dead"

The declaration that Vanilla JavaScript is dead happens so frequently that it's almost become a meme in developer circles. But these proclamations don't come from nowhere. They emerge from a very specific set of conditions, mindsets, and industry pressures that have shaped how we think about frontend development over the past fifteen years.

First, there's the framework evangelism industrial complex. Every major framework has a massive ecosystem of developers, companies, consultants, course creators, and influencers whose livelihoods depend on that framework remaining relevant and growing. When you've built your career on React, you're not going to write blog posts about how sometimes you don't need React. When your company sells enterprise support for Angular, you're not going to tell potential clients that their landing page could be built in twenty lines of JavaScript. The incentive structure pushes people toward maximalist positions where the framework becomes the answer to every question, regardless of whether it's the right tool for the job.

Then there's the genuine historical pain that led us to frameworks in the first place. If you started writing JavaScript in 2008, you experienced real trauma. Browser inconsistencies weren't edge cases—they were the entire job. You couldn't use modern array methods because IE didn't support them. You couldn't trust that event listeners would work the same way across browsers. You had to polyfill everything, feature-detect constantly, and test in virtual machines running ancient versions of Internet Explorer. jQuery wasn't just convenient; it was essential survival gear in a hostile environment. When frameworks came along promising to abstract away all of this pain, they weren't offering a luxury—they were offering salvation.

This historical context matters because it created a generation of developers who learned to distrust the web platform itself. If you spent years getting burned by browser inconsistencies, you developed a deep skepticism about using native APIs directly. The mental model became "the browser gives you a broken platform, frameworks fix it." Even though browsers have converged dramatically and modern JavaScript is incredibly consistent across platforms, that trauma lingers. Developers who experienced the bad old days carry a wariness that gets passed down to newer developers who never actually experienced the problems that justified it.

There's also the complexity addiction that plagues our industry. Somewhere along the way, we collectively decided that sophisticated engineering meant complex engineering. Using a framework signals that you're building something serious and professional. Writing plain JavaScript can feel like admitting you're working on something simple or trivial. This is absurd, but it's a real psychological force. I've been in architecture meetings where suggesting a Vanilla JavaScript solution was met with skepticism not because it wouldn't work, but because it seemed too simple. "Are we really going to ship this without a build step?" someone asked, as if compilation was inherently valuable rather than a means to an end.

The tutorial and bootcamp ecosystem reinforces this by teaching React or Vue as if they're JavaScript itself. New developers often learn JSX before they learn the DOM API. They learn useState before they understand how JavaScript handles state. They're taught that "modern web development" means npm install, webpack config, and component lifecycles. When they finally encounter actual JavaScript—the language that runs in browsers without any transformation—it feels alien and primitive. Of course they think Vanilla JS is dead; they were never taught that it was alive.

Social media amplifies all of these forces by rewarding hot takes over nuance. "You should carefully evaluate whether your project needs a framework" doesn't get retweeted. "Vanilla JS is dead and if you disagree you're stuck in 2010" gets engagement. The algorithm rewards certainty and controversy, not careful reasoning about trade-offs. So we end up with an online discourse that presents every technical decision as a binary choice between enlightened modernism and backwards incompetence.

But perhaps the most insidious reason people declare Vanilla JavaScript dead is that it lets them avoid confronting uncomfortable questions about the code they're writing. If Vanilla JS is dead, you don't have to ask whether that 500KB React application really needed to be a React application. You don't have to wonder if you actually understand JavaScript or just understand how to shuffle React components around. You don't have to reckon with the fact that you might be over-engineering solutions because that's what you know how to do, not because it's what the problem requires.

How Frameworks Created the Illusion of Vanilla JS Dying

The story of how frameworks convinced everyone that Vanilla JavaScript was dying is fascinating because it's not really a story about technical superiority. It's a story about marketing, timing, community building, and solving problems that happened to be very visible to the people who make technology decisions.

When React emerged from Facebook in 2013, it didn't succeed because it was objectively better at everything. It succeeded because it solved specific, painful problems that large companies with complex applications were struggling with. Managing state across a huge application was genuinely difficult with jQuery or Backbone. Keeping the UI in sync with data as it changed required a lot of careful, error-prone manual work. React's virtual DOM and one-way data flow offered a mental model that made these problems much more manageable. For Facebook's newsfeed or Instagram's photo viewer, React was legitimately revolutionary.

But here's where the illusion begins. The problems React solved were real problems for a specific class of applications—large, stateful, interactive web apps that needed to update frequently based on user actions and live data. The solution React offered was then generalized to mean "this is how you should build for the web now." Marketing pages, blogs, documentation sites, landing pages—everything started getting built with React not because React was the best tool for those jobs, but because React had won mindshare for web development generally.

Frameworks are incredibly good at making their use cases look universal. React's documentation and ecosystem show you how to build everything in React. Next.js shows you how to build static sites, server-rendered apps, and API routes all within the React paradigm. The implicit message is that you can build your entire web presence without ever leaving this ecosystem. And that's true—you can do it. But whether you should is a different question that gets lost in the excitement of a unified, well-documented system.

The framework ecosystem also benefits enormously from the showcase effect. When Airbnb or Netflix builds something impressive with React, it becomes a case study. "Look what you can build with this technology!" The fact that Airbnb and Netflix have hundreds of engineers, sophisticated build pipelines, and problems that actually justify framework complexity gets glossed over. Small teams and individual developers see these showcases and think "I should build like the big companies build." But big companies build the way they do because they have big company problems. Your five-page marketing site isn't Netflix.

Frameworks also created an entire economy around themselves that has an interest in perpetuating the idea that they're essential. There are React courses, React bootcamps, React consultants, React component libraries, React job postings, React conferences. None of these things have an incentive to tell you that sometimes you don't need React. When your entire business model is based on teaching people how to use a framework, every problem starts to look like it needs that framework.

The tooling around frameworks created another layer of illusion. When you can run "create-react-app" and get a complete development environment with hot reloading, linting, testing infrastructure, and production builds, it feels magical. When you compare that to starting a Vanilla JavaScript project—just an HTML file and a script tag—it feels primitive by comparison. But this comparison is misleading. The Vanilla JavaScript approach isn't primitive; it's appropriate for its use case. You don't need hot module replacement to build a form that validates input. You don't need a sophisticated build pipeline to add an interactive widget to a static page.

The framework community also developed sophisticated rhetoric that painted Vanilla JavaScript as the past and frameworks as the future. "Don't reinvent the wheel" became a thought-terminating cliché that shut down discussions about whether you actually needed the wheel someone else built. "Best practices" became synonymous with "what the framework does," as if there was some objective standard being followed rather than just the conventions of a particular tool. "Modern web development" came to mean development with a framework, implicitly categorizing everything else as outdated.

Perhaps most importantly, frameworks became good at hiding their own complexity behind abstractions. When you write React, you're not thinking about the thousands of lines of code in the React library itself. You're not considering the Babel transforms turning your JSX into function calls. You're not worrying about the webpack configuration that bundles everything together. All of that is abstracted away, making the framework feel simple even though the total system complexity is enormous. Meanwhile, Vanilla JavaScript forces you to be explicit about everything, which can feel more complex even when the total amount of code is a fraction of what the framework ships.

This created a perverse situation where adding a framework made projects feel simpler in some ways—you had clearer patterns to follow, better documentation, more community support—even as it made them objectively more complex in terms of dependencies, build steps, and code that needed to run. The cognitive load shifted from understanding the web platform to understanding the framework, and because the framework made that learning path smoother, it felt like progress.

The Historical Evolution of JavaScript and Browser APIs

To understand why Vanilla JavaScript is stronger than ever, you need to understand where it came from and how dramatically it's evolved. The JavaScript that exists in browsers today is almost unrecognizable compared to the language we were working with fifteen years ago, and the browser APIs available to us have expanded in ways that would have seemed like science fiction in the jQuery era.

JavaScript started life as a language hastily created in ten days by Brendan Eich at Netscape, designed to make web pages more interactive without requiring Java applets. For years, it was treated as a toy language, something you used for form validation and image rollovers but not for serious application development. It had serious design flaws—implicit type coercion that made no sense, a "this" keyword that confused everyone, no proper module system, and a standard library that was laughably incomplete compared to languages like Python or Ruby.

Browser inconsistencies made everything worse. Internet Explorer had its own ideas about how the DOM should work. Event handling was different across browsers. Basic things like adding event listeners required checking which browser you were in and calling different methods accordingly. CSS selectors couldn't be trusted. Ajax was revolutionary when it arrived, but even that required browser detection to construct the XMLHttpRequest object properly. Writing cross-browser JavaScript wasn't just difficult—it was a specialized skill that required memorizing dozens of browser quirks and maintaining mental catalogs of what worked where.

jQuery emerged in 2006 as a response to this chaos, and it was genuinely revolutionary. It provided a consistent API that worked the same way everywhere. It made DOM manipulation simple and intuitive. It handled Ajax in a way that didn't require you to think about browser differences. For nearly a decade, jQuery was so ubiquitous that many developers thought of it as synonymous with JavaScript itself. "I know jQuery" was an acceptable answer to "Do you know JavaScript?" because in practical terms, you couldn't do client-side web development without it.

But while jQuery was smoothing over browser inconsistencies, something more fundamental was happening. Browser vendors were starting to take JavaScript seriously as an application development platform. Chrome launched in 2008 with the V8 engine, bringing massive performance improvements. Node.js arrived in 2009, proving that JavaScript could be fast enough for server-side work. These events triggered an explosion of interest in JavaScript as a real programming language, not just a browser scripting toy.

ECMAScript 5, finalized in 2009, began the language's transformation. It added strict mode, proper accessor properties, array methods like map and filter, and JSON support. ES5 was the first version of JavaScript that felt like it had been designed rather than accidentally created. Then ES6, officially called ECMAScript 2015, arrived like a tidal wave. Let and const for proper variable scoping. Arrow functions. Classes. Promises for handling asynchronous operations. Template literals. Destructuring. Default parameters. The spread operator. Modules. ES6 took JavaScript from a language with significant warts to a legitimately pleasant programming language that could stand alongside Python, Ruby, or any other modern language.

But the really dramatic change was happening at the browser API level. The DOM API, which had been a nightmare to work with directly, got massively better. querySelector and querySelectorAll gave us jQuery's selector syntax natively. addEventListener worked consistently. The Fetch API provided a modern, promise-based way to make HTTP requests. The Intersection Observer API made scroll-based animations and lazy loading trivial. The Web Animations API gave us sophisticated animation control. The Resize Observer, Mutation Observer, and Performance Observer APIs provided hooks into browser behavior that previously required hacky workarounds.

Browser vendors also converged on standards in a way that seemed impossible during the IE6 era. When Microsoft abandoned Internet Explorer and rebuilt Edge on Chromium, it eliminated the last major source of browser inconsistency. Safari occasionally lags behind, but even Safari implements modern standards consistently. Features that make it into the specification now work across browsers much faster than they used to. The days of waiting years for IE to implement basic features are over.

ES2016 through ES2023 have continued adding thoughtful, powerful features. Async/await made asynchronous code readable. Optional chaining and nullish coalescing eliminated huge amounts of defensive coding. Dynamic imports enabled code splitting without build tools. Private class fields gave us real encapsulation. Top-level await removed artificial async function wrappers. These aren't just syntactic sugar—they're fundamental improvements to how we express ideas in code.

The web platform also gained capabilities that previously required native apps. Service Workers enabled offline functionality and background sync. IndexedDB provided client-side databases. The Web Storage API (localStorage and sessionStorage) made client-side persistence simple. The Geolocation API, Web Audio API, Canvas API, WebGL, and WebRTC opened up entire categories of applications that used to require plugins or native code. Progressive Web Apps proved you could build app-like experiences with just web technologies.

What's remarkable about this evolution is how it fundamentally changed the value proposition of JavaScript libraries. When jQuery emerged, the web platform was legitimately broken and needed fixing. When React emerged, building interactive applications with vanilla DOM APIs was genuinely painful. But as the platform improved, the gap between what you could do with a framework and what you could do with plain JavaScript narrowed dramatically. The frameworks didn't get worse—the platform caught up.

Today's JavaScript is a mature, thoughtfully designed language with a rich standard library, consistent cross-browser support, and a specification process that moves features from proposal to implementation in a few years rather than a decade. The browser APIs available to you rival what you'd find in native development environments. The need for abstraction layers to smooth over problems isn't gone, but it's much smaller than it used to be. And this is why the conversation about Vanilla JavaScript being dead is so misguided—it's based on a mental model of what JavaScript and browsers were like ten years ago, not what they actually are today.

What "Vanilla JavaScript" Actually Means Today

There's a frustrating ambiguity in how people use the term "Vanilla JavaScript" that muddles any discussion about its relevance or death. When someone declares Vanilla JS dead, what exactly are they declaring dead? The language specification? The DOM API? The absence of frameworks? The lack of a build step? Depending on who you ask, you'll get wildly different definitions, and this definitional chaos makes the entire debate almost meaningless.

In its purest form, Vanilla JavaScript means writing JavaScript that runs directly in the browser without any transformation step, using only APIs that are part of the web platform specification. It's JavaScript as the browser understands it, not JavaScript that needs to be compiled, transpiled, or bundled before it can execute. This is the strictest definition, and it's what most people mean when they contrast Vanilla JS with framework-based approaches.

But even this seemingly simple definition gets complicated quickly. Does using ES2022 features count as Vanilla JavaScript if you need to transpile for older browsers? What about using import statements, which are technically part of JavaScript but often require a bundler for practical use? What if you're writing JavaScript that runs natively in the browser but you're using TypeScript for development? Is that Vanilla because the output is plain JavaScript, or not Vanilla because you're using a build step?

In practical terms, modern Vanilla JavaScript usually means writing code that directly manipulates the DOM, uses native browser APIs, and handles state and updates without a framework abstraction layer. You're using querySelector instead of React's virtual DOM. You're using addEventListener instead of Vue's v-on. You're manually creating and updating elements instead of relying on a framework's reactivity system. You're organizing your code with JavaScript modules, classes, or plain functions rather than framework-specific components.

This approach doesn't mean rejecting all tools or working primitively. Modern Vanilla JavaScript development might include TypeScript for type safety, a bundler like esbuild for module resolution, a development server with live reload, and even some small utility libraries for specific tasks. What makes it Vanilla isn't the absence of any tooling whatsoever—it's that you're working directly with web platform APIs rather than through a framework's abstraction layer.

The confusion around terminology also stems from how frameworks market themselves. When React says it "just writes JavaScript," they're not technically wrong—JSX compiles to JavaScript function calls. But it's not Vanilla JavaScript because you're not working with the DOM API—you're working with React's virtual DOM. When Svelte says it "compiles away the framework," they're highlighting that the output is more minimal than React's, but you're still writing Svelte component syntax that gets compiled to DOM manipulation code, not writing that code directly.

Another dimension of confusion comes from the implied value judgments in the term "Vanilla." Calling something vanilla can sound like calling it plain, boring, or basic—the default option you settle for when you don't want anything fancy. But in the context of JavaScript, Vanilla doesn't mean basic or limited. It means direct, foundational, and unadulterated. Vanilla JavaScript in 2025 is incredibly powerful and expressive. The "vanilla" label doesn't describe capability; it describes the absence of an intermediary framework layer.

Some people draw the Vanilla JavaScript line at dependencies. If you npm install anything, you're no longer writing Vanilla JavaScript. This is too strict to be useful. Using a date library like date-fns or a utility library like lodash doesn't fundamentally change your relationship with the web platform. You're still writing code that directly manipulates the DOM and uses browser APIs. The dependency just helps you with a specific task, like parsing dates or deep-cloning objects, that would be tedious to implement yourself.

Others define Vanilla JavaScript more by what it isn't than what it is. It's not React, not Vue, not Angular, not Svelte. This negative definition is probably the most common usage in practice. When developers say they built something in Vanilla JavaScript, they usually mean they built it without a major frontend framework—the implementation details of exactly how they did it might vary considerably.

The most useful way to think about Vanilla JavaScript today is as a development philosophy rather than a rigid technical category. It's the philosophy that you should work as directly as possible with the web platform, using abstractions only when they provide clear value rather than by default. It means understanding what browsers actually do and choosing to work with those capabilities directly rather than through multiple layers of framework machinery.

This philosophy doesn't mean never using frameworks. It means understanding when frameworks are solving real problems for you and when they're just adding indirection. It means being comfortable reading MDN documentation about DOM APIs instead of immediately reaching for a React tutorial. It means trusting that the web platform is powerful enough to handle many common tasks without additional tooling.

What makes the definitional debate particularly important is that people often talk past each other because they're using different definitions. When a senior developer says "you don't need a framework for that," they might mean "you can accomplish this with fifty lines of direct DOM manipulation." When a newer developer hears that, they might think "you want me to build this without any tools at all, like some kind of masochist." The senior dev is arguing against unnecessary framework overhead; the junior dev is hearing an argument for punishing primitivism. Same words, completely different meanings.

So when we talk about whether Vanilla JavaScript is dead or alive, we need to be clear about what we're actually discussing. Are we talking about the language itself? The DOM API? The practice of building applications without frameworks? The absence of build tools? Each of these is a separate question with a different answer. The language has never been healthier. The DOM API has never been more capable. The practice of building without frameworks is having a renaissance. And build tools remain useful for certain tasks regardless of whether you're using a framework.

How Modern Frameworks Are Built on Top of Vanilla JS

Here's an uncomfortable truth that gets glossed over in most discussions about frameworks versus Vanilla JavaScript: frameworks are Vanilla JavaScript. When you write React code, you're ultimately generating JavaScript that manipulates the DOM. When Vue updates the UI, it's calling the same browser APIs you would call if you were doing it manually. Svelte's compiler output? Vanilla JavaScript function calls that create and update DOM elements. Every framework, no matter how sophisticated its abstractions, eventually boils down to plain JavaScript doing plain DOM manipulation.

This isn't just a pedantic technical point—it's fundamental to understanding what frameworks actually do and whether you need them. Frameworks aren't magic portals to a different programming reality. They're layers of abstraction that sit between your code and the browser's APIs. They provide different mental models, better ergonomics, and automated solutions to common problems, but underneath all of that, they're just doing what you could do yourself if you had enough time and patience.

React's virtual DOM is a perfect example. The concept sounds revolutionary—instead of directly manipulating the DOM, you declare what you want the UI to look like, and React figures out the minimal set of changes needed to make the actual DOM match. But what is React actually doing under the hood? It's maintaining a JavaScript object representation of your UI, diffing it against the previous version when state changes, and then calling methods like createElement, appendChild, removeChild, and setAttribute to update the real DOM. These are the exact same methods you'd use if you were writing Vanilla JavaScript. React just automates the process of figuring out which methods to call and when.

This becomes obvious if you look at React's compiled output. That JSX you're writing gets transformed by Babel into React.createElement calls, which return plain JavaScript objects describing what elements you want. React then takes those objects and eventually calls document.createElement and other DOM APIs to build the actual elements. You could hand-write all of those createElement calls yourself if you wanted to. You could manually track your state and figure out what DOM updates are needed when state changes. It would be tedious and error-prone, which is exactly why React exists, but there's no magic happening—just automation of repetitive tasks.

Vue takes a slightly different approach with its template compiler, but the end result is the same. Your template syntax gets compiled into render functions that create and update DOM elements. Vue's reactivity system, which automatically tracks dependencies and updates the UI when data changes, is implemented with JavaScript Proxies or Object.defineProperty depending on the browser. These are standard JavaScript features available to any code. Vue just built a sophisticated system on top of them.

Svelte's "disappearing framework" pitch highlights this particularly well. Svelte compiles your components into highly optimized vanilla JavaScript that directly manipulates the DOM. There's no runtime framework sitting between your code and the browser—just the compiled output doing direct DOM manipulation. This is possible precisely because frameworks are just abstractions over things you could do manually. Svelte takes the abstraction at compile time instead of runtime, but it's still ultimately generating function calls to DOM APIs.

Understanding this relationship between frameworks and the underlying platform is crucial for making good technical decisions. When you choose a framework, you're not choosing a different technology—you're choosing to have a library automate certain tasks for you. The question isn't whether the framework can do something the platform can't; the question is whether the framework's automation provides enough value to justify its cost in complexity, bundle size, and learning curve.

This is also why the "frameworks versus Vanilla JavaScript" framing is somewhat misleading. It's not really a competition between different technologies. It's a question of whether you want to work directly with the platform APIs or whether you want to work through an abstraction layer that makes certain tasks easier but introduces additional complexity. Both approaches are ultimately using the same underlying technology.

The fact that frameworks are built on Vanilla JavaScript also means that understanding the underlying platform makes you better at using frameworks. When you understand how the DOM actually works, you understand what React's virtual DOM is optimizing. When you know how events propagate through the DOM, you understand why Vue's event modifiers work the way they do. When you're comfortable with JavaScript's closure semantics, React hooks make more sense. Framework documentation often assumes this foundational knowledge, and developers who lack it struggle more with framework concepts than they need to.

This becomes particularly relevant when debugging. Framework abstractions are wonderful when everything works, but when something goes wrong, you need to understand what's happening at the lower level. React's error messages don't always make sense if you don't understand how JavaScript's component model relates to the DOM. Vue's reactivity caveats require understanding how JavaScript proxies work. Svelte's approach to stores assumes knowledge of JavaScript's observer pattern. You can't effectively debug the abstraction without understanding what it's abstracting.

There's also the very practical consideration that frameworks change much faster than the web platform. React has gone through class components, mixins, higher-order components, render props, and hooks. AngularJS became Angular 2, which was a complete rewrite. Backbone, Ember, Knockout, and countless other frameworks rose and fell. But the DOM API that existed ten years ago still works the same way today. Functions, objects, closures, and prototypes haven't changed. Learning the platform gives you knowledge that transfers regardless of which framework is currently fashionable.

The relationship between frameworks and vanilla JavaScript also helps explain why frameworks keep getting smaller and closer to the platform. Svelte compiles away the framework. Preact is React's API with a minimal runtime. Solid is React-like but uses fine-grained reactivity. Lit builds on web components. The trend isn't toward more abstraction and more distance from the platform—it's toward thinner abstractions that stay closer to how the browser actually works. This suggests that the platform itself has gotten good enough that heavy abstraction is less necessary.

Performance, Bundle Size, and Dependency Fatigue

One of the most compelling arguments for Vanilla JavaScript is also the most obvious: it weighs nothing. When you write code that directly uses browser APIs, you're not downloading, parsing, or executing any additional library code. Your JavaScript is just your JavaScript. There's no React runtime to initialize, no Vue compiler overhead, no framework tax being paid before your actual application logic even starts running. For many projects, this difference is substantial enough to completely change the user experience.

The numbers are striking when you actually look at them. Create React App, one of the most popular ways to bootstrap a React project, generates a production build that starts around 50-60 KB gzipped for the absolute minimum "Hello World" application. That's before you've added any libraries, routing, state management, or actual application code. Next.js adds even more overhead despite its optimizations. Vue is somewhat lighter but still weighs in at roughly 30 KB gzipped for the runtime. These might seem like small numbers in the era of megabyte JavaScript bundles, but they represent the baseline tax you're paying before you've accomplished anything.

Contrast this with the equivalent Vanilla JavaScript version. A simple interactive application—form validation, dynamic updates, API calls—might be just a few kilobytes total. I've built entire interactive dashboards in under 10 KB of JavaScript by using native browser APIs directly. The user's browser downloads and parses that code orders of magnitude faster than it would handle even the most minimal framework setup. On slow connections or low-end devices, this difference is the difference between a site that feels instant and one that shows a loading spinner.

But the performance story goes deeper than just bundle size. Framework initialization has a real cost. React needs to build its virtual DOM representation of your UI. Vue needs to set up its reactivity system. Angular needs to bootstrap its entire dependency injection system and change detection machinery. All of this happens before your application code starts running, and on slower devices, it can take hundreds of milliseconds or even seconds. With Vanilla JavaScript, there's no initialization phase—your code starts executing immediately.

The ongoing runtime performance is another consideration that's often overlooked. Every time state changes in a React application, React needs to run its reconciliation algorithm to figure out what changed and what DOM updates are needed. This is impressively fast for what it's doing, but it's still overhead that doesn't exist when you're directly updating the DOM. If you know exactly which element needs to change because the user clicked a specific button, directly updating that element is always going to be faster than triggering a framework's update cycle.

Now, framework evangelists will correctly point out that you can shoot yourself in the foot with Vanilla JavaScript and end up with worse performance than a framework would give you. If you're constantly querying the DOM, forcing reflows, or doing inefficient updates, you'll create performance problems that a framework's optimized update cycle would have avoided. This is absolutely true. But it's also true that understanding performance and writing efficient code is a skill worth developing, and frameworks that hide these concerns don't make you better at it—they just delay when you need to learn it.

The dependency fatigue problem is closely related but extends beyond just performance. Modern JavaScript projects routinely ship with hundreds or even thousands of dependencies. A typical React project might have react, react-dom, react-router, a state management library like Redux or Zustand, maybe Next.js, a CSS-in-JS solution, a form library, a data fetching library, a date library, and dozens of other packages. Each of these dependencies has its own dependencies, creating a dependency tree that can include hundreds of packages you've never heard of.

This creates several very real problems. First, there's the security surface area. Every dependency is code you're trusting, and every transitive dependency is code you're probably not even aware of. The infamous event-stream incident, where a malicious actor gained access to a widely-used npm package and injected cryptocurrency-stealing code, was possible precisely because of these deep dependency trees. Most developers have no idea what code they're actually shipping.

Second, there's the maintenance burden. When a security vulnerability is discovered in any package in your dependency tree, you need to update. But updating one package might break compatibility with another. You end up spending time managing dependencies instead of building features. The npm audit command that shows you security vulnerabilities often reveals dozens of issues in dependencies you've never directly touched. Fixing them requires understanding and updating parts of your stack that you might not even remember installing.

Third, there's the fragmentation and churn problem. The JavaScript ecosystem moves incredibly fast, and dependencies that were popular two years ago might be deprecated or abandoned today. Framework best practices change. Popular libraries get rewritten. The code you wrote last year using the recommended tools and patterns might be considered technical debt this year. With Vanilla JavaScript, the code you wrote five years ago using querySelector and addEventListener still works exactly the same way.

Fourth, there's the cognitive overhead of constantly learning new packages and their APIs. Every time you add a dependency, you're committing to learning its API, reading its documentation, understanding its quirks, and staying updated on its changes. This isn't free. It takes time away from understanding the actual web platform. I've met developers who could explain the nuances of React's useEffect hook dependencies but couldn't explain how event delegation works in the DOM. They've invested their learning time in framework-specific knowledge rather than transferable platform knowledge.

The irony is that many of these dependencies exist to smooth over problems that modern browsers have already solved or to provide features that are now available natively. Need to debounce a function? You can write that in ten lines instead of installing lodash. Need to make HTTP requests? The Fetch API is built into browsers. Need to observe element visibility for lazy loading? Intersection Observer is a native API. Need animations? CSS transitions and the Web Animations API are incredibly powerful. Each of these dependencies made sense when browsers were less capable, but many have outlived their necessity.

This isn't an argument that all dependencies are bad or that you should reimplement everything from scratch. Sometimes a dependency provides real value—sophisticated functionality that would take significant time to build correctly. Date-fns or Luxon for complex date manipulation makes sense. A well-tested validation library might be worth the weight. But the default assumption should be that you don't need a dependency until proven otherwise, not that you should reach for npm for every small problem.

The performance and dependency concerns also compound in ways that aren't always obvious. A slow initial load due to large bundles creates a bad first impression. Users bounce. Even if they stay, the bloated dependency tree means longer build times for developers, slower CI/CD pipelines, more things that can break during deployment, and more surface area for bugs. The cost isn't just paid once at load time—it's paid throughout the entire development and operational lifecycle.

When Vanilla JS Is the Right Choice vs When Frameworks Make Sense

The frustrating thing about technical debates is that they usually demand a more nuanced answer than either side wants to give. The truth about Vanilla JavaScript versus frameworks isn't that one is universally better—it's that each makes sense in different contexts, and the skill is knowing when to reach for which tool.

Vanilla JavaScript makes obvious sense for small, focused enhancements to otherwise static sites. If you have a marketing page that needs a newsletter signup form with some validation, adding React would be absurd. The form validation is maybe fifty lines of JavaScript. The entire page's JavaScript could be a few kilobytes. Bringing in a framework for this is like renting a bulldozer to dig a small hole in your backyard—technically you could do it that way, but why would you?

This pattern extends to any scenario where you're progressively enhancing server-rendered HTML. If your backend framework—Rails, Django, Laravel, whatever—is already generating complete HTML pages, and you just need to sprinkle in some interactivity, Vanilla JavaScript is the natural choice. Maybe you need an autocomplete on a search field. Maybe you want to validate forms client-side before submission. Maybe you need to lazy-load images as the user scrolls. These are all straightforward with a small amount of JavaScript using browser APIs directly.

Vanilla JavaScript also makes sense when performance is critical and you need every millisecond. A widget that gets embedded on other people's sites needs to load fast and have minimal impact. A critical above-the-fold component that affects Core Web Vitals metrics can't afford framework overhead. Interactive data visualizations that need to render thousands of elements smoothly benefit from direct DOM manipulation that avoids framework reconciliation. In these scenarios, the microseconds matter, and the difference between framework overhead and direct API calls adds up.

Projects where bundle size is severely constrained are another clear win for Vanilla JavaScript. If you're building for users in regions with poor connectivity, every kilobyte matters. If you're optimizing for mobile users on metered connections, shipping 200 KB of framework code before your application logic even starts is potentially costing your users real money. If you're building for emerging markets where devices are less powerful and data is expensive, Vanilla JavaScript might be the only ethical choice.

Internal tools and prototypes often don't need frameworks either. If you're building a quick dashboard for your team to monitor some metrics, the developer experience benefits of a framework might not outweigh the setup time. If you're prototyping an idea to see if it's worth building properly, you can probably validate the concept faster by writing a hundred lines of direct JavaScript than by setting up a build pipeline and component structure.

Simple applications that are genuinely simple—not "simple now but will grow complex later," but actually simple—don't benefit much from frameworks. A calculator. A timer. A markdown previewer. A color picker. These are self-contained applications with limited state and straightforward interactions. The mental overhead of thinking about component composition, state management, and effect dependencies is wasted effort when you could just write a few functions and be done.

But frameworks start making sense when you're building genuinely complex, stateful applications where the UI needs to stay in sync with rapidly changing data. If you're building something like a spreadsheet application, a real-time collaboration tool, a complex admin dashboard with dozens of interactive widgets, or a social media feed that updates dynamically, frameworks solve real problems. Manually managing all the DOM updates needed to keep a complex UI in sync with changing state is error-prone and tedious. This is what frameworks were designed for, and this is where they shine.

Team dynamics and hiring considerations matter too. If you're working with a team that's experienced with React, standardizing on React might be the right choice even for projects that could be built with Vanilla JavaScript. The team velocity, shared mental models, and ability to jump between projects without context switching might outweigh the technical benefits of going frameworkless. If you're hiring developers and most candidates in your market know React, that's a legitimate factor in your technology choices.

Long-lived applications where maintainability is crucial benefit from framework conventions. When you return to a React codebase after six months, the component structure and patterns guide you. You know where to look for things. You understand the separation of concerns. With Vanilla JavaScript projects, especially ones that started small and grew organically, you might find yourself looking at a tangle of event handlers, global state, and DOM manipulation scattered across multiple files with no clear organizing principle. Frameworks impose structure that can make larger codebases more navigable.

Applications that need sophisticated routing, code splitting, and performance optimizations might also benefit from frameworks, or more specifically, from meta-frameworks like Next.js or Nuxt. Setting up server-side rendering, static generation, and optimized code splitting is complex. These frameworks have solved these problems thoughtfully, and reinventing those solutions for every project doesn't make sense. If you need these features, the framework overhead might be justified by the infrastructure you get.

Projects where developer velocity is more important than optimal performance might prefer frameworks too. If you're a startup trying to validate a business model and you need to ship features quickly, React's ecosystem of pre-built components, established patterns, and extensive documentation might let you move faster than you could writing everything from scratch. The technical debt of framework overhead might be acceptable in exchange for faster iteration.

The real skill is honestly assessing which scenario you're in rather than defaulting to one approach for everything. This requires pushing back on instincts and cargo-culting. It means asking uncomfortable questions. Do we really need this to be a single-page application? Will this actually become complex enough to justify the framework overhead? Are we choosing this tool because it solves our problem or because it's what we know?

One useful heuristic is the "state complexity" test. If your application state can be described with a few variables that occasionally change in response to user actions, you probably don't need a framework. If you have dozens of pieces of interdependent state that need to update in coordinated ways across multiple parts of the UI, a framework's state management starts making sense.

Another heuristic is the "team size" consideration. Solo developers or very small teams can often move faster without framework overhead because there's no coordination cost. Larger teams benefit more from the structure and conventions frameworks provide. If you're working alone on a side project, the friction of setting up a React project might outweigh its benefits. If you're working with ten developers who need to collaborate effectively, shared framework conventions might be essential.

The "lifespan" consideration matters too. If you're building something that needs to last five years and stay maintainable, framework conventions help. If you're building a quick landing page for a campaign that runs for three months, simplicity beats structure. If you don't know which category you're in yet—and often you don't at the start—starting simple and adding complexity only when needed is usually the safer bet.

There's also the question of what you're optimizing for. User experience? Developer experience? Time to market? Long-term maintainability? Bundle size? These goals sometimes conflict, and being explicit about your priorities helps guide technology choices. A news website might optimize heavily for load time and bundle size, making Vanilla JavaScript attractive. A complex B2B SaaS application might optimize for developer productivity and maintainability, making a framework more appropriate.

The mistake isn't choosing frameworks when Vanilla JavaScript would work—it's failing to make a conscious choice at all. It's reaching for React by default without asking whether it's the right tool. It's assuming that "modern web development" means using a framework regardless of context. The goal should be choosing the simplest solution that adequately solves your problem, not the most sophisticated solution you can justify.

Real-World Examples Where Vanilla JS Outperforms Frameworks

Theory is useful, but examples make the case concrete. Let me walk through several real projects where Vanilla JavaScript not only worked well but significantly outperformed what a framework would have delivered.

I worked on a news website that needed an infinite-scroll article feed. The initial implementation was React-based, and it struggled. The feed needed to handle hundreds of article cards, each with images, text, and interactive elements. As users scrolled, React's reconciliation algorithm was running constantly, checking whether components needed updates. On mobile devices, the scroll performance was choppy. The bundle size was over 300 KB, which hurt our Core Web Vitals scores and directly impacted our SEO rankings.

We rewrote the feed in Vanilla JavaScript using Intersection Observer for lazy loading and DocumentFragment for efficient DOM insertion. Instead of maintaining React's virtual DOM representation of hundreds of articles, we directly managed only the visible elements. Articles that scrolled out of view were removed from the DOM entirely. The new implementation was 12 KB of JavaScript total. Scroll performance was buttery smooth even on low-end Android devices. Time to interactive dropped by over two seconds. The code was actually simpler to understand because it directly expressed what we wanted to happen: "when an article enters the viewport, load its image; when it leaves, remove it from the DOM."

Another example was a real-time analytics dashboard that displayed metrics updating every few seconds. The React version maintained state for every metric, and every update triggered reconciliation across the entire component tree. The developer who built it had carefully optimized with React.memo and useMemo, but there was still noticeable lag when data updated. The framework was doing a lot of work to figure out what changed, even though we knew exactly what changed—specific numbers in specific cells.

The Vanilla JavaScript version used a simple approach: each metric was a data object with a corresponding DOM element. When new data arrived, we iterated through the changes and directly updated the relevant elements. No diffing, no reconciliation, just direct updates. The code was maybe a hundred lines total. Updates were instantaneous. Users commented on how much snappier the dashboard felt. The best part was that new developers could read the code and immediately understand what it did—there was no framework-specific knowledge required.

I've seen this pattern repeatedly with form-heavy applications. A multi-step form wizard in React involves managing state for every field, validation state, touched state, error messages, and step progression. Libraries like Formik or React Hook Form exist specifically because form handling in React is complicated. But with Vanilla JavaScript and the Constraint Validation API built into browsers, you can build sophisticated forms with native validation, custom error messages, and complex conditional logic in remarkably little code.

One particularly striking example was an interactive map visualization. The initial implementation used React to render hundreds of SVG elements representing data points. Every time the data updated or the user zoomed, React had to reconcile the entire SVG structure. Performance was poor, with visible lag during interactions. We switched to Vanilla JavaScript using the SVG API directly, creating and updating elements as needed. We used requestAnimationFrame for smooth animations and kept track of which elements were visible to avoid unnecessary work. The new version was dramatically faster and the code was actually easier to reason about because you could see exactly what SVG operations were being performed.

Embedded widgets are another area where Vanilla JavaScript consistently wins. I worked on a widget that third-party sites could embed to show related content. Bundle size was critical because we were loading on someone else's page and couldn't negatively impact their performance. The React version, even heavily optimized, was around 100 KB. That's a lot to ask a site to load for a small widget. The Vanilla JavaScript version was under 8 KB and loaded asynchronously without blocking page rendering. The smaller size meant faster loading, less impact on the host page, and higher adoption from partners who were concerned about performance.

A/B testing frameworks and feature flagging systems are often better as Vanilla JavaScript because they need to run early in the page lifecycle and have minimal performance impact. I've seen companies try to build these in React and run into timing issues—the React app isn't initialized yet when you need to make decisions about what to render. A simple Vanilla JavaScript implementation that reads flags from localStorage or a cookie and applies classes to the document can run immediately and integrate with any stack.

Developer tools and browser extensions are yet another category where Vanilla JavaScript shines. Chrome extension content scripts need to be lightweight and compatible with any page they might run on. Injecting React into arbitrary pages is asking for conflicts and bloat. Direct DOM manipulation with isolated scope is much safer and lighter.

I built a syntax highlighter for code blocks that needed to work on a documentation site with hundreds of code examples. A React-based solution would have meant creating a component for every code block, managing state for highlighting, and dealing with hydration if server-rendering. The Vanilla JavaScript version used a simple approach: find all code blocks, parse their content, wrap tokens in spans with appropriate classes. It ran once on page load, had no ongoing overhead, and worked perfectly with static site generation. Total size was under 5 KB.

Even for genuinely complex applications, I've seen Vanilla JavaScript work well when organized thoughtfully. A trading platform dashboard I consulted on was originally React-based and struggling with performance when displaying live-updating prices for hundreds of instruments. The problem was that React's update model assumed any state change might affect any component, so it had to check everything. We switched to a publish-subscribe pattern in Vanilla JavaScript where each price display subscribed only to the specific instrument it cared about. Updates were direct and isolated. Performance improved dramatically, and the code was easier to understand because the data flow was explicit rather than hidden behind React's reconciliation.

The common thread in all these examples is that Vanilla JavaScript worked better when the problem was well-defined and the developer understood exactly what needed to happen. Frameworks provide flexibility and abstraction for when you're not sure how requirements will evolve. But when you know what you're building, directness often beats abstraction.

How Web APIs, ES6+, and Browser Standards Made Vanilla JS Powerful Again

The real story of Vanilla JavaScript's resurgence isn't just about developers choosing differently—it's about the platform becoming genuinely powerful enough to make that choice viable. The gap between what you can do with a framework and what you can do with modern browser APIs has narrowed to the point where for many projects, the gap barely exists at all.

The Fetch API is a perfect example of how browser standards have caught up to framework territory. A decade ago, making HTTP requests meant dealing with XMLHttpRequest, a clunky API with a callback-based interface that varied slightly between browsers. jQuery's ajax method was dramatically better, so much so that many developers thought making HTTP requests required jQuery. Then Fetch arrived, providing a promise-based API that's actually more elegant than jQuery's version. Modern async/await makes it even better. The code you write today for fetching data is cleaner and more readable than the jQuery equivalent ever was, and it's built into every browser.

The querySelector and querySelectorAll methods transformed DOM selection. These were direct responses to jQuery's killer feature—the ability to select elements using CSS selectors. Before these methods existed, finding elements meant combining getElementById, getElementsByClassName, and getElementsByTagName in awkward ways. Now you can select anything with the same syntax jQuery popularized, and it's native to the browser. The performance is better too because there's no library layer in between.

The suite of Observer APIs—Intersection Observer, Mutation Observer, Resize Observer, and Performance Observer—provide hooks into browser behavior that used to require brittle workarounds. Want to know when an element becomes visible? Intersection Observer handles it cleanly, accounting for scrolling, resizing, and element visibility changes without you having to manually calculate positions and attach scroll listeners. Want to watch for DOM changes? Mutation Observer does it efficiently. These APIs are both more powerful and more performant than anything you could build manually.

The Web Animations API gives you programmatic control over CSS animations and transitions with a JavaScript interface that's more powerful than CSS alone. You can pause, reverse, adjust timing, and synchronize multiple animations with precision. Before this API existed, complex animations required either CSS keyframes that couldn't be controlled dynamically or JavaScript libraries like GSAP. Now the browser gives you sophisticated animation control natively.

Custom Elements and the Shadow DOM, collectively known as Web Components, provide native component encapsulation without any framework. You can define reusable elements with their own isolated styles and behavior. While Web Components haven't taken over the world the way some predicted, they're increasingly viable for building component libraries that work with any framework or no framework at all. Lit, a modern library built on Web Components, shows how powerful this approach can be when combined with ergonomic abstractions.

The ES6+ language features are just as transformative as the browser APIs. Promises and async/await completely changed how we handle asynchronous operations. Code that used to be callback hell is now readable, sequential-looking code. Error handling with try/catch works intuitively. The language itself gained features that used to require libraries.

Template literals eliminated the need for template libraries for simple string interpolation. Before template literals, building HTML strings meant painful concatenation or reaching for a template library like Handlebars. Now you can write multi-line strings with embedded expressions natively. Combined with tagged template literals, you can even build sophisticated templating systems with no dependencies.

Destructuring, spread operators, and rest parameters made data manipulation dramatically cleaner. The patterns you used to need Lodash or Underscore for—picking properties from objects, merging objects, handling function arguments—are now native language features. Modern JavaScript is expressive enough that many uses of utility libraries are unnecessary.

Classes, while controversial among functional programming purists, provide a familiar mental model for developers coming from other languages and make object-oriented patterns cleaner. Whether or not you think JavaScript should have classes, having a standard syntax for constructor functions and inheritance is better than everyone rolling their own pattern.

Modules—import and export—give JavaScript a native module system that's standardized across the platform. This was huge. For years, JavaScript had no standard way to organize code into modules. CommonJS and AMD were competing standards. Bundlers were necessary to use modules in browsers. Now ES modules work natively in browsers, and while bundlers still have uses for optimization, they're not required just to have a sane code organization.

Array and object methods like map, filter, reduce, find, includes, Object.entries, Object.values, and Array.from made functional programming patterns natural in JavaScript. These methods turned JavaScript from a language where you mostly used for loops into a language where declarative data transformations feel idiomatic.

Optional chaining and nullish coalescing eliminated pages of defensive coding. Instead of writing if (obj && obj.prop && obj.prop.nested), you write obj?.prop?.nested. Instead of distinguishing between null, undefined, and falsy values with careful logic, the nullish coalescing operator handles it cleanly. These aren't just conveniences—they represent thousands of lines of boilerplate eliminated from codebases.

The Storage API (localStorage and sessionStorage) provided simple client-side persistence that used to require cookies or library abstractions. IndexedDB offers a full client-side database for more complex needs. The Cache API, part of Service Workers, enables sophisticated offline-first applications. These storage mechanisms are powerful enough to build applications that work entirely offline, something that would have seemed impossible in the jQuery era.

Progressive Web App capabilities—Service Workers, manifest files, install prompts—blur the line between web apps and native apps. You can build applications that install to the home screen, work offline, send push notifications, and access hardware features, all with web technologies. The APIs are Vanilla JavaScript. You don't need a framework to build a PWA, just knowledge of the platform.

Media and hardware APIs opened up entire categories of applications. The Web Audio API enables sophisticated audio processing and synthesis. WebGL and WebGPU enable graphics and computation that rival native applications. The Geolocation API provides location data. WebRTC enables real-time communication. The Gamepad API supports game controllers. getUserMedia accesses cameras and microphones. These aren't framework features—they're platform features available to any JavaScript code.

The CSS evolution happening in parallel matters too. CSS Grid and Flexbox made complex layouts possible without JavaScript. CSS Custom Properties (variables) enable dynamic theming and state-driven styling. CSS containment and content-visibility help with performance. Modern CSS reduced the need for JavaScript to handle layout and styling concerns.

The performance improvements in JavaScript engines are equally important. V8, SpiderMonkey, and JavaScriptCore are incredibly sophisticated compilers that optimize code aggressively. JavaScript performance in 2025 is orders of magnitude better than JavaScript performance in 2010. This means you can do more with less code, and Vanilla JavaScript that would have been too slow fifteen years ago runs smoothly today.

What ties all of this together is that the web platform has become a cohesive, well-designed application development environment. It's not a collection of hacks and polyfills anymore. The APIs are thoughtfully designed, well-documented, and work consistently. The language is genuinely pleasant to write. The performance is competitive with native applications for many use cases.

This transformation means that reaching for a framework isn't a matter of necessity the way it used to be. Frameworks still provide value, but they're solving problems that are more about developer ergonomics and team coordination than about fundamental platform deficiencies. The browser gives you the tools to build sophisticated applications. Whether you want to use those tools directly or through a framework abstraction is now a genuine choice rather than a forced decision.

The Future of JavaScript and Why Knowing Vanilla JS Is a Career Superpower

Looking at where JavaScript is heading, one thing becomes increasingly clear: the developers who understand the platform deeply will have an enormous advantage over those who only understand frameworks. This isn't speculation—it's already playing out in hiring, in open source contributions, in architectural decisions, and in who gets trusted with complex problems.

The JavaScript ecosystem is fragmenting in interesting ways. We're seeing a proliferation of frameworks and tools, each with different philosophies and trade-offs. React Server Components blur the line between client and server. Astro focuses on shipping minimal JavaScript. Qwik optimizes for resumability. SolidJS uses fine-grained reactivity. Svelte compiles components away. Remix embraces progressive enhancement. Each of these represents a different bet about what the future of web development looks like.

In this fragmented landscape, the only constant is the web platform itself. JavaScript the language, the DOM API, the browser APIs—these are the stable foundation that everything else is built on. A developer who deeply understands these fundamentals can learn any framework relatively quickly because they understand what the framework is abstracting. A developer who only knows frameworks struggles when they need to evaluate new tools, debug complex issues, or work outside their comfort zone.

We're also seeing a backlash against complexity that's pushing web development back toward simplicity. After years of build tools becoming more complex, bundlers becoming more sophisticated, and frameworks adding more features, there's a growing appreciation for solutions that ship less JavaScript and work more directly with the platform. This isn't nostalgia—it's recognition that complexity has real costs and simpler solutions are often better solutions.

The rise of edge computing and server-side rendering is changing what we need from client-side JavaScript. When your HTML is rendered on the server and you're just adding progressive enhancements, heavy client-side frameworks make less sense. Projects like htmx and Alpine.js show that you can build interactive applications with minimal JavaScript by leveraging server-side rendering and simple client-side enhancements. This approach requires understanding how the browser works, not just how to shuffle React components around.

WebAssembly is another factor that will reward platform knowledge. As more computationally intensive work moves to Wasm, JavaScript's role might shift toward orchestration and DOM manipulation—precisely the things Vanilla JavaScript handles well. Developers who understand how to integrate Wasm modules with JavaScript and update the UI efficiently will be better positioned than those who've only worked within framework abstractions.

The standardization process is accelerating, and new platform features are arriving faster than ever. Signal-based reactivity is being explored as a potential native API. Declarative shadow DOM makes server-rendering Web Components practical. CSS nesting, container queries, and cascade layers are changing how we write styles. Temporal will finally give JavaScript a proper date/time API. Decorators are becoming standard. Developers who stay close to the platform can adopt these features as they arrive. Developers who only interface with the platform through framework abstractions wait until the framework supports them.

From a career perspective, the market is showing clear signals. Senior roles increasingly require platform knowledge, not just framework expertise. When companies hire "senior React developers," they're usually looking for someone who can make architectural decisions, debug complex issues, and understand performance—all of which require deep JavaScript knowledge. A developer who's only learned React patterns but doesn't understand closures, prototypes, the event loop, or how the browser renders content will struggle in senior roles.

The ability to work across different frameworks is becoming more valuable as companies maintain legacy systems while adopting new tools. If you've worked on a product for five years, you might have jQuery code, Backbone views, Angular components, and React pages all in the same codebase. The developer who can navigate all of that is more valuable than the developer who only knows the newest framework. That navigation ability comes from understanding the common foundation—Vanilla JavaScript.

Open source contribution favors platform knowledge too. The most impactful contributions aren't to application code built with frameworks—they're to libraries, tools, and frameworks themselves. Those are all written in JavaScript and work directly with platform APIs. If you want to contribute to React, you need to understand JavaScript deeply. If you want to build developer tools, you need to understand how the platform works. Platform knowledge opens doors that framework knowledge alone doesn't.

The performance optimization skills that come from understanding Vanilla JavaScript are increasingly critical as Core Web Vitals affect SEO and user experience directly translates to business metrics. Companies care about bundle sizes, load times, and runtime performance. A developer who can look at a slow React application and say "we're triggering too many re-renders because of how we're managing state" is valuable. A developer who can say "we don't need React for this component, we can save 100 KB and improve performance with 50 lines of JavaScript" is even more valuable.

There's also a confidence factor that comes from platform knowledge. When you understand how things actually work, you're not at the mercy of framework documentation or Stack Overflow answers. You can solve novel problems because you understand the primitives you're working with. You can evaluate new tools critically because you understand what they're doing under the hood. You can make technical decisions confidently because you understand the trade-offs.

The interview process for senior roles reflects this. While junior roles might have you build a todo app in React, senior roles ask you to design systems, debug complex issues, or explain how the browser works. They ask about event loops, garbage collection, rendering performance, and architectural trade-offs. Framework knowledge gets you in the door; platform knowledge gets you the senior role.

Looking forward, the platform will continue improving. Browser vendors are actively making the web more capable. TC39, the committee that evolves JavaScript, is thoughtful about adding features. The Web Platform Incubator Community Group is exploring new APIs. The platform isn't stagnant—it's actively being developed by people who care about making it better. Investing in platform knowledge means investing in something that will grow more valuable over time rather than being tied to a specific framework's lifespan.

This doesn't mean frameworks don't matter or that you shouldn't learn them. It means that framework knowledge should be built on top of platform knowledge, not instead of it. Learn React, but make sure you understand JavaScript first. Learn Vue, but understand the DOM API it's abstracting. Learn whatever framework your job requires, but recognize that the framework is a tool that might be replaced while the platform knowledge is the foundation that transfers to whatever comes next.

The superpower isn't knowing React or Vue or Angular—it's understanding JavaScript deeply enough that learning any framework becomes straightforward. It's being comfortable reading MDN documentation and understanding what browsers can do natively. It's having the confidence to say "we don't need a framework for this" when that's true, and the wisdom to recognize when a framework is the right tool. It's being the developer who can navigate any codebase, learn any tool, and solve any problem because you understand the foundation everything is built on.

Conclusion: Vanilla JavaScript Was Never Dead—It Just Got Better

The "death" of Vanilla JavaScript was always a myth, perpetuated by framework marketing, cargo-culting, and a misunderstanding of what had actually changed in web development. What died wasn't Vanilla JavaScript—it was the painful, inconsistent, underpowered Vanilla JavaScript of the IE6 era. What replaced it was a mature, thoughtfully designed, incredibly powerful platform that just happens to still be called JavaScript.

The JavaScript language today bears little resemblance to the fragile, limited language we were working with fifteen years ago. Modern JavaScript is expressive, powerful, and genuinely pleasant to write. The browser APIs available to you are sophisticated enough to build almost anything. The performance is competitive with native applications. The cross-browser consistency is better than it's ever been. The standards process is active and responsive.

Frameworks aren't successful because Vanilla JavaScript is weak—they're successful because they provide valuable abstractions for certain kinds of complex applications, because they come with strong communities and ecosystems, and because they reduce decision fatigue by providing opinionated solutions to common problems. These are real benefits, and for certain projects and teams, they justify the costs. But they're not universal benefits that make frameworks the right choice for everything.

The pendulum is swinging back toward simpler solutions. Developers are rediscovering that many problems don't require the complexity of modern framework stacks. The web platform has gotten good enough that working directly with it is often the most straightforward path to a solution. The performance and user experience benefits of shipping less JavaScript are becoming impossible to ignore. The maintenance burden and dependency fatigue of complex framework stacks are pushing people toward simpler alternatives.

What's emerging isn't a rejection of frameworks—it's a more nuanced understanding of when they're valuable and when they're overkill. It's a recognition that the skills to build applications without frameworks are worth having, even if you choose to use frameworks. It's an appreciation that understanding the platform deeply makes you a better developer regardless of what tools you use on top of it.

Vanilla JavaScript isn't dead because it can't die—it's the foundation everything else is built on. Every framework compiles down to it. Every web application runs it. Every browser implements it. As long as the web exists, JavaScript will exist, and developers who understand it deeply will have an advantage over those who only know the abstractions built on top of it.

The real story isn't about choosing between frameworks and Vanilla JavaScript. It's about understanding both well enough to make thoughtful choices. It's about recognizing that modern web development gives you more options than ever—you can work directly with powerful platform APIs, you can use lightweight libraries for specific tasks, you can adopt full frameworks when appropriate, or you can mix and match based on the specific needs of different parts of your application.

Mastering Vanilla JavaScript in 2025 isn't about being a purist or rejecting progress. It's about understanding the tools you have available, making conscious choices about which tools to use when, and building on a foundation that will remain relevant regardless of which frameworks rise and fall in the coming years. It's about being the kind of developer who can navigate any codebase, learn any framework, and solve problems with the most appropriate tool rather than the most familiar one.

The death of Vanilla JavaScript was declared prematurely, repeatedly, and incorrectly. What's actually happening is that Vanilla JavaScript has evolved into something more powerful than it's ever been, while also being easier to work with than ever before. The developers who recognize this—who invest in platform knowledge while also understanding when abstractions are valuable—will be the ones who thrive as web development continues to evolve.

So no, Vanilla JavaScript isn't dead. It's stronger, more capable, and more relevant than ever. And if you're a developer who wants to stay relevant for the long term, understanding it isn't optional—it's essential.

Thanks for reading! 🙏🏻 I hope you found this useful ✅ Please react and follow for more 😍 Made with 💙 by Hanzla Baig