I spent three months building with jQuery. It was 2018, and jQuery was everywhere in tutorials. "Learn jQuery," they said. "It's essential."
I built dropdown menus. Modal dialogs. A simple todo list. All with jQuery.
And I hated every minute of it.
The Problems
1. DOM Manipulation is Painful
$('#button').click(function() {
$('#container').append('<div class="new-item">...</div>');
$('.new-item').fadeIn();
});What happens if I click twice? Three times? The DOM gets polluted. Classes get applied incorrectly. The state of the page becomes impossible to track.
2. No Clear Pattern
jQuery is a library, not a framework. There's no architecture. No rules. No guidance on how to organize code for anything beyond a simple page.
Every jQuery project I saw turned into spaghetti:
- Event handlers everywhere
- Global variables leaking
- A 500-line
script.jsthat nobody understood
3. It Hides the Problem
jQuery made it easy to manipulate the DOM. But manipulating the DOM is the wrong abstraction! You shouldn't be thinking about DOM — you should be thinking about state.
What data am I showing? What should happen when this changes?
jQuery forced me to think about the wrong things.
The Moment It Changed
At a local React meetup in Dallas, someone showed a simple counter:
function Counter() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
Clicked {count} times
</button>
);
}I was stunned. The state is right there. The UI is a function of the state. Change the state, the UI updates. No manual DOM manipulation. No confusion.
It was like night and day.
The Realization
jQuery wasn't bad because it was old. It was bad because it solved the wrong problem. It made DOM manipulation easier — but DOM manipulation was never the right problem to solve.
React solved the actual problem: how to render UI based on state.
That meetup was in May 2018. I haven't written a line of jQuery since.