Why shouldn’t I use jQuery in React?

  • what you could do in theory is move the state outside of react in something like redux.
  • so JQuery does something -> statecontainer gets the update -> react will do something accordingly.
  • in theory react is just a view library, so you could use jquery to build your framework and render everything with react still react can only “see and hear” what’s happening in react.
  • it’s functional so it does not care about the global state unless you patch it in.
  • I would not use jQuery in react unless it’s really necessary, which it’s probably not.

Almost everyone is saying: »Don’t use jQuery in React!«
But they don’t really explain why. They just say don’t use it. I haven’t found any good reasons yet. No problem to use it! Example: VS Don’t use it! Why:.

Almost everyone is saying: »Don’t use jQuery in React!«

Because my friend, React generates the virtual DOM during initialisation state (when your app starts) and after that, it directly refers to this virtually saved DOM tree to make changes to the actual DOM. Hence there is no interaction between the two. Hence any change to the DOM by external factors ( J funking Query ) will not be registered by react. React achieves it’s speed by reducing reads from DOM as much as possible hence direct DOM manipulation is a big NO NO in react workflow….

If you want me to explain why react avoids reading from DOM, ask me…

Using React and JQuery seems like trying to dual wield hammers on the same nail without alternating swings; i.e. they both do the same things in different ways, so using them both is just going to eat bandwidth (on initial load) without any benefit and introduce unnecessary complexity.

You can go for the speed issue like Aakash Mallikdid. And I am not sure if I would even consider it because react is itself is not really fast unless you know what you’re doing.

So I will argue about the problem of state and separate points of truth.

if you change the DOM outside of react and react does not know about it, react won’t be able to get the same result on the next rendering iteration.

Why shouldn’t I use jQuery in React?