Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

reactjs

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:

enter image description here

like image 724
jhegedus Avatar asked Nov 04 '16 13:11

jhegedus


1 Answers

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!

like image 162
Pranesh Ravi Avatar answered Oct 03 '22 12:10

Pranesh Ravi