React is developed by Meta, formerly known as Facebook. It is a free and open-source front-end JavaScript library for building user interfaces based on UI components.
Components split the UI into independent, reusable pieces, and think about each piece in isolation. And, elements are the smallest building blocks of React apps.
Both components and elements confuse many React developers.
So let’s deep dive into the differences.
| React Component | React Element |
|---|---|
| React Components are like javascript functions that accept inputs and return react elements. | Element is a plain object describing a component instance or DOM node and its desired properties. |
| Component’s state is mutable. | Elements are immutable. Once you create an element, you can’t change its children or attributes. |
| Components have their own lifecycle methods like component mounts, updates, and unmounts. You can use Effects to achieve the component lifecycle methods. | Element does not have any methods. |
| Components are slower than elements. | Element creation is cheap and it does not have a state, therefore it is faster than components. |
| Components can be declared in several ways, such as a class with a render() method or as a function. | Elements can be created using React.createElement( ), JSX or an element factory helper. |
Component
function Welcome(props) { return <h1>Hello, {props.name} </h1> }
Element
const element = <h1>Hello, world </h1>
If you want to learn about Controlled vs UnControlled component, check out this blog post.
Thanks for reading!
If you like our content, please do not forget to subscribe our channel.
