Why the same jQuery selector has different output in React Component hooks compared to the browser console?

Question

I'm using jQuery along with ReactJS for several things. I've noticed that the out put of $(selector) is different when I do it within React vs directly in the browser console.

Due to this reason, certain javascript code that I execute directly in the browser console works, but it doesn't work when I write it within a React.

For example I have this table:

render(){
    console.log(this.state.data);
    return (
        <Table striped bordered condensed hover id="files-table">
            <thead>
                <tr>
                    <th>stuff</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>stuff</td>
                </tr>
            </tbody>
        </Table>
    );
}

On the one hand when I do console.log($('#files-table')) inside React let's say in the componentDidUpdate() hook, I see this output in the console:

... on the other hand the same console statement typed directly in the browser console shows this output (which is the one that I expect):

Can someone explain the differences?

I'm having a problem with implementing jQuery DataTables as putting $('#files-table').DataTable() in React componentDidUpdate() hook gives an error: $(...).DataTable is not a function Although it works in the browser (I know this error can be caused by loading jQuery twice, etc. but I don't think that's the case here).

Answer 1

This difference is caused by the fact that ReactJS uses a virtual DOM and when you're executing the jQuery selector in your browser console - your are accessing the actual (real) DOM.

Why Virtual DOM?

Rather than touching the real DOM directly, ReactJS is building an abstract version of it (a copy). The main problem that ReactJS is solving with this approach is that the DOM was never optimized for creating dynamic UI and writing to the browser's DOM is relatively slow.

Consider the Virtual DOM as a lightweight copy of the actual DOM. Like the actual DOM, the Virtual DOM is a node tree that lists elements and their attributes and content as objects and properties. React's render() method creates a node tree from React components and updates this tree in response to mutations in the data model, caused by actions.

One would think that re-rendering the entire Virtual DOM every time there’s a possibility that something has changed would be wasteful — not to mention the fact that at any one time, React is keeping two Virtual DOM trees in memory. But, the truth is that rendering the Virtual DOM will always be faster than rendering a UI in the actual browser DOM. It doesn’t matter what browser you’re using: this is just a fact.

React does this magic by attaching attributes to elements in your document and manipulating them individually (using these very specific ID attributes) after doing the diff to determine what needs updating. The Virtual DOM inserts additional steps into the process, but it creates an elegant way to do minimal updates to the browser window without you having to worry about the actual methods being used or even what needs to be updated and when.

More info about the differences between the Virtual and the actual DOM you can find explained in this article and in the ReactJS docs as well.

How to integrate jQuery DataTables in ReactJS?

In your case - the jQuery DataTabes library modifies the DOM. So, you need to keep React out of it's way. React works best when it has full control of the DOM. But in your case - you need to pass the control to jQuery.

You need to create a component to manage the jQuery DataTabes. This component will provide a React-centric view of the jQuery component. Moreover, it will:

• Use React lifecycle methods to initialize and teardown the plugin;
• Use React props as plugin configuration options and hook up to plugin's methods events;
• Destroy the plugin when component unmounts.

Take a look at my answer here. It contains the full details and detailed explanation how to integrate a jQuery library in ReactJS. You can use the same approach.