Execute javascript after reactjs render method has completed

Question

I have a reactjs component:

var com1 = React.createClass({
    render: function() {
        return (  
    <a href='#'>This is a text</a>
    );
  }
});

I want to execute Javascript/Jquery once rendering of this componenet has completed. Simply adding Javascript to the render method doesn't seem to work.

How would I achieve this?

Solution 1

Use componentDidMount method to run code after initial render and componentDidUpdate to run code after each update of component's state.

Solution 2

See the documentation here: https://facebook.github.io/react/docs/component-specs.html#mounting-componentdidmount

In the component lifecycle, you can define a callback for componentDidMount -- i.e., the render function has completed and the resulting elements have been inserted into the DOM.

Comments

[Ronen Rabinovici]

From my own experience - you also need to add a setTimeout(foo, 1) method inside the 'componentDidMount', so that the elements that react renders actually show in the real dom.