Functional component Or Class component in React, What ,When and Why.

React, Angular and various other framework today advocating component driven development. where every thing is component and we combine those component to create pages , views .

Using React we do component based development. React provide two kind of components.

Class Component and Functional Component.

Class component is a component which is extended by React.Component or Component class. Class Component support all life cycle methods and can have state. so they also called statefull component.

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

Functional component , as name suggest functional component is a simple function which take props if there any and return a React Element and does not have any state and lifecycle method.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

When and Why

It depends on our requirement. if do not require lifecycle and state, we can go for functional component. As functional component does not have any overhead of change detection and lifecycle maintenance. it increase the performance of component drastically.

If you ever have a class component with only a render method — you should always make it a functional component.