When NOT to Use jQuery
Know the cases where modern browsers or frameworks serve you better than jQuery.
Loving a tool means knowing when to set it down. jQuery solved a very real 2006 problem — browsers that disagreed on everything. Most of those disagreements are gone. Here is an honest map of when to skip it.
Reach for the platform instead when…
- You're starting a brand-new project.
querySelectorAll,classList,fetch, andaddEventListenercover most of what jQuery was loved for — with zero bytes to download. - You only need a few DOM touches. Shipping ~30 KB of library to toggle one class is a poor trade.
- You're building a component-driven app. React, Vue, and Svelte own the DOM. Mixing in jQuery's direct mutations fights their virtual DOM and causes subtle bugs.
jQuery still earns its place when…
- You maintain an existing jQuery codebase — consistency beats a risky rewrite.
- You need a mature plugin ecosystem (date pickers, legacy widgets) that would cost days to rebuild.
- You must support genuinely ancient browsers where the modern APIs are missing.
- You want to prototype fast and readability matters more than bundle size.
The honest rule of thumb: new greenfield app → try the platform first. Existing jQuery app that works → leave it be and keep it clean.
The tell-tale one-liner
If your whole “need” for jQuery is a line like this, the platform already has you covered — no 30 KB required:
// jQuery just to toggle a class:
$("#menu").toggleClass("open");
// The platform, built in:
document.querySelector("#menu").classList.toggle("open");This isn't jQuery versus modern JS as a war. jQuery is JavaScript — it simply pushed the language forward until the browser caught up.
Example
When to use it
- A new React application skips jQuery because React's virtual DOM and state system replace every DOM manipulation need.
- A Node.js microservice removes its jQuery dependency because fetch() and built-in streams handle all HTTP and data needs natively.
- A CSS-only animation is used instead of jQuery's .animate() because modern CSS transitions run on the compositor thread with zero JS overhead.
More examples
CSS transition replaces .animate()
A CSS transition on transform runs on the GPU compositor thread, outperforming any JS animation library including jQuery.
<style>
.box {
width: 60px; height: 60px;
background: #e74c3c;
transition: transform 0.4s ease;
}
.box.moved { transform: translateX(200px); }
</style>
<div class="box" id="b"></div>
<button onclick="document.getElementById('b').classList.toggle('moved')">Move</button>querySelectorAll replaces $()
querySelectorAll returns a NodeList that can be iterated with forEach, replacing $() for simple selections without a library.
// jQuery
$(".card").css("opacity", 0.5);
// Vanilla JS — available in every modern browser
document.querySelectorAll(".card").forEach(el => {
el.style.opacity = "0.5";
});classList replaces addClass/toggleClass
classList.toggle() is a native browser API that directly replaces .toggleClass() with no library overhead.
<div id="panel">Content</div>
<button id="toggle">Toggle</button>
<script>
// No jQuery needed
document.getElementById("toggle").addEventListener("click", function () {
document.getElementById("panel").classList.toggle("active");
});
</script>
Discussion