Alhassan Joshua Abel

Components vs Instances vs Elements

Joshua Alhassan's photo
Joshua Alhassan
·

3 min read

Understanding React components, instances, and React elements concepts is key to knowing how React works, and in this article, we’ll learn the difference between these three concepts. By learning these concepts, you can build better React applications and explain the framework more clearly. Plus, they are often discussed in interviews.

Components: The Blueprint of the UI

A React component is a reusable piece of the user interface. It’s essentially a JavaScript function (or class) that defines what should appear on the screen by returning a React element.

function Button() {
  return <button>Click me!</button>;
}

In this code, Button is a React component because it returns a single JSX element (<button>), which is internally converted by React into a React.createElement call. You can think of a component as a blueprint for rendering the UI.

Component Instances: The Actual Manifestation in the Application

Each time we use a component, React creates a unique instance of it in the app. For example, if we use the Button component three times, React will make three separate instances of Button, each with its own state and props.

Here’s how that might look:

function App() {
  return (
    <div>
      <Button />
      <Button />
      <Button />
    </div>
  );
}

In this code, we’ve used Button three times, creating three instances. Each call to Button() This results in a separate instance in the component tree, and each instance can independently maintain its own state and props.

React Elements: The Immutable Object Representation

A React element is created whenever a component is used. It’s a fixed JavaScript object that describes what should appear on the screen. React stores this element in memory, containing all the details needed to create actual DOM elements later.

Each time a component instance is rendered, React makes a new React element to represent that instance’s layout. Here’s how that looks behind the scenes:

const element = React.createElement('button', null, 'Click me!');

This element is a React element created by React.createElement, and it’s an object that holds the information needed to generate the DOM structure corresponding to this button.

From React Elements to DOM Elements

The React element itself isn’t directly added to the DOM; instead, React uses it to create real DOM elements that the browser displays. React elements live in a virtual DOM until they are turned into actual DOM elements.

Here’s the process:

  1. Component Declaration: Write a component function, like Button.

  2. Component Usage: Add the component to your app (e.g., <Button />), creating a component instance.

  3. React Element Creation: For each instance, React creates a React element object.

  4. DOM Element Rendering: React converts React elements into real DOM elements, which are then displayed in the browser.

Visual Representation

Imagine a flowchart illustrating the journey:

  1. Write Component → 2. Component Instances Created in App → 3. React Elements Generated → 4. DOM Elements Rendered on Screen

Understanding these differences will improve your ability to debug, optimize, and effectively think about the rendering flow in your React applications.

If you find this article useful, please do not hesitate to like, comment, and share.

ReactFrontend Developmenttech