React Elements vs React Components vs Component Backing Instances

Many of you have probably heard of Facebook’s React library and used it in your own work or projects. It’s extremely popular and makes developing user interfaces simple and declarative.

As the title of this post suggests, React has a couple of concepts referenced throughout its documentation that might be confusing to newer React users. For example, if you look at their Glossary, Top-Level API, and Explanation on Refs, and do a quick search for “ReactElement”, “ReactComponent”, and “Component Backing Instance”, you’ll find that these terms are used everywhere and are absolutely core to React.

This post isn’t a React tutorial; it’s more of me just sharing some of what I’ve learned about React recently. Therefore, it’s targeted towards folks who have dabbled with React before, and I’ll assume that you’re familiar with some of the core React concepts and syntax.

What’s a React Element?

The concept of a React Element is central to React, but I honestly believe because its so easy to build user interfaces using React and JSX, it’s possible to miss this concept initially. If you’ve used React with JSX before, it’ll no doubt be second nature to you to write HTML-looking syntax within your JS files. But under the hood, JSX syntax actually compiles…