Knut Marius Knut Marius - 1 year ago 87
Javascript Question

React.js: Why is there no componentDidRender event?

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

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 Source

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() {

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

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?

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download