Using Refs In React Or ReactNative

In any application, a form is the most common feature that the client requires. Forms actually allow the users to fill in the details such as first name, last name or any information that is required.
So behind the application, how the details entered by the users are captured, how do we assign the values to the properties as per the details entered by the user?
In react native, Refs help us to do that.

As per React Documentation, it says – Refs provide a way to access DOM nodes or React elements created in the render method.

Sometimes we need to change the properties of DOM without using state and props. In that case, we use Refs.

Use cases – For managing focus, text selection and for changing native properties.

Refs can be used on any element not only on inputs.

For declaring reference you can use a special ref keyword. It is just like the key. 

This ref key is automatically detected and understood by React.

Refs can be used anywhere in the application.

Refs can be created in 3 ways:

• String Type
• Callback Function
• CreateRef() method
• String Refs

<TextInput ref='inputRef' />

// To set focus using refs

this.refs.inputRef.focus();

// we can change native properties

this.refs.inputRef.setNativeProps({ editable: false });

ref attribute on TextInput is used to store a reference to a DOM node. React will call the ref callback with the DOM element when the component mounts, and call it with null when it unmounts.

Note: According to documentation: If you’re currently using this.refs.inputRef to access refs using the string type method. we recommend using either the callback pattern or the createRef API instead.

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.

• Callback Function 

<TextInput ref={ele => this.inputRef = ele} />
// To set focus using callback refs

this.inputRef.focus();

// we can change native properties

this.inputRef.setNativeProps({ editable: false });

• Using CreateRef()

constructor(props) {

   super(props);

   this.inputRef = React.createRef();

}

<TextInput ref={this.inputRef} />

// To set focus using React.CreateRef()

this.inputRef.current.focus();

// we can change native properties

this.inputRef.current.setNativeProps({ editable: false });

Based on declaring refs in DOM you need to change the way of accessing refs.

All refs methods discussed above are available in Class based components only.

How to use refs in function based components?

You can use ref hooks to use refs.

import react, { useRef } from 'react';

const input = props => {

   const inputRef = useRef(null);

   return (

<TextInput ref={inputRef} />

   )

}        

To apply focus to input ref – inputRef.current.focus()

Forwarding Refs: To pass a reference from one component to another component

// in one component

return React.forwardRef((props, ref) => {

   return <DefaultInput {...props} forwardedRef={ref} />
});

// in other components
<MainComponent ref={this.props.forwardedRef} />

Info: According to React Documentation –  Don’t overuse refs. Your first inclination may be to use refs to “make things happen” in your app. If this is the case, take a moment and think more critically about where the state should be owned in the component hierarchy. Often, it becomes clear that the proper place to “own” that state is at a higher level in the hierarchy. See the Lifting State Up guide for examples of this.