Introduction on React Elements and Components:
React is extremely popular and it makes the development of the user interface very simple and declarative. React has a few concepts that have been referenced throughout their official documentation. This might lead to confusion to new react users. If we take an example, when we are looking at the Glossary or Top Level API.
We do a quick search on the keywords such as React element or React component. We can notice that these terms are used throughout the official documentation for React.
This suggests that these concepts of React Elements and React Components are the core concepts of React. So that makes it extremely important to understand well. Our article is based on the core concepts like React Elements and Components. It is targeted towards those who have already worked with React before and familiarity with some of the core concepts of React is expected.
What are React Elements?
React Element’s concept is the central part of React. But it is very probable that someone new would initially miss the concept of React. If you have experience in using React with JSX before then it is certain that it is of second nature for you to write HTML looking syntax for the JS files.
But internally what the real thing is, JSX syntax really compiles down to the function calls of React and that is especially for React.createElement(). React.createElement() produces is exactly what the name suggests that is React Elements. React Elements are simply plain and old JavaScript objects with some additional properties such as:
Key- This property is used for identifying React elements that are specifically within an array of the types of same elements. There is no need of providing any value for it. But if you provide a value, it will enable React in performing optimizations. This will make the process of re-rendering even more efficient than it was before.
Props- The props property is exactly what it is thought to be. This is a property for mapping all the props and values that are passed down to the child components.
Ref- This property is taken in use for the underlying DOM element. It associated with a version that is rendered of this element of React.
Type- This property is either going to be string value for representation of valid HTML element to Component class of React.
The React element that is produced is a JavaScript object that contains other nested React elements that describes how the HTML is going to look. This might sound familiar because it is exactly what a virtual DOM is. Virtual DOM is a description of what a DOM should be looking like at a given time. Virtual DOM is declaratively represented by the React elements.
What are React Components?
Unlike the React Elements, it is possible that one is more familiar with the React Components. If you have written any line of code that makes use of the React component, that means you have created React Component classes before also. You must be familiar with the React.createClass() and also familiar with writing these component classes but something that is to be kept in mind is that, React Components are referred to as an instance of a component class of React.
If you are familiar with JS then it is obvious for you to think that its a new operator when you hear the phrase, instance of a class and to let you know, your intuition is absolutely correct. However, the new operators are never used for creation of React Components.
Instead what is used is, ReactDOM.render() for rendering a React Element into a particular DOM element and the return value we are going to get is for ReactDom.render() is the React Component Instance.
The Component instance that is returned from the ReactDOM.render() can call the methods that are already defined in the React Component class. This helps us to take a few steps back and remember properly that reactdOm.render() is just the way of React to instantiate a Component for us. You will not need to access the React Component Instance but it is found to be very helpful if a reference is saved in the Component instance while testing the React components.
A piece of rather interesting information about ReactDOM.render() is that this is where React performs its so efficient diffing algorithm on the Virtual DOM. If we recall, we see that React Elements represent the Virtual DOM and it is implied that ReactDoM.render() does take in a Virtual DOM and in return it renders it into an Actual DOM element.
After that the component instance is returned.
If behind the scenes, the same React element type is passed with the possibility of prop values that are different into the same DOM element for the ReactDOM.render() then what React does is it performs the diffing algorithm and it only make small changes that are required to the dom element. And it is no surprise that the same component instance is returned every time except the cases of the updated prop and the values for state.
What is Component Backing Instance?
The component backing instance is related to the actual DOM element themselves. Previously we have seen that React Element and React Component both are abstraction layers of the DOM. In the example that we have taken before, we can see that the ReactDOM.render() produces a component instance that is not the actual DOM node that is associated with the component instance but if we want to access the underlying DOM node associated with the component instance, it is actually extremely easy.
We just have to use ReactDOM.findDOMNode() and pass that in the component instance as the argument. So we might be wondering what it has to do with the component backing instance. Then the answer to that would be this actual DOM node is referred to by React as Component Backing Instance throughout its official documentation.
Managing the Instances
If someone is new to React, it is possible that they might have only worked with the component classes and the instances before. If we are to take an example, we can say that it is possible to declare a Button component by using the class creation. When the app is running, we may have many instances of this component on our screen where each has its own property and its own local state. This tells us about the traditional object-oriented user interface programming and thus tells us about the needs for the introduction of elements. In the traditional user interface model, it is totally up to the developer to take care of the creation and destruction of a child component instance.
In React, this is where the concepts of elements come to our rescue. An element is not an actual instance but a way of reacting to what you want to see on screen. It is just an immutable object that has two field types that are Reactclass and props.
Conclusion:
The terms, React Components, React Elements, and React Component Backing Instance are very closely related. The React Elements can be thought as foundational building blocks of the foundation. JSX syntax gets transpired to React.createElement() calls and they end up returning the simple and old JavaScript objects. These are referred to as React Elements. The React Component Instances represent what is known as the next level of abstraction that is ReactDOM.render(). It takes in a React element and the reference that leads to an actual DOM node. What we get in return is a React Component Instance.
This instance has complete access to methods defined in a component class. The outside the unit of testing and very rarely used. It is known that neither the React Elements nor Components represent the actual DOM elements. The DOM elements as a result of rendering from the component instances are referred as component backing instance. The primary way that we can opt for is to access it is by using ReactDOM.findDOMNode().