DEMYSTIFYING REACT COMPONENT INSTANCES

Hello fellow React developers! In this article we will be breaking down what React component instance is and scenarios where React component instance is at play.

What is a React Component ?

Before we can understand and really appreciate what a React component instance is, we first need to understand what a component itself is.

Basically, components are the fundamental building blocks of any React application. They are independent, reusable pieces of code that allow you to split your application into distinct, manageable bits of logic and UI.

From our knowledge of JavaScript, you can think of components in a way as what a function is. Just as we create and use functions to avoid repeating code and separate logic, components are used to divide our application into reusable visual chunks. However, they work in isolation and return HTML (via JSX) to describe what appears on the UI.

Let take a look at a simple Greetings component used in a demo;

Instead of writing the HTML layout for a greeting over and over again, we define it once as a component and reuse it multiple times in our application by passing different props (arguments).

React Component Instances: What are they ?

Now that we understand what a React component is, let's move on to React component instances.

In programming, an instance is a concrete object created from a specific template (such as a JavaScript class or a Constructor function). In React, a component instance is the actual implementation of a component in a React application.

It is a long-lived object that holds contextual information about a particular component. Every time a component is rendered in our application, React creates a new instance of that component.

To help you visualize this, let’s take a look at a simple Counter component;

// A Counter Component
import React, { useState } from 'react';
export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

Anytime we call this Counter component in our React app, how is it actually implemented in React's internal memory? While we can't directly access it, this is a conceptual pseudocode representation of what the component instance looks like to React:

// A Pseudocode Representation of a React Component Instance
internalReactMemory = {
  CounterInstance_1: {
    componentType: Counter,
    domRef: HTMLButtonElement_ID_1,
    props: {},
    hiddenStateHookMemory: [ { value: 5, type: 'useState' } ],
    lifecycleStatus: "MOUNTED",
    children: []
  },
};

This component instance stores vital contextual information about the component; such as its state, props, children and other data that is important to that specific component when it is rendered.

React Component Instances at work.

Let’s look at some scenarios where component instances are at work behind the scenes:

1. A component instance keeps references to the DOM node of its elements as well as the instances of its child components. This enables creating, updating, and destroying of these elements or components when necessary.

2. Each instance maintains and stores its own state and props. When we use a state hook (React.useState()) or pass down props, it hooks directly into that specific instance, setting and getting data from that instance's isolated memory pool.

3. When we unmount a component, we completely destroy its instance. Unmounting a component (via conditional rendering or a ternary operator), destroys the instance and its stored state & data is lost forever.

4. Component instances also allow us to render multiple copies of a component. This is because anytime we render a component, a unique React component instance is created for it, allowing each copy to have its own internal state. Consider a scenario where you have a Tab component used three times within our application. React will generate three distinct instances of the Tab component. Each instance is an actual representation of that specific component within the application's component tree.

5. No render, No instance. It is also important to note that until we actually render a component (for example, using root.render(<Component/>)), no instance will be created for it.

Grasping how the React framework operates under the hood, particularly how component instances manage the heavy lifting of your application, completely changes the way you write code. It clears up any confusion about what happens when you create and render a component, making you a much better React developer.