React JS Refs

React JS Refs: As per reacting docs, refs are mostly used to refer to a DOM (Document Object Model) node or instance of a component in React Application i.e., refs return the particular node we are referencing.

React JS Refs Example

Refs in React JS example

In the above-mentioned example to get value for what bob is saying with the help of the target value of the event.

With Refs

With the help of refs, it can be done by

with Refs

Callbacks in Refs

The callbacks can also be used in refs and the above callbacks can be done as follows

Callbacks in Refs

When you need refs instead of ID?

The ID’s works with a single element in the entire DOM tree, with the help of ID’s you can change the background color.

Refs instead of ID

In the above program, Bob and Tim used the same ID if a bob comes before Tim and background manipulation code runs bob only get angry not Tim. In case we use refs we can replace the ID with specific ref names. But using classes for the use case is better than refs.

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

In the standard component like DOM node, such as input, select, div, etc if the ref point has to retrieve the element it just needs to call this.refs.ref.

Return of Dom Node or componet instances

In case ref points to a composite component(created by yourself) we need to use the new ReactDOM module like ReactDOM.findDOMNode(this.refs.ref).

When is the ref value first set?

With the render() in react, lifecycle methods also exist like

Ref value first vale

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

Refs in React js

We use ref only if it must be required, otherwise not. It makes difficult in working with Babel inline plugin. The refs are different in the react of thinking if one state changes you provide all the components of UI which depends on the state. React will help to maintain the right bits of DOM are updated. In case if you prefer you can use refs in jquery also.

When to use refs?

As per official react docs,

In the above-mentioned code, you can observe silver bullets using refs and also Inline refs callbacks which should not be used.

When to use refs example

In the render () produce, the arrow and bind function provides performance by invoking a new function on Every rerender.

When to use refs example 2

In case ref callbacks are specified as an inline function, it is called 2 times during updates with the null and DOM element. In React this can be done by “clean up” and “set up” for old and new ref callbacks. If memory leaks clean up is necessary to avoid stale references.

In the above code, the string refs are used which is not a best-case scenario.

When to use refs example3

The refs don’t have any instances so which should not be used on functional components.

Refs without instances Example

Refs without instance

The above code does not work because MyFunctionalComponent has no instance but the ref attribute works inside the functional component as much as we consider the DOM element or class component.

Refs without instances