Refs in React : All you need to know !

Originally published by Ankit Singh (@solodynamo) on August 13th 2017 171,542 reads

@solodynamoAnkit Singh (@solodynamo)

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 .

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

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

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

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).

When is the ref value first set ?

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

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 ,

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

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

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 .

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

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:

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.

Related

A Minimalistic Web Portfolio for all developers 😎

#web-development

@sivanesh-shanmugamSivanesh Shanmugam

08/14/20

Once Upon a Time in Software Development

#frontend

@juan-carlosJuan Carlos Yovera Cruz

08/13/20

How to Add a Custom Font to a React Native Project

#react-native

@goelaakash79Aakash Goel

08/13/20

Subscribe to get your daily round-up of top tech stories!