Blog | Logging A React Component

Sometimes, you just have to give in to curiosity.

That happened with me when I console logged a React Component.

This might not be advanced level stuff, but let me show you what I found.

Example

Lets take a sample React component -

export default function App(props) {
  return (
    <section className="App">
      <h1>Hi, my name is {props.name}.</h1>
    </section>
  )
}

Now, in order to render this react component, all we do is use <App /> with required props wherever it is needed.

But I bet, many of us didn’t try to find out -

what exactly is returned if we do console.log(App())
what happens if we do console.log(<App />)

Lets figure it out one by one!

Logging `App()`

Lets try and log the App component function with the required props -

console.log(App({ name: "Sanjeet" }))

This is what we get -

{
    "$$typeof": Symbol(react.element),
    "type": "section",
    "key": null,
    "ref": null,
    "props": {
        "className": "App",
        "children": {
            "$$typeof": Symbol(react.element),
            "type": "h1",
            "key": null,
            "ref": null,
            "props": {
                "children": ["Hi my name is ", "Sanjeet", "."]
            },
            "_owner": null,
            "_store": {},
            "_self": undefined,
            "_source": undefined
        }
    },
    "_owner": null,
    "_store": {},
    "_self": undefined,
    "_source": undefined
}

A lot to unpack here, right ?

What’s going on ?

When we call App in this way, its a plain simple JavaScript function which simply returns whatever is defined in the return statement.

As soon as <section> or <h1> tags which are JSX Elements are encountered, they are converted into React.createElement calls by React.

<h1 className="name">Sanjeet</h1>

// will get converted into React.createElement(type, props, children)
React.createElement("h1", { className: "name" }, "Sanjeet")

Oh btw, just so these JSX are converted into React.createElement calls, we had to import React explicitly in our component files. Now we don’t need to because of JSX Transform

The output of these createElement calls is a react element object which we saw above in the result of the console.log.

React Element Object

Lets start with type, it specifies the type of react element that we want to create. So, for a <section> it will say type: "section".

What if we encounter other React Component ? Then type will just point to the function defining that react component.

Lets say we have a <Bio /> React component as well -

function Bio() {
  return <h2>I am just a curious Front end developer.</h2>;
}

// and we have used it inside App
export function App(props) {
  return (
    <section className='App'>
      <h1>Hi my name is {props.name}.</h1>
      <Bio />
    </section>
  );
}

now, inside props.children of <section>, we will have -

{
  $$typeof: Symbol(react.element),
  type: f Bio(),
  key: null,
  ref: null,
  props: {},
  _owner: null,
  _store: {},
  _self: undefined,
  _source: undefined
}

I guess, key and ref properties are straight-forward right ? key contains the value provided explicitly by the user to the key prop, which helps React in efficiently updating and reordering elements in lists.

props attribute contains all the properties and attributes passed to the element which contains children as well. Just in the above example, the <section> had a className attached to it - “App”, which is visible inside props - props: { className: "App", children: {...} }

props.children can contain strings, array of strings, React elements, array of React elements, you get the idea.

However, did you notice one thing ? In the react element object, the inside <h1> had -

"props": {
    "children": ["Hi my name is ", "Sanjeet", "."]
},

Since, "Sanjeet" was passed as a prop, it appeared as a different item inside children array, as the function App() had to evaluate the function body according to the props passed as well.

_owner is an internal field used by React to track the component responsible for creating this element. _store is an internal object used in development mode for tracking and validating the element’s properties.

_self and _source are another 2 internally used attributes which a developer shouldn’t worry about.

Is it important to know all this ?

YES, infact, this is nothing but the virtual DOM that is a widely popular term in React Ecosystem. The structure that you see above corresponds to the component tree which is then used by the renderer to render DOM elements onto the webpage.

This is the primary job of React - to print out a tree of components, and compare and convert 2 such trees between update cycles.

Logging `<App />`

Eventhough, App can be called in the way we saw earlier, the correct way to tell React to render a component is via <App />.

When you call App() directly, you bypass React’s internal mechanisms like lifecycle management and hooks (e.g., useState, useEffect).

Now lets console.log <App name="Sanjeet" />. This is what we will get -

{
  $$typeof: Symbol(react.element),
  type: f App(),
  ref: null,
  key: null,
  props: {
    name: "Sanjeet"
  },
  _owner: null,
  _store: {},
  _self: undefined,
  _source: undefined
}

This is what we saw earlier as well with <Bio /> component above. Instead of getting a <section> in type, we now get a reference of the function defining the App component. We can also evaluate the props passed to it.

`$$typeof` attribute

You thought I missed this, right ?

React uses $$typeof to ensure that only valid React constructs - elements, fragments, portals are processed.

Why though ? Well, anyone can try to inject malicious data in the form of a JavaScript object which might resemble a React Component.

const invalidElement = { type: 'div', props: {} }; // Not a valid React element
console.log(invalidElement.$$typeof); // undefined

We need it so that only those components which are shipped by React are allowed.

It is also used by the renderer like ReactDOM and React Native to distinguish between different React constructs.

Personal take

I know console logging either App() or <App /> is not going to help you out with your project work.

But it really amazes me that the developers who created this tool that we oh so widely use, went to these lengths and complexities to enhance and simplify the experience of millions of developers around the world, myself included.

Hi, I am Sanjeet Tiwari... Let's talk about

Logging A React Component

Example

Logging App()