Functional vs Class Components React
Tags: react, javascript, webdev
Published: 2021-07-07 16:31:46

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. 
```react
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

```react
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.

```react
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. 

```react
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. 

```react
<Home userName=‘Tripp’/>
```
```react
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.

```react
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!