CODEWITHSUNDEEP
javascriptreactjses6-class
Apoorva sahay
Apoorva sahay

Reputation: 1930

whats the difference in the following react code?

I have came across the following material - ui example code.

import React from 'react';
import AppBar from 'material-ui/AppBar';

/**
 * A simple example of `AppBar` with an icon on the right.
 * By default, the left icon is a navigation-menu.
 */
const AppBarExampleIcon = () => (
  <AppBar
    title="Title"
    iconClassNameRight="muidocs-icon-navigation-expand-more"
  />
);

export default AppBarExampleIcon;

But with my tutorials experience one should subclass from React.Component to create a component. A sample example could be

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            Hello World!!!
         </div>
      );
   }
}

export default App;

Can anyone tell me why there is a difference?

Upvotes: 0

Views: 46

Answers (1)

DonovanM
DonovanM

Reputation: 1198

The first one is a functional component (sometimes called "stateless component" or "stateless functional component"). It's recommended to use the first one whenever possible. However, if you need to have state or want to use the lifecycle methods you will have to use React.Component.

Upvotes: 4

Related Questions