Component Lifecycle Changes in React 16.3

React 16.3 brings some changes to the component lifecycle methods, 3 of the existing component lifecycle methods will depreciate and 2 new methods are introduced.

The following life cycle methods will eventually depreciate. These methods will continue to work till React 17.0

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 callback 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 callback refs we set the ref attribute to a function which receives the component/element reference as an argument and sets the reference.

In this example let us see how to use a callback ref to read the text from a textbox and display it on the page.

What is ReactDOM.findDOMNode

In React refs can be used to access DOM elements and other child components in the page. We use ReactDOM.findDOMNode to get the instance of other react components in the page. Once we get the instance we can access the components.

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.

ReactDOM.findDOMNode(this.refs.refComponent)

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.