Component Instances

There's an important concept in React that is rarely discussed: whenever we render a component in React, we create a component instance.

A lot of the information online about component instances is very, very outdated; the most popular blog post on the topic is from 2016! React has changed a ton since then, and many things mentioned in the article just aren't true anymore.

Let's dig into it.

Video Summary

Note: This video is particularly hard to summarize because it digs into two separate sandboxes. I strongly recommend watching the video, if you haven't already! It covers some very important stuff, and this summary doesn't do it justice.

When we create a state hook, where does that state actually live? Is it associated with the React elements, or stored in a centralized place?
The missing piece of information is called component instances.
Whenever we render a component for the first time, we “mount” the component. Mounting a component involves two steps:
1. We evaluate the returned JSX and pass it onto React, so that React can create the corresponding DOM elements.
2. We create a component instance, a long-lived object that holds contextual information about this particular instance of the component.
The state is stored on this particular instance. When we write React.useState(), this code "hooks into" the instance, getting and setting state from the instance.
With conditional rendering, it's possible to unmount a component. When we unmount a component, we destroy the component instance, and any stored state is lost forever.
Component instances allow us to render multiple "copies" of the same component, and they each have their own internal state.

Here's the first sandbox from the video, the minimal React app:

Code Playground

Open in CodeSandbox

import React from 'react';

import { createRoot } from 'react-dom/client';

function RandomNumber() {

const [num, setNum] = React.useState(0);

return (

<button onClick={() => setNum(Math.random())}>

Current number: {num}

</button>

);

}

const root = createRoot(document.querySelector('#root'));

root.render(

</>

);

…And here's the second sandbox from the video, the more-complex application with toggleable footer.

Code Playground

import React from 'react';

function App() {

const [

includeFooter,

setIncludeFooter,

] = React.useState(false);

return (

<h1>Some Application</h1>

<input

type="checkbox"

id="footer-toggle"

checked={includeFooter}

onChange={(event) => {

setIncludeFooter(event.target.checked);

}}

Toggle Footer

</label>

</form>

{includeFooter && <Footer />}

</>

);

}

function Footer() {

const [

backgroundColor,

setBackgroundColor,

] = React.useState('#232538');

return (

<form>

Tweak background:

</label>

<input

type="color"

id="bg-picker"

value={backgroundColor}

onChange={(event) => {

setBackgroundColor(event.target.value);

}}

</form>

<p>

Rights Reserved.

</p>

</footer>

);

}

export default App;

Elements don't create instances, rendering does (info)

Suppose we have the following code:

import React from 'react';

function Counter({ initialValue = 0 }) {
  const [count, setCount] = React.useState(initialValue);

  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}

const elem = <Counter initialValue={10} />;

console.log(elem);

We're creating a <Counter /> element, but we aren't doing anything with it. As a result, the Counter component won't actually be rendered. There will be no component instance, no count state variable, none of that.

Elements are descriptions of what we want to create. In this case, we're describing a Counter with an initial value of 10:

{
  type: ƒ Counter,
  key: null,
  ref: null,
  props: {
    initialValue: 10
  },
  _owner: null,
  _store: {}
}

In order to create a component instance, we have to render it:

import { createRoot } from 'react-dom/client';

const root = createRoot(document.querySelector('#root'));
root.render(<Counter initialValue={10} />);

We're passing along this <Counter /> description to React, so that React can make it real. React renders the Counter component, creating the instance in the process, and adds a <button> to the DOM.

In our day-to-day work with React, it's easy to forget that this is the root of all React applications. It's one of those “set it and forget it” things, it doesn't require any maintenance. But fundamentally, React elements don't do anything until we pass them to React to be rendered.