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

View other answers to this thread
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

I make some bits of the web.

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.