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.

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.

Callback Refs in React 16.3

Callback Refs were introduced before React 16.3.
React 16.3 continues to support the callback refs from the previous versions. In createRef API we create a reference and set it to the element using the ref attribute. In callback refs we instead set the ref attribute to a function which receives the component/element reference as an argument and sets the reference.

The below example shows how to define and use callback refs.

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.

createRef API in React 16.3

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 the previous versions.

The normal way of modifying react elements is to modify the components props/state and trigger render() of the component. React provide us escape hatch to access DOM elements and other parent components elements using refs API. We should make sure that you dont over use ref's in react Applicants and use it only in exceptional cases where the conventional render() option does not work out.

We should create a ref using React.createRef() and attach it to the required element/control using the ref attribute. Once assigned the ref can be accessed throughout the component using this.<refName>.current

The below example uses the new createRef API to set the focus on a textbox when the component loads.

Context in React 16.3

Context in React in a feature which helps us pass data through the component tree without having to pass them as props through each level of sub-component. Without context the only way to pass a set of values through a component tree is to pass them as props to each level of child component.

This might get complex when we want to share a few global values to many of the sub-components in the component tree. For example data like language preference or style preference which should be re-used by most of the components should be easier to share across various components.

What's new in React 16.2

The major improvement in React v16.2 is the way we implement Fragments. In React v16.0 we can return multiple elements/components from a react component as an array.

Server Side Rendering in React v16.0

React 16 improves the speed of server side rendering. React 16 provides a new hydrate() method to render components which are processed in the server side.

Server side rendering is performed with Node web servers express, using the renderToString() method which compiles the react component in the server side and send the HTML to the client.  

Portals in React v16

Portals allows us to have better control of the Application UI, without portals when we return an element from a component's render method it is mounted in the DOM as a child element of the parent component.

Error boundaries in React v16

React v16.0 provides better error handling, prior to react v16.0 if a component throws an exception then the entire application will crash and the only way to recover is to refresh the page.

To overcome this React v16.0 introduces error boundaries. Error boundaries are special components which catch errors in its child component hierarchy and display a custom error / fallback UI. Error boundaries handle any errors in the render(), constructor or any of the component life cycle methods in its child component hierarchy.

Fragments in React v16

Fragments is a new feature in React v16.0 which allows us to return multiple child elements/components/strings from a component without using a wrapper like <div> or <span>. Prior to react v16.0 this was not possible. Make sure that you include the "Key" attribute while returning multiple elements.

Below examples show how Fragments can be used in React 16.

What's new in React 16.0

React v16.0 comes with major changes in the underlying architecture, with limited changes to the pubic API so the way we write react code doesn't change much, but the internals have changed drastically.

Some of the key new features introduces in React 16 are fragments, error boundaries, portals, improvements to server side rendering and reduced library file size.

React version history

React is a JavaScript framework for creating UI applications, React was first created in 2011 by Facebook engineers. In 2013 React was made open source.

Advantages of React?

Virtual DOM
The first advantage of React over other JavaScript libraries is Performance.
React uses a concept called Virtual DOM which minimizes updates to the DOM and thereby reducing render time and increasing performance.

What is a Document Object Model?

The DOM (Document Object Model) is a tree representation of the element hierarchy in a web page. Each element in a HTML page is a node in the DOM tree arranged in a hierarchy. With complex modern UI applications and SPA (single page applications) the DOM is becoming heavier with hundreds of thousands of nodes.

What is a DOM?

The DOM (Document Object Model) is a tree representation of the element hierarchy in a web page. Each element in a HTML page is a node in the DOM tree arranged in a hierarchy. With complex modern UI applications and SPA (single page applications) the DOM is becoming heavier with hundreds of thousands of nodes.

What is React?

React is a JavaScript based library used to develop user interface components.

React is developed and maintained by Facebook.

React focuses on the UI layer, in an MVC architecture React represents to View (v) layer.