From 8075ce2db759a41af4d86a4dc96eac9fecc60a0f Mon Sep 17 00:00:00 2001
From: Alex <alexander.krolick+kraken@gmail.com>
Date: Sat, 3 Mar 2018 18:53:16 -0800
Subject: [PATCH 1/3] Make the callback example more similar to the new API

---
 content/docs/refs-and-the-dom.md | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md
index 0fc033df..d165c05a 100644
--- a/content/docs/refs-and-the-dom.md
+++ b/content/docs/refs-and-the-dom.md
@@ -267,18 +267,25 @@ All things considered, we advise against exposing DOM nodes whenever possible, b
 
 React also supports another way to set refs called "callback refs", which give more fine-grain control over when refs are set and unset.
 
-Instead of passing a `ref` attribute created by `createRef()`, you pass a function. The function receives the React component instance or HTML DOM element as its argument, which can be stored and accessed elsewhere. This example uses the `ref` callback to store a reference to a DOM node:
+Instead of passing a `ref` attribute created by `createRef()`, you pass a function. The function receives the React component instance or HTML DOM element as its argument, which can be stored and accessed elsewhere. 
+
+The example below implements a common pattern: using the `ref` callback to store a reference to a DOM node in an instance property.
 
 ```javascript{6,17}
 class CustomTextInput extends React.Component {
   constructor(props) {
     super(props);
+    this.textInput = { value: null }; // initial placeholder for the ref
     this.focusTextInput = () => {
-      // Explicitly focus the text input using the raw DOM API
-      this.textInput.focus();
+      // Focus the text input using the raw DOM API
+      this.textInput.value.focus();
     };
   }
 
+  componentDidMount () {
+    if (this.textInput) this.focusTextInput() // autofocus the input on mount
+  }
+
   render() {
     // Use the `ref` callback to store a reference to the text input DOM
     // element in an instance field (for example, this.textInput).
@@ -286,7 +293,7 @@ class CustomTextInput extends React.Component {
       <div>
         <input
           type="text"
-          ref={(input) => { this.textInput = input; }} />
+          ref={element => this.textInput.value = element} />
         <input
           type="button"
           value="Focus the text input"
@@ -300,8 +307,6 @@ 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 are invoked before `componentDidMount` or `componentDidUpdate` lifecycle hooks.
 
-Using the `ref` callback 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}`. 
-
 You can pass callback refs between components like you can with object refs that were created with `React.createRef()`.
 
 ```javascript{4,13}

From 96fe82c7347dfe9360dde7c3e6f5270b1fe57dcd Mon Sep 17 00:00:00 2001
From: Alex Krolick <alexander.krolick@gmail.com>
Date: Tue, 6 Mar 2018 00:43:56 -0800
Subject: [PATCH 2/3] Declare setRef method outside render

---
 content/docs/refs-and-the-dom.md | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md
index d165c05a..30671b49 100644
--- a/content/docs/refs-and-the-dom.md
+++ b/content/docs/refs-and-the-dom.md
@@ -271,11 +271,17 @@ Instead of passing a `ref` attribute created by `createRef()`, you pass a functi
 
 The example below implements a common pattern: using the `ref` callback to store a reference to a DOM node in an instance property.
 
-```javascript{6,17}
+```javascript{5,7-9,11-14,19,29,34}
 class CustomTextInput extends React.Component {
   constructor(props) {
     super(props);
+
     this.textInput = { value: null }; // initial placeholder for the ref
+
+    this.setTextInputRef = element => {
+      this.textInput.value = element
+    };
+
     this.focusTextInput = () => {
       // Focus the text input using the raw DOM API
       this.textInput.value.focus();
@@ -283,7 +289,8 @@ class CustomTextInput extends React.Component {
   }
 
   componentDidMount () {
-    if (this.textInput) this.focusTextInput() // autofocus the input on mount
+    // autofocus the input on mount
+    if (this.textInput.value) this.focusTextInput()
   }
 
   render() {
@@ -293,7 +300,8 @@ class CustomTextInput extends React.Component {
       <div>
         <input
           type="text"
-          ref={element => this.textInput.value = element} />
+          ref={this.setTextInputRef}
+        />
         <input
           type="button"
           value="Focus the text input"

From 96b10a73fffeaa5ba995dac881f1e6b0ad4b2122 Mon Sep 17 00:00:00 2001
From: Alex Krolick <alexander.krolick@gmail.com>
Date: Tue, 6 Mar 2018 00:46:36 -0800
Subject: [PATCH 3/3] Grammar

---
 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 30671b49..24aa8095 100644
--- a/content/docs/refs-and-the-dom.md
+++ b/content/docs/refs-and-the-dom.md
@@ -265,7 +265,7 @@ All things considered, we advise against exposing DOM nodes whenever possible, b
 
 ### Callback Refs
 
-React also supports another way to set refs called "callback refs", which give more fine-grain control over when refs are set and unset.
+React also supports another way to set refs called "callback refs", which gives more fine-grain control over when refs are set and unset.
 
 Instead of passing a `ref` attribute created by `createRef()`, you pass a function. The function receives the React component instance or HTML DOM element as its argument, which can be stored and accessed elsewhere.