Cannot find ref on initial render - reactjs

Question

I just read in the official documents that componentDidUpdate isn't called on first render and I think maybe that's why dom isn't defined the first time this Component of mine is rendered.
This is a pop up modal that pops up when a page needs to be edited.
Is there any other way I can go about this?
componentDidUpdate() {
this.renderSingularForm();
}
renderSingularForm() {
let dom = ReactDOM.findDOMNode( this.refs.singularForm );
if ( this.props.pageObjToEdit && dom ) {
// DOESN'T GO HERE ON FIRST RENDER BECAUSE DOM IS NULL
createForm( window, dom, this.props.pageObjToEdit );
}
}
render() {
if ( this.props.pageObjToEdit ) {
return (
<div>
<div ref="singularForm" />
</div>
);
}
else {
return null;
}
}

Answer 1

This is an issue with how you are using refs. You shouldn't be using string refs anymore since they will be deprecated soon. Most people are now using an inline ref ( ref={ref => this.input = ref} ), but when you do that, the first time the component renders it will receive a null value. Then on the second render, the refs will be correctly assigned with the DOM element.
To get around this, you should supply a class method to the ref prop instead of an inline function.
Example:
This:
render() {
return (
...
<div ref="singularForm" />
...
)
}
Should be:
applyRef = ref => {
this.singularForm = ref;
}
render() {
return (
...
<div ref={this.applyRef} />
...
)
}
When you use a class method to apply a ref, it only gets called once when the actual element has been added to the dom, so you shouldn't get the initial null values anymore.
UPDATE 10/18:
You can now avoid this problem altogether using the new React.createRef to create your refs.

Answer 2

You can and should use the componentDidMount in order to safely get DOM elements or refs
From the DOCS:
componentDidMount() is invoked immediately after a component is
mounted. Initialization that requires DOM nodes should go here.
...
It can, however, be necessary for cases like modals and tooltips when
you need to measure a DOM node before rendering something that depends
on its size or position.
Also Note that you are using the old ref API.
You should use the new ref API
Running Example:
class App extends React.Component {
componentDidMount() {
console.log(this.myDiv.id);
}
render() {
return (
<div>
<div id="some-id" ref={ref => (this.myDiv = ref)}>some div</div>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>