React.render(<MyComponent/>, mainNode, function() {
    console.log('2');
});
console.log('1');

prints

2
1

Also, a scrollTop() in the callback does not work. It works if I call it after render() returns.

Is React.render() synchronous?

Is the DOM rendered when the function returns?

When is the callback called? What would I want to do in the callback?

React.render(<MyComponent/>, mainNode, function() {
    console.log('2');
});
console.log('1');

prints

2
1

Also, a scrollTop() in the callback does not work. It works if I call it after render() returns.

Is React.render() synchronous?

Is the DOM rendered when the function returns?

When is the callback called? What would I want to do in the callback?

• javascript
• reactjs

• 2 if you need the callback to be executed after the react component is built, than you should put the callback function inside the componentDidMount function of the react component. – Chris Hawkes Commented Jun 4, 2015 at 11:45
• 1 I want a callback after react has updated the DOM. I'm trying to do a window.scrollTop(), but specifically I'm trying to understand react's lifecycle better. Is the DOM available on window.document when componentDidMount is called? Also, is componentDidMount called for subsequent React.render() invocations? – akula1001 Commented Jun 4, 2015 at 11:51
• 1 the DOM available when componentDidMount is called because you can use React.findDOMNode(this.refs.node) in this stage. React.render is not synchronous. In your example, the React.render doesn't have any request to the serve because React library is already on the browser so the async doesn't happen. – Phi Nguyen Commented Jun 4, 2015 at 14:05

1 Answer 1

You can move the callback logic into the component you are mounting and then use the componentDidMount method for the first time the component is rendered to the DOM, and componentDidUpdate for subsequent updates/renders to the DOM. The component will be available in the real DOM via window.document or using the components getDOMNode method in both these methods.

This is not quite the same as a render callback per se. It's worth noting that if you're changing the state of the component you can also pass a callback function to the setState method for the component that will be applied once the components state has been updated (and any changes rendered to the DOM).

Having looked at the React source code to confirm - when rendering a new root node (as per your code snippet) into the DOM the process is synchronous and the callback (if passed) triggers immediately after (https://github.com/facebook/react/blob/master/src/renderers/dom/client/ReactMount.js lines 570-582)