Merge pull request reactjs#216 from knpwrs/ref-did-mount

bvaughn · web-flow · commit d9d6d9536db3 · 2017-10-30T12:36:53.000-04:00
Explicitly note that ref callbacks are called before componentDidMount.
diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md
@@ -66,7 +66,7 @@ class CustomTextInput extends React.Component {
 }
 ```
 
-React will call the `ref` callback with the DOM element when the component mounts, and call it with `null` when it unmounts.
+React will call the `ref` callback with the DOM element when the component mounts, and call it with `null` when it unmounts. `ref` callbacks are invoked before `componentDidMount` or `componentDidUpdate` lifecycle hooks.
 
 Using the `ref` callback just to set a property on the class is a common pattern for accessing DOM elements. The preferred way is to set the property in the `ref` callback like in the above example. There is even a shorter way to write it: `ref={input => this.textInput = input}`. 
 

Original file line number	Diff line number	Diff line change
`@@ -66,7 +66,7 @@ class CustomTextInput extends React.Component {`
`66`	`66`	`}`
`67`	`67`	```
`68`	`68`
`69`		-React will call the `ref` callback with the DOM element when the component mounts, and call it with `null` when it unmounts.
	`69`	+React will call the `ref` callback with the DOM element when the component mounts, and call it with `null` when it unmounts. `ref` callbacks are invoked before `componentDidMount` or `componentDidUpdate` lifecycle hooks.
`70`	`70`
`71`	`71`	Using the `ref` callback just to set a property on the class is a common pattern for accessing DOM elements. The preferred way is to set the property in the `ref` callback like in the above example. There is even a shorter way to write it: `ref={input => this.textInput = input}`.
`72`	`72`