Why shouldn't we use ref?

Question

In Facebook's documentation on refs:

Don’t Overuse Refs Your first inclination may be to use refs to “make things happen” in your app. If this is the case, take a moment and think more critically about where state should be owned in the component hierarchy. Often, it becomes clear that the proper place to “own” that state is at a higher level in the hierarchy. See the Lifting State Up guide for examples of this.

In my current React app, I have a few div nodes that I want to modify on condition. Those div nodes were created deep inside the render()'s chained returns. I certainly can't use Document.queryselector(). And I cannot think of anything else.

Documentation also tried to explain with article "lifting state up" but I didn't understand. Can someone shed a light on this one? (ELI5 if you could.)

The whole thing about using refs conservatively is to make sure you don't use refs to do stuff React already provides an API for (or in some capacity facilitates), such as conditional CSS classes, conditional rendering, etc. These should not be accomplished by using native DOM elements or jQuery, but fully within the React API. But certain things you can't do purely in React (like focusing an input programmatically) which is where refs come in. — Andrew Li, Jul 15 '18 at 01:17
That was exactly what I was trying to do (conditional rendering, conditional modifications). And I couldn't think of how react would do it otherwise. I will dig a little deeper(with answer below). The scope of the whole react framework is way broader than I thought. — theMobDog, Jul 15 '18 at 02:12
Specifically, the use of state to control what a user sees is a React pattern. — Andrew Li, Jul 15 '18 at 02:13
Is there a comprehensive guide on state besides the React documentation? I am basically learning by picking bits and pieces here and there. I feel like I need to get it right for this one. — theMobDog, Jul 15 '18 at 02:19
Sorry, I don't know of any really good ones. But I think the critical thing to understand here is that when React came out, it pioneered *state-driven* applications versus event driven applications many were used to writing, ie do something when the user clicks. State driven applications mean each component is stateful; it has different states (think different UI presentations) and we can change that state to change how the UI looks, not necessarily just when an event occurs. You can do some searching on Google, but I can't think of one off the top of my head sorry! — Andrew Li, Jul 15 '18 at 02:24

Andy Gaskell · Answer 1 · 2018-07-15T01:21:52.427

Lifting state means that child components raise events instead of handling state changes themselves. In the React docs they start off with each component managing its own state (handleChange). Further down they lift state up by adding the onTemperatureChange prop. Now the children delegate the state change to their closest common parent, Calculator. Calculator changes state and pushes the new values down through props.

I use refs only when I need to call specific functions on DOM elements, with focus() being by far the most common usage in my applications. This SO answer has a good example, copied here because links are bad:

class App extends React.Component{
  componentDidMount(){
    this.nameInput.focus();
  }
  render() {
    return(
      <div>
        <input 
          defaultValue="Won't focus" 
        />
        <input 
          ref={(input) => { this.nameInput = input; }} 
          defaultValue="will focus"
        />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

Also be sure to read the answer below the linked answer, autoFocus is the correct answer for focusing when mounted but there are for sure times where you want to focus elements dynamically.

What I am getting is: `ref` is like jump statement, whereas this pattern would emit `events` which are then handled by `states`? — theMobDog, Jul 15 '18 at 02:17
`ref` just means you want to keep a reference to the [DOM element](https://developer.mozilla.org/en-US/docs/Web/API/Element). It sounds like you're still starting out. Get [props and state](https://reactjs.org/tutorial/tutorial.html) figured out, then come back to refs — Andy Gaskell, Jul 15 '18 at 04:24

Why shouldn't we use ref?

1 Answers1