What is the difference between React component and React component instance?

Question

I am reading this and it says:

When a component is purely a result of props alone, no state, the component can be written as a pure function avoiding the need to create a React component instance.

What's the difference between a component and a component instance ?

Are they the same ?

EDIT:

• What is the difference between Component and Component Instance ?

• How do they relate to each-other ?

• Conceptually ?

• How are they represented in computer memory? How does the representation differ ?

• What is a component and what is an instance of that component ? (In memory.) What kind of JS Object ?

• Instance in what sense ? Object oriented sense ?

• Is it true that every component can have (one or more) instance(s) ?

• How many instances can a component have ?

• Does it even make sense to say that an instance can be created for a/every react component ?

• How are react component instances created and how are components created ?

Reason for asking:

I am trying to create a concept map of react to clarify the terminology and how they relate to each other.

Here is a draft:

Answer 1

The basic difference is, when it a Component, React will run/add all its Lifecycle methods. This will be useful when you have state in your component. When you use this component, React will create a React Component Instance which will have all the lifecycle methods and other hooks added to it.

class App extends React.Component{
  ...
}

In some cases, you won't use state. In those cases, adding all those lifecycle methods are unnecessary. So, React gives you an way to create an component which will have render alone. It is called PureComponent. When you use this, there is no need to create a new Component Instance because there is no lifecycle methods here. It'll just be a function which can take props and return React Elements.

class App extends React.PureComponent{
   ...
}

Hope this helps!

[Update]

What is a Component and a Component Instance?

Technically, a Component in React is a class or a function.

Example:

class App extends React.Component{
...
}

//stateless component
const App = (props) => {
...
}

When you use that component, it'll be instantiated, more like new App(). But, React does it by itself in a different way.

For Example:

render(){
   return <App/> //Instance of the component App
}

Instances are required because, each instance can perform individually. Instances are a copy of original class.

Simple answer is, components will be a Class and component Instance will be the copy/instance of the class and will be used in render

Hope this explains!

Answer 2

When a component is purely a result of props alone, no state, the component can be written as a pure function avoiding the need to create a React component instance.

A "React component instance" is just using classes to instantiate a React component. See the example below (es6/JSX) which contains both props and state:

class MyComponentInstance extends React.Component {
    constructor(props) {
        super(props);
        // set initial state
        this.state = {
            example: 'example'
        };
    }
    render() {
        return <div>
            <div>{this.state.example}</div>
            <div>{this.props.example}</div>
        </div>;
    }
}

If you have no need for state in your component you can use a pure stateless functional react component like so:

function MyStatelessFunctionalComponent(props) {
    return <div>{this.props.example}</div>;
}

Here is some more information about stateless React components when they were introduced in React 0.14. https://medium.com/@joshblack/stateless-components-in-react-0-14-f9798f8b992d#.yv0zxjxr5

Update: As mentioned in some other comments, there are performance benefits when using stateless components...

Since there’s no state or lifecycle methods to worry about, the React team plans to avoid unnecessary checks and memory allocations in future releases.

https://medium.com/@housecor/react-stateless-functional-components-nine-wins-you-might-have-overlooked-997b0d933dbc#.ttiirkcf4