What are React Refs? When to & When Not To Use 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

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.

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.