is performace degraded if we use jquery with reactjs

Question

is performace degraded if we use jquery with reactjs?

because jquery changes directly DOM elements where as reactjs works with Virtual DOM.

is there any example reactjs with jquery?

Answer 1

is performace degraded if we use jquery with reactjs?

Not necessarily.

because jquery changes directly DOM elements where as reactjs works with Virtual DOM.

You are correct that jQuery does not utilize React's virtual DOM. Aside from rewriting core parts of jQuery to utilize it, vanilla jQuery will not. A wrapping component that does participate in React's virtual DOM can patch it in though.

The performance of this entirely depends on your usage. Keep in mind that React does still manipulate the DOM at the end of the virtual DOM work.

You can find the most up to date, official example at the Use React with Other Libraries page of the official React docs but it is admittedly light on the details.

is there any example reactjs with jquery?

If you check out this unit of react-training on wrapping DOM[-manipulating] libraries you can find a beautiful, comprehensive example of using ReactJS with both jQuery and jQuery UI.

Using the result of that article as a baseline, you will be using jQuery at time of React's initial mount time to minimally to do the DOM work and provide classnames for styling as needed, and React's pre-render props changing lifecycle event to re-render from changes through React. You are obviously free to use other events, such as shouldComponentUpdate or manually triggering renders as well, as your needs dictate.

Your performance will largely be tied to what you do in that re-render step.

Here are some tips that may help stave off some common performance vampires:

• Ensure you are caching selectors and functions wherever possible
• Ensure collection member's identities are properly keyed so that they aren't resulting in constant cache misses and thus constant re-renders
  • Especially if you are using unidirectional data flows or immutable data stores.
  • Some mapping operating always return new objects and so need extra care or a different api call.

Aside from that, keeping in mind both React best practices and jQuery best practices will take you a long way.

At the end of the day it's just JavaScript - React tries to keep away unnecessary heavy true DOM object creation/manipulation where jQuery allows misusing it just fine - but there is nothing by its nature to prevent making a performant jQuery app.