From 18097a25eb9ae714aba82187466dd2f61ea6e52e Mon Sep 17 00:00:00 2001 From: Kenneth Powers Date: Fri, 27 Oct 2017 22:36:39 -0400 Subject: [PATCH] Note that ref callbacks can update during render and be called after mount. --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 10002dddf..ca8e52c9e 100644 --- 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. `ref` callbacks will be called before `componentDidMount`. +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}`.