What’s the difference between an Element and a Component in React?

Q: What’s the difference between an Element and a Component in React?

Elements can contain other elements in their props. Creating a React element is cheap. Once an element is created, it is never mutated. const element = React.createElement( 'div', {id: 'login-btn'}, 'Login' ) { type: 'div', props: { children: 'Login', id: 'login-btn' } } Login

Difficulty: 5/10

React Elements, React Components, JSX

A React element describes what you want to see on the screen. simply put, a React element is a plain object describing what you want to appear on the screen in terms of the DOM nodes while components are either functions or classes which produce those react elements.

1
Elements can contain other elements in their props.
2
Creating a React element is cheap. Once an element is created, it is never mutated.

The object representation of React element would be as follows:

The above createElement returns as object as below

And finally it renders to the DOM using ReactDOM.render as below:

Scenario Questions

0-2 years experience

2-5 years experience

1You notice that a list item is not updating when its props change. After inspecting, you see that you returned a plain object instead of a component. Explain why that caused the issue and how to fix it.

Follow-up Questions