Why is it a bad idea to mix jQuery and React?

It seems that using jQuery with React is generally frowned upon. I would like to know the reason. So, my question is do you use jQuery with React? If not, why is it considered a bad practice?

Start a personal dev blog on your domain for free and grow your readership.

3.4K+ developers have started their personal blogs on Hashnode in the last one month.

Write in Markdown · Publish articles on custom domain · Gain readership on day zero · Automatic GitHub backup and more

Ben Buchanan (200ok)'s photo

jQuery in this context usually refers to DOM scripting, where events and UI updates happen in the browser DOM. Because React handles events directly and uses a virtual DOM, in theory using React should mean you simply don't need to use jQuery as well.

Changing the browser DOM outside your React app means React is potentially no longer handling state, events and UI rendering. Also, it means you are basically building one thing two entirely different ways; and sending two dependency loads down to the browser instead of one.

Still - it's not the end of the world if both are being used, you just have to be aware of what each is doing and how the other will deal with that.

Deactivated User's photo

I think this applies not only to jQuery, but to any design library that manipulates DOM outside React. ex: Lets say some design library get rid of jQuery dependency, but If they still use JavaScript outside React. ex: New MaterializeCSS without jQuery.

Am I correct Ben Buchanan (200ok) ?

Ben Buchanan (200ok)'s photo

Yes that's correct - it's not really about what modifies the DOM, it's that React broadly expects/assumes that nothing else will be modifying the DOM. Or simply having two things (React + other scripts) trying to control a single thing (the rendered DOM) can have unpredictable results.

As I said it's not that you should never do it, but you need to be very very careful if you do.

Marcus Pohorely's photo

jQuery is a big an bloated library with nearly nothing in it which can't be solved with Vanilla JS. Especially when you are working with react, it just doesn't make sense to use jQuery too. You have all necessary event handlers within react. It must be a very specific usecase if i need jQuery for anything. And if thats the case, there sure is another library out there which can do that too, but is much smaller and without overhead. I did everything with jQuer some time ago, but currently we are forcing us to remove it as dependency and solve problems another way.

You should too. ;)

Jon's photo

Let's say the Store in a React app is S0, it changed to S1 after an action. And the DOM state is changed from V0 to V1. So theoretically it's a state changing in a state machine. Since React is in a declarative way, it fits into a state machine naturally. But jQuery does not. You have to code it carefully to make it cooperate with that state machine.

There are also another concern that is called performance. React has its way of optimizing DOM operations by separating component render stage and DOM patching stage to eliminate forced layouts. But in jQuery it can be hard because it manipulates the DOM directly. It can be tedious in large apps.

In conclusion, my answer is: you can use jQuery but you need to be careful with the DOM states and performance issues, and it's sometimes much easier not to use jQuery.

Deactivated User's photo

Jon you mean one have to be aware of React lifecycle and virtual DOM as stated in point 1 here

John P. Ortiz's photo

Solemn way that blending jQuery and React would bode well reports this site is when bit by bit conveying React to the venture, when just a piece of the application is utilizing React and there is as yet old code utilizing jQuery.

Yanni Nightingale's photo

I think it is necessary sometimes. E.g, in componentDidMount().

Hugo Magalhães's photo

"Necessary" should not be the word in this case. If I understood correct, you are trying to say that sometimes you will need to access DOM after component mounting. And why in the hell will someone include a lib that has 400kb while you can just do document.getElementById()? jQuery made a huge impact in the JavaScript ecosystem, but it also made the developers forget about the beautiful of VanillaJS.

Irfan's photo

Hmm. If a website is using Bootstrap, jQuery is included.. Considering this, a minified version of jQuery is 82kb (can be compressed even more if you are chucking out unnecessary code in library).

Having said this, lets say there is a third party JS library that is only available in UMD way. In case of payment or mission critical applications users should not have access to this script unless they go on that page/service. So for such cases we can load it from componentDidMount(..). There can be other uses too.