ReactJS Tutorial

What are React Refs? When to & When Not To Use Refs?

What are React Refs?

Refs is the abbreviation used for references in React. The concept of Refs in ReactJS is somewhat similar to keys in React. Programmers can use Refs to store a reference to specific DOM nodes or React elements. 

It’s a function in React that helps you access and interact with the DOM element and the React element.

You will need to use it when you want to change the value of a child component, without making the use of props

When to Use Refs in React?

Refs can be used when:

  • We are using third-party DOM libraries.

  • We require DOM measurements like managing focus, media playback or text selection.

  • We are triggering imperative animations.

  • We can also use it in callbacks.

When Not to Use React Refs?

Refs should not be used:

  • With functional components because there are no instances.

  • For anything that can be done declaratively.

Also, you should avoid overuse of Refs.

Test your knowledge with a quick quiz!

What does “Refs” mean in ReactJS?

Select the correct answer

Did you find this article helpful?