React.js: Why is there no componentDidRender event?

Question

I have just started using React, and a couple of times I have thought to myself: "Why is there no componentDidRender event?".

Say that I have a component that renders a table to the DOM, and I want to use bootstrap-sortable on this table to allow the user to sort on whatever column he wants. In the case of bootstrap-sortable you need to run $.boostrapSortable() after the table is drawn, in order to initialize the plugin.

As I see it, there are two handlers on a React component that would be logical to consider to use for this purpose:

• componentDidMount: This does not work because the DOM does not seem to be updated at this point of the execution.

• componentDidUpdate: This could possibly work, but it does not fire on the initial render.

I am not saying that React is actually missing a componentDidRender function, because I assume that there is a perfectly logical explanation as to why it is not there. I am just asking if someone could explain why such a function is not present, and what would be the "React way" to handle a case like the one above.

Answer 1

In componentDidMount you can do: this.getDOMNode() to get a reference to the underlying DOM for that component. So if you do want to use your mounted component with jQuery you can do:

componentDidMount: function() {
    $(this.getDOMNode());
}

http://facebook.github.io/react/docs/working-with-the-browser.html

Here's a fiddle which shows jQuery acting on the DOM node of a react component:

http://jsfiddle.net/sa5e88ys/1/

As you can see, it adds a border to the div as expected. If you're still having problems I guess it could be with the plugin you're using rather than jQuery or react?