Are there any recommendations for using JQuery with React? I have seen some examples React team has shown to use jquery bootstrap with react like these https://github.com/facebook/react/tree/master/examples/jquery-bootstrap. However, i am wondering are there any gotchas or concerns to use this kind of stuff in React.
I don’t mean to be rude but yes, don’t use jQuery. In most cases you won’t need anything from jQuery when properly using React. Otherwise, there are lightweight alternatives to jQuery like minified.js or Zepto.js that provide the same syntax that jQuery uses.
I’ve used jQuery for a “long” time (before I met React) for its main/common features which are almost as easy to use with simple JS without any other third party library.
Any concrete examples of what you’d like to accomplish? We can help you find the non-jQuery way to do it
I inherited a large application written in jQuery and from that standpoint it’s quite logical to have both coexist for a while. Also, there may be libraries that do complex things which you don’t want to rewrite in React yourself.
Some things you need to be careful about are:
- run jQuery only in the lifecycle methods where the DOM node is present or will be removed: componentDidMount, componentWillUnmount, componentDidUpdate.
- you probably want to make shouldComponentUpdate return false
- if the code you’re using will be altering the DOM node, you should probably give it a child node to play with instead
@Theadd and @Daniel, thanks for the honest feedback, I completely agree with you but the situation is that we are porting large application which was primarily build on top of JQuery plugins. We need to make sure we have strategy to fallback on when we couldn’t find any good alternative in React. And when those scenarios hit, I wanted to know that what are the things to look out for when using that JQuery plugin, this may push us to write our own React component or use JQuery.
@wmertens - thanks for awesome insight, can you elaborate more on the last point, do you mean not let the JQuery plugin manipulate DOM root node where react is mounted or give it a completely different subtree outside the react root node, maybe make it a child of body?
yes, if you’re going to be running some plugin on a div, it would be better to tell React that your component is
You can also add an element on the body, depending on the plugin.
Thanks, @wmertens! You just pointed out what I need to know!
Anothere thing I learned is that any React components that are mounted where jquery gets control need to be unmounted first.
I solved that by using a global list of mounted elements with their unmount functions and then on each jquery plugin call checking if the mount point is a parent.
A very specific use case, maybe
The most important thing to remember when working with jquery and react is that jquery manipulate the actual dom, while react have its own virtual one.
So when jquery do some changes, react’s dom staying the same, the next render of the component will be without the jquery changes, the best way to avoid mistakes is keeping jquery code in the lifecycle of the component as mentioned above (running the jquery code on each render).
@wmertens Is there any way to let React component know another jQuery plugin is manipulating the DOM? or just keep jQuery part re-run for each render?
Recommendations? For one thing, be careful with letting jQuery hand data attributes. jQuery can read the DOM but when you set things it generally doesn’t actually modify the DOM.
I tell you my experience.
In my web application I have rendered all HTML via React, didn’t make use of jQuery for manipulating DOM such as Insertion/Updation of nodes, because React keeps track of DOM nodes via its internal virtual DOM system. So if we manipulate the DOM ourselves using jQuery then the integrity of React is in fact broken or overridden which is really bad.
I have only used jQuery for sort of effects such as scrolling window and focusing to a DOM element. Nothing except that.
So when you are using React, use it like the React way, the good way.
I will give you example of problems with jQuery.
I’ve used jQuery based Material Design CSS and the React based on (Material UI).
Generally, you can make work both, but the React based has better experience, because it handles the React Lifecycle for you.
When you use jQuery one, you need to make sure that you don’t mutate DOM in a way that virtual DOM’s state is different - so you end up with out of sync DOM vs. Virtual DOM.
Second example: I successfully implemented some jQuery based animation on the React component, but there is kind of overkill because you need take care where to put what methods that keep in sync the virtual DOM with React DOM (componentDidMount, componentWillUnmount etc.)
Correct me if i am wrong, what I understand from react reconcilation docs is:
• React will not touch you dom node if its previous and new virtual node are same.
• Jquery dom manipulation doesn’t interact with react virtual dom.
• React will ummount you dom node if parent element type changed.
<div> <Counter /> </div> <span> <Counter /> </span>
- yes, react only applies changes to real dom when virtual dom changed, and it doesn’t render entire dom component all over, it just applies the changes
- yes, obviously
- Unfortunately yes.
Even made a jsfiddle to test a case where one would expect react not to rerender: https://jsfiddle.net/kpfm0qnc/
Creating a tree from within a root component. Clicking on Root changes domNode from div to span, causing World rerender.
In that case does anyone know of a decent react table component that is as feature-rich as DataTables ?
I am new to React. And old to jQuery. I use jQuery
#getfunctions a lot in my projects. Any suggestions about how to replace these functions when using React without jQuery?
You can replace jQuery
ajax() with the Fetch API. For some browsers, you’ll need a polyfill; GitHub has one.
A nice feature of this API is that it uses Promises for handling the result of the network request.