score:11

Accepted answer

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!

score:5

A "React component instance" is just an instance that was created from a previously defined class component. See the example below (es6/JSX) which contains both props and state:

class MyComponentClass 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 v0.14. Since then you have the ability to use hooks starting in React v16.8, which allow you to define a functional component that has state or makes use of the component lifecyle.

As mentioned in some other comments, there are many performance benefits when using stateless components. These types of components are perfect for when you want something purely presentational as an example.

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.


Related Query

More Query from same tag