What is a component's instance?

Question

What is a component’s instance?

Answer

Let’s remember that React components are above all JavaScript classes, they are all being created and extended from an already existing class from the React library: Component

class MyComponent extends React.Component{
...

Now, because they’re extended from an existing class, their render method is 1, a requirement for every component and 2 what is called whenever we invoke the class, and thus that is what we see, the HTML return from that render method.

now instantiating a component is like invoking, you are trying to call the class and render its content, how React goes about it is using JSX which allows us to invoke a class component as if it was an HTML tag, so if I wanted to render whatever I have in the render method in MyComponent on the render’s return of another component I just need to use the class name in between the carrots like an opening/closing HTML tag:

class RenderingComponent extends React.Component {
  
  render(){
    return <MyComponent/>;
...

That is what is called an instance, which it’s really just a version of the original class, and in the case of React, it will return whatever HTML it has in its own render method.

Does this answer need to be enhanced for clarity? the class model hasn’t really been touched on in the lessons. Constructor functions are the only thing to have been really taught.

2 Likes

I am agreed with you