2

I cannot find the source but there was a clear notice in react documentation that says arrow function, class declaration and object literals are the same as far as react is concerned. I feel that there are still certain nuances. Which format should be used in what situation? Thanks.

CompA = ()=> {}
class CompB extends React.Component {}
const CompC= () => {}

(please allow me to read/reply to answers/comment in a few hours. )

Patricio Vargas
  • 5,236
  • 11
  • 49
  • 100
theMobDog
  • 1,251
  • 3
  • 13
  • 26
  • 1
    There's no object literal in the code you've posted. There's no difference between CompA and CompC, except that CompA cannot be used in strict mode. – Estus Flask Aug 19 '18 at 14:45
  • @estus CompC is a `const` so can't be re-assigned – icc97 Aug 20 '18 at 07:15

2 Answers2

2

CompA = ()=> {} is a stateless component. It has no state and has no state and has no events like componentWillMount. It's simpler to write and read. Also, it should be faster, but it the old versions of React he has the same performance. Not sure about new versions, because in v16 React core was reimplemented.

class CompB extends React.Component {} it is a class component, you should use it when you have a component state or want to handle it lifecycle

Also, there is a class CompB extends React.PureComponent {} it's the same as Component but updates only if the state or props changes. It's really faster if you have no props with complex objects because it compares props and state before render.

Please take a look at this answers too React functional components vs classical components

Alex Borodin
  • 1,555
  • 12
  • 26
1

CompA = ()=> {} and const CompC= () => {} these are both same and are called functional components or stateless components.

class CompB extends React.Component {} this type is called class component or stateful components all you can access to reacts lifecycle's method in these.

Functional components are just JavaScript functions. They take in an optional input which we call props. When you don't want to do use state and just want to display data, then you can use functional components.

The primary reason to choose class components over functional components is that they can have state.

McRist
  • 1,708
  • 11
  • 16