Class Based React
Tags: webdev, react, es6
Published: 2023-07-24 08:11:39

If you are a new React developer then most probably you will be using functional based Approach for React components. But if you are an old React Developer then most likely you have used Class based Approach for React Components or might be still using. 
Now there are many debates that functional based approach is better than class based approach and vice-versa. But it's not as simple as that. Different scenarios need different approaches. It is not a rule of line that you have to only use one approach and denounce other one rather it is better to have understanding of both approaches. 

## Class based approach

It uses ES6 Classes for defining components. If you are familiar with functional based approach then, you know that, it uses functions to define the component. In case of class based approach, all class components are extended form of `React.Component`. Extending `React.Component` class allows user to use prebuild API's. Basic `App` component in Class based React looks like :

```jsx
import React from "react"
class App extends React.Component{
  render(){
    return <h1>Hello World!</h1>
}
export default App;
```

## What about Hooks

Technically you can use hooks with classes. But it takes away the features of Class Based Approach. Nearly all functionality of hooks can be achieved using classes.
In rare scenarios you are bound to use hooks for achieving a functionality with ease. If you are familiar with basic hooks in React then, you will not find any difficulty in grasping the Class implementation. For Example - instead of `useState()` we use `this.state` and `setState()`. 


Now , I'll try to explain how simple functionalities of `useState()` and `useEffect()` hooks are achieved using classes.

## constructor()

Before learning about state management, it is very crucial to get the gist of `constructor()`. Basically `constructor()` are the methods that are called when object of Class is initialized. This method is used to setup state of the Component with initial values.

In the constructor another method that is important is `super` method. By calling this method we get access to methods and states of parent classes in which this is called. This method is useful for accessing `props` in the Component.

```jsx
import React from "react"
class App extends React.Component {
  constructor(props) {
    super(props)
  }
  return <h1>Hello World!</h1>
  }
}
export default App;
```

## Counter App

Now lets try to implement counter in Class based Approach. If you are familiar with hooks, then implementing this functionality will cost no effort.

We will start by defining state. In the Component 

```jsx
constructor(props){
  super(props)
  this.state = {
  count:0
 }
}
```

For changing the value of `count`,we will be using `setState()` method . As

`this.setState({count:this.state.count+1})`
`this.setState({count:this.state.count-1})`

Our basic Counter App is ready. 
Complete code

```jsx
import React from "react";

class App extends React.Component {
  constructor() {
    super();
    this.state = { count: 0 };
  }
  render() {
    return (
      <>
        <h1>{this.state.count}</h1>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          +
        </button>
        <button onClick={()=>this.setState({count:this.state.count-1})}>
          -
        </button>
      </>
    );
  }
}

export default App;
```

In the above code we initialize `count` state and change its value using `setState()` method. It is very similar to `useState()` hook.  `this` keyword is typically used here to bind method with its corresponding class.

## Data fetching

In functional based approach, we use `useEffect()` hook to fetch data from the API. Typically this hook is used for side effects in the web application. Because we don't want to stop the rendering of page, therefore we fetch data as a side effect. 
In class based approach we use `componentDidMount()` method . It allows user to perform actions when component is rendered on the webpage. If you deep dive into both the methods then, they are very different to their core, but for achieving these types of functionality, they work pretty much identical.
Now let's learn it by the code- 
In this example , I will be using DummyJSON product API. You can get it [here](https://dummyjson.com/docs/products)

First we will create a fetching function as

```jsx
fetchData=async()=>{
  const response=await fetch('https://dummyjson.com/products')
  const result = await response.json()
  this.setState({products:result})
}

```
In this example, I'll be storing the result in `products` state.

Now it's time to call `fetchData()` method so that it doesn't block rendering of the page.

```jsx
 componentDidMount(){
    this.fetchData()
  }
```

For the `products` state 

```jsx
constructor(props){
 super(props)
 this.state={
  products=[];
 }
}
```

## `App.js`

```jsx
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { products: [] };
  }

  fetchData = async () => {
    const response = await fetch("https://dummyjson.com/products");
    const result = await response.json();
    this.setState({ products: result });
  };

  componentDidMount() {
    this.fetchData();
  }

  render() {
    console.log(this.state.products);
    return (
      <>
        <h1>Data fetching</h1>
      </>
    );
  }
}

export default App;
```

### console 

![console log of the products state](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z9ef0mhw3mmbu391kmj2.png)

That's it, now you know the basic concept of class based approach to react. I tried my best to explain the concept. Hope you learnt a lot.
 
References -
[react.dev](https://react.dev/reference/react/Component#componentdidmount)
[super and props](https://www.geeksforgeeks.org/whats-the-difference-between-super-and-superprops-in-react/)

For any queries , connect with me [here](https://siddharthamishra.netlify.app/)