Last evening while looking into a popular react library, I came across ‘refs’ and even knowing it how it works i wasn’t quite convinced with my understanding so decided to dive more deeper into it and finally sharing my thoughts with you people.

According to react docs , refs are used to get reference to a DOM(Document Object Model) node or an instance of a component in a React Application i.e. refs would return the node we are referencing . Lets see it with an example .

![](https://hackernoon.com/hn-images/1*YESBXsE4q3_jZG8mYxueXg.png)

In the above example for the getting the value of what bob is saying i am using target value of event e .Using refs it could have been done this way

![](https://hackernoon.com/hn-images/1*7klILKdvEazW6zvqCOBEWw.png)

Also, we can pass a callback in the refs which can be used to do other cool things. Using refs with callbacks above job could have been done this way

![](https://hackernoon.com/hn-images/1*RFfiMvrTv4bNDf5fqbbP7A.png)

### When you need refs instead of ID’s ?

As we all know , ID’s works on a single element in whole DOM tree thus lets say we want to change the background-color on focus . With ID’s this will happen

![](https://hackernoon.com/hn-images/1*rSDtSpeDeWhVaj6QZrU3mw.png)

As Bob comes before Tim and both have the same ID on which background manipulation code runs but only Bob gets angry on focus not Tim. If we use refs we can replace the IDs with the a particular ref name and we should be doing fine. But i would suggest using classes for use-case of this kind as its much better and also refs has its caveats which we would see soon.

### When it returns a DOM node or a component’s instance?

If the ref points to a standard component (DOM node, such as `input`, `select`, `div` etc) then to retrieve the element; you just need to call `this.refs.ref.`

If the ref points to a composite component (a custom component you have created yourself) you need to use the new `ReactDOM` module like so `ReactDOM.findDOMNode(this.refs.ref).`

![](https://hackernoon.com/hn-images/1*7ZwLiwdEZiM4G6dVpT_PZg.png)

### When is the `ref` value first set ?

Along with **render()** in react , lifecycle methods also exists like

![](https://hackernoon.com/hn-images/1*EsgBxOFlLpqekUAeoSBKBQ.png)

So , the ref is first set after the first `render()`, but before `componentDidMount()`.

### Use ‘ref’ only if its MUST , otherwise not …why?

*   It hinders in optimized working of Babel inline plugin.
*   Using refs is kinda moving little away the react way of thinking which is once state changes, you re-render **all** the components of your UI that depend on that state. React will take care of making sure only the right bits of the DOM are updated, making the whole thing efficient. You may eventually use refs in a Jquery fashion which is not the goal.

### When to use refs ?

According to official react docs ,

![](https://hackernoon.com/hn-images/1*9GHQFPbead2QCbRJgVysXA.png)

Official React Docs

### Finally , Silver bullets when using refs !

*   Don’t Inline refs callbacks: I used inline callbacks to show you why it is bad thing to do

![](https://hackernoon.com/hn-images/1*thw1ZzXF4VTRXO4WiY9umA.png)

Arrow and `bind` functions in a `render()` produce a performance hit by creating a new function on **EVERY** re-render. It should be done something like this

![](https://hackernoon.com/hn-images/1*FTkw-GSgPosbyguLBRD3yg.png)

Also If the `ref` callback is defined as an inline function, it will get called twice during updates, first with `null` and then again with the DOM element. React does this to “clean up” the old ref and “set up” the new ref just in case the previous and the next callbacks comes out to be truly different functions. And cleaning up is necessary to avoid stale references (and memory leaks).

*   I also used **string refs** intentionally which is also not a good practice .

![](https://hackernoon.com/hn-images/1*zuk5dDNp3WrleKSZHcRJ-Q.png)

_According to official react docs , Although string refs are not deprecated, they are considered legacy, and will likely be deprecated at some point in the future. Callback refs are preferred._

*   refs should not be used on functional components because they don’t have instances . Example

![](https://hackernoon.com/hn-images/1*me1ub80xs1y6FTGiw0nIQg.png)

React Official Docs

As MyFunctionalComponent has no instances , above code won’t work as intended.

**BUT** `**ref**` **attribute will work inside a functional component** as long as you refer to a DOM element or a class component:

![](https://hackernoon.com/hn-images/1*_k1Dj-n1dSJmG5CH_xJBtA.png)

React Official Docs

Hope you now have a good understanding of **refs** along with it use-cases and caveats. If you find it useful do share it with other peeps around you.

Thanks

Let’s continue the conversation on [Twitter](https://twitter.com/solodynamo)**.**

Target

Twitter

Too Long; Didn't Read

Cassandra Forward a free Cassandra-focused community event

Refs in React : All you need to know !

Too Long; Didn't Read

Companies Mentioned

@solodynamo

RELATED STORIES