Functional vs Class Components React

There are two different ways to create components in React. You can use functional or class components. They both have their own pros and cons and with the introduction of hooks, functional components can be just as powerful. What are the main difference between the two? Let's find out!

Setup

The declaration for each type of component is different. Functional components are just plain Javascript functions. This mean that they can be declared with the arrow or function keyword syntax. Functional components returns JSX and does NOT use the render function like class components.

function Home(props){
return(
<div>
  <p>This is the home page</p>
</div>
)}

Class components use ES6 class syntax. This is the main difference between the two components. Class components are just javascript classes. These components are created by using a class that has a render function that returns your desired JSX code.

Class components

class Home extends React.Component{
  constructor(props){

 super(props)
  }
  render(){
    return <div>
    <p>This is the home page</p>
    </div>
  }
}

State

Each component handles state differently. Before 2018, class components where the only type of components that could manage state. The introduction of hooks allows functional components to manage state. Functional components use the useState hook for managing state. The useState hook will create and also change the state for the component.

function Home(props){
const [count, setCount] = useState(0)
return(
<div>
  <p>This is the home page</p>
  <p> number of times clicked: {count}</p>
<button onClick={()=>setCount(count+1)}>Click me!</button>
</div>
}

Class components manage state with this.state and this.setState. We create state my setting our state object equal to this.state. We can then change our state by using this.setState function and passing in our updated state object.

class Home extends React.Component{
  constructor(props){

    super(props)
    this.state={
      count:0
    }
  render(){
    return <div>
      <p>This is the home page</p>
      <p> number of times clicked: {this.state.count}</p>
      <button onClick {()=>this.setState({count:this.state.count+1})}>Click me!</button>
    </div>
  }
}

Props

The last difference I will discuss is how each type of component handles props. Class components use the this keyword to access props. Since functional components are just regular functions, we can pass in props as an argument to our function. This makes accessing them much simpler.

<Home userName=‘Tripp’/>

function Home(props){
const [count, setCount] = useState(0)
return(
<div>
    <h2>Hello {props.userName}!</h2>
    <p>This is the home page</p>
    <p> number of times clicked: {count}</p>
    <button onClick={()=>setCount(count+1)}>Click me!</button>
</div>
}

To access the props in a class component we must use this.props.userName. We have to use the this keyword since class components use ES6 class syntax.

class Home extends React.Component{
  constructor(props){

    super(props)
    this.state={
      count:0
    }
  }
  render(){
    return <div>
      <h2>Hello {props.userName}!</h2>
      <p>This is the home page</p>
      <p>number of times clicked: {this.state.count}</p>
      <button onClick={()=>this.setState({count:this.state.count+1})}>Click me!    </button>
    </div>
  }
}

What is better?

I am afraid that this question does not have a straight cut answer. They both serve their own purpose. Since the introduction of hooks, functional components are becoming more powerful and hence more mainstream to build with. React did say they do not plan on getting rid of class components and that it is not necessary to update all legacy class components to functional components. This means that for the foreseeable future either option is acceptable. I personally am a fan of the functional components. I try to use them and hooks as much as I can. I feel they are cleaner to create and also I think the future of React is heading in that direction. Now that you know the main differences between the two, the choice is up to you!

Comments

[FJones]

Counterpoint: ErrorBoundaries. Class components do have a purpose, especially with complex workflows or more elaborate non-React logic.
That said, the biggest benefits of function components is certainly the declarative nature of lifecycle management with them.

[Mario Diaz]

Great article, clear explanation.