Why The Dom Operations In React, Angular Via External Libraries Like Jquery Is Not Recommended

I have gone through many articles, people do not recommend usage of jQuery in React. Sometime I feel we can do some operations really quickly using them. Some developers do not in

Solution 1:

the basic answer is this:

1) For animations, jQuery does in-browser looping and doesn't leverage CSS3 transitions. This takes up clock cycles (battery power) on mobile browsers and that's why you get jagged, not-smooth animations when using jQuery. but more importantly, the React DOM is special because it MAINTAINS A COMPLETE COPY OF YOUR DOM in its own internals ("the virtual DOM"). Now think about this: You come along and change the DOM using jQuery but React has an old copy of the DOM. It uses this copy of the DOM every time it re-renders, and so you've just make its copy out of sync with the real DOM. When you do this, Very Bad Things can happen to you and you're basically totally thumbing your nose at the very heart of React (the virtual DOM).

If you want to do animations or move things on the screen, forget everything you know about jQuery and learn CSS3 transitions. then do it the React way.

2) For everything non-animated, like utility functions, try an alternative (smaller) library like lodash or underscore. They have map, each, pluck, etc for all your utility function needs.

3) I can see using jQuery only for some very specialized things (for example throttle and debounce), but even those probably have alternatives now.