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?

Sorry could you elaborate please, I'm new to reactjs and am now sure what you mean. Where would I put this code for example and I assume "fn" could take any javascript (e.g. alert("test"))? — p_mcp
– p_mcp, Commented Mar 20, 2015 at 13:01

Roman Liutikov · Accepted Answer · 2015-03-20 13:09:23Z

44

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

answered Mar 20, 2015 at 13:09

Roman Liutikov

1,3481 gold badge10 silver badges17 bronze badges

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

1 Comment

Ronen Rabinovici Over a year ago

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.

kakigoori · Accepted Answer · 2015-03-20 13:07:29Z

5

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.

answered Mar 20, 2015 at 13:07

kakigoori

1,22810 silver badges20 bronze badges

Collectives™ on Stack Overflow

Execute javascript after reactjs render method has completed

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related