ReactJS error : Invariant Violation: processUpdates when using jQuery Datatable plugin

Question

In my React application, I am using jquery Datatable table.

Initially the table loads fine. Whenever I am trying to override the data with a new data, it is throwing the error "Invariant Violation: processUpdates(): Unable to find child 10 of element. This probably means the DOM was unexpectedly mutated.."

I searched on this issue. What I understood is since the datatable plugin is directly mutating the DOM, React is getting confused on state change. One solution I got is call the datatable on willComponentUpdate. But, it is not working for me. Not sure on how to solve this issue.

Thanks for helping.

$('#topicsTable')
  .addClass('initialized')
  .dataTable({
    order: [
      [4, "desc"]
    ],
    columnDefs: [{
      targets: [-1],
      className: 'hidden'
    }]
  });

jslatts · Accepted Answer · 2015-09-30 18:36:11Z

2

I have been engaged in the same battle for the last day and a half. At this point, I am considering ditching Datatables for a native React grid like Griddle.

That being said, you can force it to work by destroying and reinitializing Datatables before React does any work on the DOM. Use the component lifecycle to do this:

  // Initialize Datatable after React has rendered
  componentDidMount() {
    $('#dataTable').dataTable(dataTableStyle);
  },

  // Destroy Datatable before any component updates
  componentWillUpdate(nextProps, nextState) {
    $('#dataTable').dataTable().fnDestroy();
  },

  // Re-initialize Datatable after React has rendered
  componentDidUpdate(prevProps, prevState) {
    $('#dataTable').dataTable(dataTableStyle);
  },

To take it a step further, you can use check the next/previous props and state in order to determine if you need to actually do a render or not.

My problem with this solution is that its too slow and I get ugly reflows when operating on tables with lots of data. It might work for less complex grids however.

answered Sep 30, 2015 at 18:36

jslatts

9,3475 gold badges38 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jinto Over a year ago

This is really helpful. I tried to destroy like you mentioned in componentWillUpdate. However, it started throwing errors like 'cannot find parentNode of undefined'. It will not throw error first time on fnDestroy. But second time when I give new data, it is giving the error.

jslatts Over a year ago

It is throwing the error on the second call of dnDestory? Is the #dataTable element still on the DOM?

Jinto Over a year ago

You are right. Throwing error on 2nd call and the #dataTable element is still on DOM

Collectives™ on Stack Overflow

ReactJS error : Invariant Violation: processUpdates when using jQuery Datatable plugin

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related