freeCodeCamp/guide/english/react/functional-components-vs-class-components/index.md

title

title
Functional Components vs Class Components

Functional Components vs Class Components

There are mainly two components in React:

• Functional Components
• Class Components

Functional Components

• Functional components are basic JavaScript functions. These are typically arrow functions but can also be created with the regular function keyword.
• Sometimes referred to as "dumb" or "stateless" components as they simply accept data and display them in some form; that is they are mainly responsible for rendering UI.
• React lifecycle methods (for example, componentDidMount) cannot be used in functional components.
• There is no render method used in functional components.
• These are mainly responsible for UI and are typically presentational only (For example, a Button component).
• Functional components can accept and use props.
• Functional components should be favored if you do not need to make use of React state.

import React from "react";

const Person = props => (
  <div>
    <h1>Hello, {props.name}</h1>
  </div>
);

export default Person;

Class Components

• Class components make use of ES6 class and extend the Component class in React.
• Sometimes called "smart" or "stateful" components as they tend to implement logic and state.
• React lifecycle methods can be used inside class components (for example, componentDidMount).
• You pass props down to class components and access them with this.props

import React, { Component } from "react";

class Person extends Component {
  constructor(props){
    super(props);
    this.state = {
      myState: true;
    }
  }
  
  render() {
    return (
      <div>
        <h1>Hello Person</h1>
      </div>
    );
  }
}

export default Person;

More Information

• React Components
• Functional vs class components
• Stateful vs Stateless Functional Components in React
• State and LifeCycle