Callback Refs example in React

Callback Refs is one another way of implementing refs in React. in callback Refs we pass a function as a ref, instead of an attribute created using createRef(). The function receives the React component instance or HTML DOM element as its argument, which can be stored and accessed elsewhere.

Callback Refs are supported in React 16.3 and also in older versions.

In this example we shall see on how callback Refs can be used to get the value entered in a text-box control. The ref "myCallbackRef" is used to get the value from the text-box and set it to the state.

createRef API example in React

Refs allow us to access DOM elements or react elements which belong to a different parent component. The React.createRef API from React 16.3 provides us a structured way to handle refs instead of the conventional string refs

In this example we shall see on how createRef API can be used to get the value entered in a textbox control. The ref "myCreateRef" is used to get the value from the textbox and set it to the state. From React 16.3 onwards the new createRef API should be used instead of the string refs, though string refs are still supported it is recommended to use createRef API going forward. The string ref will eventually get deprecated.

string refs example in React

refs in React provides a way to access DOM node / React element directly. refs have a performance impact, hence refs should be avoided if the same functionality can be achieved using other means like state or event handlers. refs can be used for simple features like setting focus, getting text value from input controls etc.

In this example we shall see on how refs can be used to get the value entered in a text-box control. to pass props in a parent component and pass it to the child/nested component. The ref "myRef" is used to get the value from the text-box and set it to the state.

ref Forwarding in React 16.3

When we create nested components in react, react does not allow accessing the DOM of the inner element through refs, The ref on the wrapper component points to the wrapper component and not the inner component. In some cases we might need to access the inner component through refs, react 16.3 provides a way to achieve this using ref Forwarding.

React ref for components example

Refs in React is a shortcut way to access a specific DOM node or a React component.
There are two types of refs in react, string refs and callback refs.
In string refs we set the ref attribute to a name (string) and later access the element/component using the referenced name.

Refs can be used to get a handle to HTML elements like textbox, dropdown etc, or get handles to other react components in the page.

In this example let us see how to use a string ref to set focus to another component in the screen. In this example we have 2 components HelloRefComponent is the parent component and HelloChildComponent is the child component. We create a ref (ref="refComponent") to the child component and use it in the parent component to set the focus on the child component. We use ReactDOM.findDOMNode to get the instance of the child component and set the focus.

React ref example

Refs in React is a shortcut way to access a specific DOM node or a React component.
There are two types of refs in react, string refs and callback refs.
In string refs we set the ref attribute to a name (string) and later access the element/component using the referenced name.

In this example let us see how to use a string ref to access the content in a textbox and display it in the screen. In this example we create a ref with name refName for the text control (ref="refName"). In the onChange() event of the control we get the content of the textbox using the ref and display it in the screen.

React refs

Refs in React is a shortcut way to access a specific DOM node or a React component.
 
There are two types of refs in react, string refs and callback refs.
 
In string refs we set the ref attribute to a name (string) and later access the element/component using the referenced name.